:root{ --panel:#f7f7f7;--card:#e8e8e8;--text:#222;--muted:#666;--border:#aaa; --accent:#2563eb;--accent-bg:#dbeafe;--p1:#36a852;--p2:#7c5ce0;--p3:#aa7a50;--p4:#2f78c4;--p5:#cf4b4b;--p6:#23958f; } *{box-sizing:border-box} body{font-family:Arial,sans-serif;margin:0;padding:16px;color:var(--text);background:white} .app{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:12px;max-width:1200px;margin:auto} .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.top-actions{display:flex;gap:8px} .viewport{height:520px;position:relative;overflow:hidden;border:1px solid var(--border);border-radius:10px;background:var(--panel);cursor:grab;touch-action:none} .viewport.panning{cursor:grabbing}.world{position:absolute;left:0;top:0;will-change:transform} .board{display:grid;grid-template-columns:repeat(60,36px);grid-template-rows:repeat(60,36px);gap:1px;width:max-content;background:var(--border);padding:1px} .cell{width:36px;height:36px;border:0;padding:0;background:white;position:relative;display:flex;align-items:center;justify-content:center} .cell.road{background:var(--card);box-shadow:inset 0 0 0 1px var(--muted)} .cell.preview,.cell.hover-good{background:var(--accent-bg);box-shadow:inset 0 0 0 3px var(--accent)} .cell.hover-bad{box-shadow:inset 0 0 0 3px #b23b3b}.cell.dest{cursor:pointer} /* V1.8.97: movement destinations are painted on the CELL itself. This avoids every child/pseudo-element stacking rule used by the 3D road art. */ .cell.dest{cursor:pointer} .move-dest-outline{display:none!important} .cell.road.dest{ box-shadow: inset 0 0 0 4px #35d7ff, inset 0 0 0 6px rgba(255,255,255,.92), 0 0 0 2px rgba(53,215,255,.88), 0 0 12px 4px rgba(53,215,255,.72)!important; z-index:120!important; } .cell.dest:not(.road){ box-shadow: inset 0 0 0 4px #35d7ff, inset 0 0 0 6px rgba(255,255,255,.92), 0 0 0 2px rgba(53,215,255,.88), 0 0 12px 4px rgba(53,215,255,.72)!important; z-index:120!important; } .traveler{position:absolute;left:9px;top:5px;width:18px;height:25px;z-index:8;pointer-events:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85));transform-origin:center center} .traveler svg{width:100%;height:100%;display:block;overflow:visible} .traveler .car-body{stroke:#fff;stroke-width:3.2;paint-order:stroke fill} .traveler .car-window{fill:#d9f1ff;stroke:#111;stroke-width:1.2} .traveler .car-wheel{fill:#050505;stroke:#fff;stroke-width:1} .traveler.p1{--car-color:var(--p1)} .traveler.p2{--car-color:var(--p2)} .traveler.p3{--car-color:var(--p3)} .traveler.p4{--car-color:var(--p4)} .traveler.p5{--car-color:var(--p5)} .traveler.p6{--car-color:var(--p6)} .traveler.active-turn::before{ content:""; position:absolute; left:50%; top:50%; width:54px; height:75px; transform:translate(-50%,-50%); border-radius:50%; border:5px solid rgba(255,240,80,.98); box-shadow: 0 0 0 5px rgba(255,255,255,.82), 0 0 18px 8px rgba(255,221,60,.95), 0 0 34px 14px rgba(255,196,0,.58); background:rgba(255,235,80,.12); z-index:-1; pointer-events:none; } .traveler.active-turn{z-index:12} .cell{overflow:visible!important} .below-map-hud{margin-top:10px} .compact-bank{ display:flex;align-items:center;gap:8px; padding:7px 9px; overflow:hidden; } .compact-bank .bank-title{ flex:0 0 auto; font-size:11px; letter-spacing:.08em; } .compact-bank .player-roster{ display:flex; flex-wrap:nowrap; gap:5px; min-width:0; overflow-x:auto; white-space:nowrap; padding-bottom:2px; } .compact-bank .player-chip{ flex:0 0 auto; padding:4px 7px; font-size:11px; line-height:1.1; border-radius:999px; } .compact-bank .player-chip .swatch{ width:9px;height:9px; } .turn-order-bar{ display:flex;align-items:center;gap:10px;margin:6px 0 8px;padding:7px 9px; border:1px solid var(--border);border-radius:10px;background:#f7f7f7;overflow:hidden } .turn-order-label{flex:0 0 auto;font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--muted)} .turn-order-track{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;padding:4px 6px} .turn-order-chip{ position:relative;display:flex;align-items:center;gap:6px;flex:0 0 auto;min-width:88px; padding:7px 10px;border-radius:999px;border:2px solid transparent;background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08);font-size:12px;font-weight:800;white-space:nowrap } .turn-order-chip .turn-dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.35)} .turn-order-chip .turn-pos{font-size:9px;color:var(--muted);font-weight:900;letter-spacing:.06em} .turn-order-chip.current{ padding:9px 13px;border-color:#222;background:#fffef1; box-shadow:0 0 0 4px rgba(255,222,70,.45),0 3px 10px rgba(0,0,0,.15);z-index:2 } .turn-order-chip.current::before{ content:"";position:absolute;inset:-6px;border-radius:999px;padding:3px; background:conic-gradient(from 0deg,#ffcc00,#fff5a0,#ff9900,#ffcc00); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:turn-ring-spin 2.8s linear infinite;pointer-events:none } .turn-order-chip.you{outline:2px solid rgba(47,143,70,.55);outline-offset:2px} .turn-arrow{flex:0 0 auto;font-weight:900;color:#777;font-size:16px} @keyframes turn-ring-spin{to{transform:rotate(360deg)}} .your-turn-alert{ margin:8px 0;padding:11px 14px;border-radius:10px;text-align:center;font-size:20px; font-weight:1000;letter-spacing:.16em;color:#fff;background:#238b45;border:3px solid #fff; box-shadow:0 0 0 4px #238b45,0 0 22px rgba(35,139,69,.45) } .your-turn-alert.hidden{display:none} #app.your-turn-global .viewport{box-shadow:0 0 0 5px rgba(35,139,69,.86),0 0 28px 7px rgba(35,139,69,.34)} #app.your-turn-global .bankbar{box-shadow:inset 0 0 0 2px rgba(35,139,69,.65)} #app.your-turn-global .turn-order-bar{border-color:#238b45;box-shadow:0 0 0 2px rgba(35,139,69,.24)} .below-map-chat{margin-top:10px;margin-bottom:4px} .game-chat{ margin-top:8px; border:1px solid var(--border); border-radius:9px; background:#fff; overflow:hidden; } .game-chat-head{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:7px 9px;background:#f5f5f5;border-bottom:1px solid var(--border); } .game-chat-head strong{font-size:13px} .game-chat-head small{color:var(--muted)} .chat-messages{ height:120px;overflow-y:auto;padding:8px 9px; display:flex;flex-direction:column;gap:5px;background:#fbfbfb; } .chat-empty{font-size:12px;color:var(--muted);font-style:italic} .chat-line{font-size:13px;line-height:1.3;word-break:break-word} .chat-line .chat-name{font-weight:800;margin-right:5px} .chat-line .chat-time{font-size:10px;color:var(--muted);margin-left:5px} .chat-compose{display:grid;grid-template-columns:1fr auto;gap:6px;padding:7px;border-top:1px solid var(--border)} .chat-compose input{min-width:0;padding:8px;border:1px solid var(--border);border-radius:7px;text-transform:none;font-weight:400;letter-spacing:0} .chat-compose button{padding:8px 12px;border:1px solid var(--border);border-radius:7px;background:#fff;font-weight:700} .feature-layer{position:absolute!important;left:0!important;top:0!important;width:36px;height:36px;z-index:6!important;pointer-events:none} .feature-layer .road-dot{position:absolute!important;left:4.5px!important;top:4.5px!important;width:27px;height:27px;margin:0!important;border-radius:50%;background:#557a9b;border:2.5px solid #fff;box-sizing:border-box;box-shadow:0 0 0 1px rgba(0,0,0,.5);pointer-events:none} .feature-layer .road-dot.dot-blue,.tray-dot.dot-blue{background:#557a9b} .feature-layer .road-dot.dot-green,.tray-dot.dot-green{background:#5f846f} .feature-layer .road-dot.dot-orange,.tray-dot.dot-orange{background:#aa7a50} .feature-layer .stop-sign{position:absolute!important;left:4.5px!important;top:4.5px!important;width:27px;height:27px;margin:0!important;font-size:7px;font-weight:900;letter-spacing:.03em;color:#fff;background:#9f4e49;display:flex;align-items:center;justify-content:center;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);box-shadow:inset 0 0 0 2.5px #fff,0 0 0 1px rgba(0,0,0,.65);text-shadow:0 1px 1px rgba(0,0,0,.35);pointer-events:none} .road-dot{width:27px;height:27px;border-radius:50%} .stop-sign{font-size:7px;font-weight:900;letter-spacing:.03em;width:27px;height:27px;color:#fff;background:#9f4e49;display:flex;align-items:center;justify-content:center;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)} aside{min-width:0}.banner{padding:11px;border-radius:9px;text-align:center;font-weight:800;letter-spacing:.08em;border:2px solid #222;color:white;margin-bottom:8px}.banner.p1{background:var(--p1)}.banner.p2{background:var(--p2)}.banner.p3{background:var(--p3)}.banner.p4{background:var(--p4)}.banner.p5{background:var(--p5)}.banner.p6{background:var(--p6)} button{font:inherit;cursor:pointer}.primary{width:100%;padding:12px;border:0;border-radius:8px;background:var(--accent);color:white;font-weight:700;margin-bottom:8px}.primary:disabled,button:disabled{opacity:.45;cursor:not-allowed} .diecard,.info{padding:12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px}.diehead{display:flex;justify-content:space-between;align-items:center} .die-face{width:48px;height:48px;border:2px solid #222;border-radius:9px;background:white;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:5px}.pip{width:8px;height:8px;border-radius:50%;background:#222;align-self:center;justify-self:center} .tray{height:96px;position:relative;border:1px dashed var(--border);border-radius:8px;margin-top:8px;overflow:hidden;touch-action:none;user-select:none}.psq{position:absolute;width:25px;height:25px;background:var(--card);border:1px solid var(--muted);cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center}.tray-dot{width:9px;height:9px;border-radius:50%;background:#557a9b}.tray-stop{font-size:5.5px;font-weight:900;letter-spacing:.02em;color:#fff;background:#9f4e49;width:21px;height:21px;display:flex;align-items:center;justify-content:center;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);box-shadow:inset 0 0 0 2px #fff,0 0 0 1px rgba(0,0,0,.55)} .actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.actions button,.secondary{padding:8px;border:1px solid var(--border);border-radius:6px;background:white}.used{opacity:.4}.active{box-shadow:inset 0 0 0 2px var(--accent)} .legend{font-size:13px;color:var(--muted);margin-top:8px}.legend span{margin-right:12px}.lt{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid #222;vertical-align:-2px}.ld{display:inline-block;width:11px;height:11px;border-radius:50%;background:#557a9b;vertical-align:-1px} .overlay{position:absolute;inset:0;z-index:50;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;padding:16px}.hidden{display:none}.modal{width:min(420px,100%);background:white;border-radius:12px;padding:18px}.answer{width:100%;text-align:left;padding:11px;border:1px solid var(--border);border-radius:8px;background:white;margin-top:8px}.answer.selected{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-bg)}.deck-choice{display:grid;gap:9px;margin:14px 0}.deck-choice button{padding:12px;border:1px solid var(--border);border-radius:8px;background:white;font-weight:700}.answer.correct{background:#dcfce7;box-shadow:inset 0 0 0 2px #36a852}.answer.wrong{background:#fee2e2;box-shadow:inset 0 0 0 2px #b23b3b} .bankbar{display:flex;align-items:center;gap:18px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;background:white;flex-wrap:wrap} .bankbar .bank-title{font-weight:800}.bankbar .bank-player{display:flex;gap:6px;align-items:center}.bankbar small{color:var(--muted);margin-left:auto} .landscape-fill{position:absolute!important;inset:0!important;border-radius:2px;background-image:url("../images/landscape-fill-v1.png");background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:none;z-index:20!important;pointer-events:none}.cell.landscape-preview{background:#dfead5;box-shadow:inset 0 0 0 3px #5f8b46}.cell.landscape-good{background:#dfead5;box-shadow:inset 0 0 0 3px #5f8b46}.cell.landscape-bad{background:#f7dddd;box-shadow:inset 0 0 0 3px #b23b3b} .landscape-tray{height:150px;position:relative;border:1px dashed var(--border);border-radius:8px;margin:12px 0;background:#f8faf6;touch-action:none;user-select:none}.landscape-sq{position:absolute;width:26px;height:26px;border:1px solid #4f6f3b;border-radius:2px;background-image:url("../images/landscape-fill-v1.png");background-size:cover;background-position:center;background-repeat:no-repeat;cursor:grab;touch-action:none}.overlay.landscape-mode{pointer-events:none}.overlay.landscape-mode .modal{pointer-events:auto}.overlay.stop-docked{position:fixed;inset:auto;background:transparent;padding:0;display:block;pointer-events:none;z-index:60}.overlay.stop-docked .modal{width:100%;max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.28);border:2px solid #555;pointer-events:auto}.overlay.stop-docked.landscape-mode .modal{pointer-events:auto}.landscape-help{font-size:13px;color:var(--muted);line-height:1.35;margin-bottom:10px}.stop-settings-list{display:grid;gap:8px;margin:12px 0;max-height:330px;overflow:auto}.stop-setting{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--border);border-radius:8px;background:white}.stop-setting input{width:18px;height:18px}.settings-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.settings-note{font-size:13px;color:var(--muted);line-height:1.35} .mini-game-note{font-size:14px;line-height:1.45;padding:10px;border:1px solid var(--border);border-radius:8px;background:#f7f7f7;margin-bottom:12px} .mini-game-timer{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:5px 0 10px;font-weight:900} .mini-game-timer span{font-size:44px;line-height:1} .mini-game-timer small{font-size:14px;color:var(--muted)} .mini-game-timer.warning span{color:#b42318} .mini-game-prompt{font-size:25px;font-weight:850;line-height:1.2;text-align:center;padding:18px 10px;border:2px solid #222;border-radius:10px;background:#fff;margin-bottom:9px} .mini-game-sub{text-align:center;font-size:13px;color:var(--muted);margin-bottom:10px} .mini-game-wide{width:100%;margin-bottom:10px} .mini-game-results{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mini-game-results .primary{margin:0} .mini-game-result{text-align:center;font-size:18px;font-weight:750;padding:12px;border-radius:8px;background:#f7f7f7} .mini-game-history{margin:-2px 0 10px;padding:8px 10px;border-radius:8px;background:#eef1f4;border:1px solid #cbd1d8;font-size:12px;line-height:1.35;color:#444} .mini-game-history strong{color:#111} @media(max-width:760px){.bankbar small{width:100%;margin-left:0}.app{grid-template-columns:1fr}.viewport{height:430px}} /* V1.18: larger docked STOP/Landscape panel */ .stop-dock, .stop-panel, #stopDock, #stopPanel { width: 255px !important; min-width: 255px !important; max-width: 255px !important; max-height: 500px !important; overflow-y: auto !important; padding: 16px !important; } .stop-dock .modal, .stop-panel .modal, #stopDock .modal, #stopPanel .modal { width: 100% !important; max-width: none !important; padding: 14px !important; } .stop-dock .primary, .stop-panel .primary, #stopDock .primary, #stopPanel .primary { min-height: 42px; } /* V1.18: keep STOP/Landscape action controls fully reachable */ .stop-dock, .stop-panel, #stopDock, #stopPanel { width: 255px !important; min-width: 255px !important; max-width: 255px !important; max-height: 470px !important; overflow: hidden !important; padding: 12px !important; display: flex !important; flex-direction: column !important; } .stop-dock .modal, .stop-panel .modal, #stopDock .modal, #stopPanel .modal { width: 100% !important; max-width: none !important; padding: 10px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; max-height: 446px !important; overflow: hidden !important; } .stop-dock .landscape-preview, .stop-panel .landscape-preview, #stopDock .landscape-preview, #stopPanel .landscape-preview { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; } /* Pin likely landscape placement buttons at the bottom of the dock */ .stop-dock button[id*="place" i], .stop-panel button[id*="place" i], #stopDock button[id*="place" i], #stopPanel button[id*="place" i], .stop-dock .place, .stop-panel .place, #stopDock .place, #stopPanel .place { position: sticky !important; bottom: 0 !important; z-index: 5 !important; flex: 0 0 auto !important; width: 100% !important; min-height: 44px !important; margin-top: 10px !important; background: var(--accent) !important; color: white !important; } #placeLandscape{ position:relative !important; top:auto !important; bottom:auto !important; width:100% !important; min-height:44px !important; margin:10px 0 !important; } /* V1.18: STOP event panel always occupies the Die 1 area */ aside{position:relative} .stop-dock, .stop-panel, #stopDock, #stopPanel{ top:72px !important; bottom:auto !important; z-index:80 !important; } /* V1.18 Attractions */ .attraction-fill{ position:absolute;inset:3px;border-radius:6px;background:#fff3c4; border:2px solid #9a6b00;z-index:5;display:flex;align-items:center; justify-content:center;font-size:18px;pointer-events:none } /* Attractions already completed/left by the active player remain visible, but are visually retired for that player. */ .cell.attraction-visited .attraction-fill{ filter:brightness(.48) saturate(.35); opacity:.72; } .cell.attraction-visited .attraction-tag{opacity:.68} .cell.attraction-preview{background:#fff7d8;box-shadow:inset 0 0 0 3px #b88700} .cell.attraction-good{background:#fff7d8;box-shadow:inset 0 0 0 3px #3f8b46} .cell.attraction-bad{background:#f7dddd;box-shadow:inset 0 0 0 3px #b23b3b} .attraction-tray{ height:92px;position:relative;border:1px dashed var(--border);border-radius:8px; margin:10px 0;background:#fffdf5;touch-action:none;user-select:none } .attraction-sq{ position:absolute;width:52px;height:52px;border:2px solid #9a6b00;border-radius:8px; background:#fff3c4;cursor:grab;touch-action:none;display:flex;align-items:center; justify-content:center;font-size:28px } .experience-count{font-size:12px;color:var(--muted);margin-left:4px} .attraction-task .task-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.attraction-bonus-note{margin:10px 0;padding:10px;border:1px solid #d7b653;border-radius:8px;background:#fff8d7;line-height:1.35}.trivia-difficulty-grid{display:grid;grid-template-columns:auto repeat(3,1fr);gap:6px;align-items:center;margin:10px 0 16px}.trivia-difficulty-grid .th{font-weight:700;font-size:12px;text-align:center;color:var(--muted)}.trivia-difficulty-grid select{width:100%;padding:7px;border:1px solid var(--border);border-radius:6px;background:white}.difficulty-chip{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:999px;background:#eef3ea;color:#45613d;font-size:12px;font-weight:700}.attraction-choice-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.attraction-choice{display:flex;align-items:center;gap:10px;text-align:left;padding:10px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer}.attraction-choice:hover{background:#f3f7f1}.attraction-choice .icon{font-size:26px;line-height:1}.attraction-choice .name{font-weight:700}.attraction-choice .category{font-size:12px;color:var(--muted)} .multiplayer-bar{ display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center; border:1px solid var(--border);border-radius:9px;padding:8px 10px;margin:8px 0;background:#fff } .multiplayer-bar strong{white-space:nowrap} .multiplayer-status{font-size:13px;color:var(--muted);min-width:0} .room-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .room-controls input{ width:96px;padding:8px;border:1px solid var(--border);border-radius:7px; text-transform:uppercase;font-weight:700;letter-spacing:1px } .room-code{ display:none;grid-column:1/-1;justify-self:start;max-width:100%;box-sizing:border-box;padding:6px 9px;border-radius:7px;background:#f4f4f4;border:1px solid var(--border); font-size:13px;font-weight:800;letter-spacing:.7px;white-space:normal;overflow-wrap:anywhere } .room-code.show{display:inline-block} .waiting-turn{opacity:.58} #sidePanel{ transition:background .18s ease,border-color .18s ease,box-shadow .18s ease; border-radius:12px; padding:10px; } #sidePanel.your-turn{ background:#dff3df; box-shadow:inset 0 0 0 3px #2f8f46,0 0 0 2px rgba(47,143,70,.12); } #sidePanel.your-turn .banner{ box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 0 6px #2f8f46; } .attraction-picker-overlay{position:fixed;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(28,34,30,.48);padding:14px}.attraction-picker-overlay.hidden{display:none}.attraction-picker-modal{width:min(900px,calc(100% - 24px));max-height:calc(100% - 28px);overflow:auto;background:#fff;border:2px solid #6d8c62;border-radius:14px;box-shadow:0 18px 55px rgba(0,0,0,.28);padding:16px}.attraction-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.attraction-picker-head h2{margin:3px 0 8px}.attraction-picker-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px}.attraction-picker-card{display:grid;grid-template-columns:46px 1fr;gap:10px;align-items:center;text-align:left;padding:12px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;min-height:76px}.attraction-picker-card:hover{background:#f3f7f1;border-color:#6d8c62}.attraction-picker-card .icon{font-size:32px;text-align:center}.attraction-picker-card .name{font-weight:800;font-size:16px}.attraction-picker-card .category{font-size:12px;color:var(--muted);margin-top:2px}.attraction-picker-card .task{font-size:12px;color:#4b514c;margin-top:4px;line-height:1.25} /* V1.27 dynamic road appearance */ .cell.road{ background:#202224; border-color:#383b3e; position:relative; overflow:hidden; } .cell.road svg.road-marking{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; } .cell.road > *:not(svg.road-marking):not(.feature-layer):not(.traveler):not(.landscape-fill){position:relative;z-index:2} .cell.road{color:#fff} .road-yellow{ stroke:#d3ad58; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; fill:none; } .road-yellow.dashed{ stroke-dasharray:11 8; } /* V1.32a: larger Change Dot Rule panel without covering the map */ .overlay.stop-docked.dot-rule-mode .modal{ max-height:calc(100vh - 20px); overflow:hidden; display:flex; flex-direction:column; } .overlay.stop-docked.dot-rule-mode #stopEventText{ flex:0 0 auto; } .overlay.stop-docked.dot-rule-mode #dotRulePanel{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; } .overlay.stop-docked.dot-rule-mode #dotColorChoices{ flex:0 0 auto; } .overlay.stop-docked.dot-rule-mode #dotRuleChoices{ min-height:0; overflow-y:auto; padding-right:4px; padding-bottom:4px; } .overlay.stop-docked.dot-rule-mode #dotRuleChoices .dot-rule-choice{ min-height:44px; margin-bottom:8px; } .overlay.stop-docked.dot-rule-mode #continueStopEvent{ flex:0 0 auto; } /* V1.33: attraction hover labels */ .attraction-tag{ position:absolute; left:50%; bottom:calc(100% + 5px); transform:translateX(-50%); white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; padding:5px 8px; border-radius:6px; background:#202224; color:#fff; border:1px solid rgba(255,255,255,.7); font-size:12px; font-weight:800; line-height:1.1; opacity:0; visibility:hidden; z-index:40; pointer-events:none; } .cell:hover .attraction-tag, .cell:focus-visible .attraction-tag{ opacity:1; visibility:visible; } .cell:has(.attraction-fill){overflow:visible} /* V1.34: decorative topographic background layer, separate from game board/state */ .viewport{ position:relative; background:#f2f2f2; overflow:hidden; } .topo-background{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.25; /* 75% transparent */ background-color:#ececec; background-image: radial-gradient(ellipse at 18% 24%, transparent 0 42px, rgba(95,95,95,.34) 43px 44px, transparent 45px 58px, rgba(95,95,95,.28) 59px 60px, transparent 61px 78px, rgba(95,95,95,.22) 79px 80px, transparent 81px), radial-gradient(ellipse at 72% 20%, transparent 0 54px, rgba(105,105,105,.30) 55px 56px, transparent 57px 71px, rgba(105,105,105,.24) 72px 73px, transparent 74px 91px, rgba(105,105,105,.20) 92px 93px, transparent 94px), radial-gradient(ellipse at 40% 68%, transparent 0 66px, rgba(90,90,90,.28) 67px 68px, transparent 69px 88px, rgba(90,90,90,.23) 89px 90px, transparent 91px 112px, rgba(90,90,90,.18) 113px 114px, transparent 115px), radial-gradient(ellipse at 86% 76%, transparent 0 38px, rgba(110,110,110,.30) 39px 40px, transparent 41px 55px, rgba(110,110,110,.24) 56px 57px, transparent 58px 74px, rgba(110,110,110,.18) 75px 76px, transparent 77px), repeating-radial-gradient(ellipse at 8% 88%, transparent 0 22px, rgba(120,120,120,.16) 23px 24px, transparent 25px 37px); background-size: 520px 360px, 640px 420px, 760px 500px, 500px 360px, 420px 320px; background-position: 0 0, 120px 80px, -180px 170px, 220px -40px, 40px 120px; filter:blur(.15px); } .world{ position:relative; z-index:1; } /* V1.34a: let the topographic background show through the grid */ .board{ background:transparent !important; } .cell{ background:transparent !important; } .cell.road{ background:#3f4144 !important; } .cell.preview, .cell.hover-good, .cell.hover-bad, .cell.dest, .cell.attraction-preview, .cell.attraction-good, .cell.attraction-bad, .cell.landscape-preview, .cell.landscape-good, .cell.landscape-bad{ /* these states already use box-shadows/overlays; keep the base transparent */ } /* V1.34b: USGS-inspired shaded relief background with readable translucent grid */ .topo-background{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.72; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221200%22%20height%3D%22900%22%20viewBox%3D%220%200%201200%20900%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22soft%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%2218%22/%3E%0A%20%20%20%20%3C/filter%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22paper%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23eef0ec%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23e4e6e1%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d9ddd7%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%22hill1%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23a9aea4%22%20stop-opacity%3D%22.75%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23c6cac1%22%20stop-opacity%3D%22.4%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23eef0ec%22%20stop-opacity%3D%220%22/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%22hill2%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23b6b9b1%22%20stop-opacity%3D%22.68%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23d1d4cd%22%20stop-opacity%3D%22.34%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23eef0ec%22%20stop-opacity%3D%220%22/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%22valley%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f4f5f2%22%20stop-opacity%3D%22.85%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23e7e9e4%22%20stop-opacity%3D%22.25%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e7e9e4%22%20stop-opacity%3D%220%22/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%3C/defs%3E%0A%0A%20%20%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url%28%23paper%29%22/%3E%0A%0A%20%20%3C%21--%20broad%20shaded%20relief%20--%3E%0A%20%20%3Cellipse%20cx%3D%22210%22%20cy%3D%22210%22%20rx%3D%22240%22%20ry%3D%22160%22%20fill%3D%22url%28%23hill1%29%22%20filter%3D%22url%28%23soft%29%22/%3E%0A%20%20%3Cellipse%20cx%3D%22510%22%20cy%3D%22330%22%20rx%3D%22270%22%20ry%3D%22185%22%20fill%3D%22url%28%23hill2%29%22%20filter%3D%22url%28%23soft%29%22/%3E%0A%20%20%3Cellipse%20cx%3D%22915%22%20cy%3D%22180%22%20rx%3D%22250%22%20ry%3D%22170%22%20fill%3D%22url%28%23hill1%29%22%20filter%3D%22url%28%23soft%29%22/%3E%0A%20%20%3Cellipse%20cx%3D%221030%22%20cy%3D%22610%22%20rx%3D%22300%22%20ry%3D%22210%22%20fill%3D%22url%28%23hill2%29%22%20filter%3D%22url%28%23soft%29%22/%3E%0A%20%20%3Cellipse%20cx%3D%22320%22%20cy%3D%22710%22%20rx%3D%22280%22%20ry%3D%22180%22%20fill%3D%22url%28%23hill1%29%22%20filter%3D%22url%28%23soft%29%22/%3E%0A%20%20%3Cellipse%20cx%3D%22720%22%20cy%3D%22660%22%20rx%3D%22235%22%20ry%3D%22150%22%20fill%3D%22url%28%23valley%29%22%20filter%3D%22url%28%23soft%29%22/%3E%0A%0A%20%20%3C%21--%20faint%20drainage/valley%20strokes%20--%3E%0A%20%20%3Cpath%20d%3D%22M-40%20570%20C180%20510%20230%20625%20430%20560%20S760%20470%201240%20535%22%20fill%3D%22none%22%20stroke%3D%22%239aa7aa%22%20stroke-opacity%3D%22.26%22%20stroke-width%3D%223%22/%3E%0A%20%20%3Cpath%20d%3D%22M130%2080%20C250%20220%20300%20240%20380%20420%20S480%20610%20580%20900%22%20fill%3D%22none%22%20stroke%3D%22%239aa7aa%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%222%22/%3E%0A%20%20%3Cpath%20d%3D%22M880%20-30%20C825%20180%20920%20280%20825%20430%20S720%20700%20760%20930%22%20fill%3D%22none%22%20stroke%3D%22%239aa7aa%22%20stroke-opacity%3D%22.15%22%20stroke-width%3D%222%22/%3E%0A%0A%20%20%3C%21--%20contour%20families%20--%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23777c76%22%20stroke-opacity%3D%22.40%22%20stroke-width%3D%221.15%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M35%20165%20C80%2055%20245%2035%20335%20125%20C390%20180%20345%20285%20265%20310%20C170%20340%2055%20280%2035%20165Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M65%20175%20C110%2085%20235%2070%20300%20135%20C340%20178%20315%20255%20245%20275%20C170%20295%2090%20260%2065%20175Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M95%20185%20C130%20115%20225%20105%20270%20150%20C300%20180%20278%20230%20225%20245%20C165%20260%20115%20235%2095%20185Z%22/%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%22M345%20305%20C420%20200%20585%20210%20650%20335%20C705%20438%20615%20530%20500%20515%20C385%20498%20295%20402%20345%20305Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M380%20315%20C440%20235%20560%20245%20610%20340%20C650%20420%20585%20485%20500%20475%20C415%20465%20340%20392%20380%20315Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M420%20330%20C465%20270%20545%20280%20575%20345%20C605%20403%20555%20445%20500%20438%20C445%20430%20390%20382%20420%20330Z%22/%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%22M795%20115%20C865%2025%201015%2035%201085%20140%20C1145%20235%201080%20335%20960%20350%20C845%20365%20745%20270%20795%20115Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M825%20130%20C880%2060%20995%2070%201045%20145%20C1090%20215%201040%20295%20955%20305%20C870%20315%20785%20245%20825%20130Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M860%20145%20C900%2095%20980%20100%201015%20155%20C1045%20205%201010%20255%20950%20265%20C890%20275%20830%20225%20860%20145Z%22/%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%22M120%20675%20C190%20560%20365%20545%20455%20655%20C535%20755%20450%20860%20310%20865%20C175%20870%2065%20775%20120%20675Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M155%20690%20C215%20600%20350%20590%20420%20665%20C480%20735%20420%20815%20315%20820%20C215%20825%20105%20765%20155%20690Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M195%20700%20C245%20635%20340%20630%20390%20680%20C430%20725%20390%20780%20315%20785%20C245%20790%20155%20755%20195%20700Z%22/%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%22M815%20550%20C900%20445%201075%20460%201150%20585%20C1215%20695%201120%20815%20990%20820%20C860%20825%20745%20690%20815%20550Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M850%20565%20C920%20485%201045%20500%201100%20590%20C1145%20670%201080%20765%20990%20775%20C900%20785%20795%20680%20850%20565Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M890%20580%20C940%20525%201025%20535%201060%20600%20C1090%20660%201045%20720%20990%20730%20C930%20740%20850%20670%20890%20580Z%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20secondary%20fine%20contours%20--%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%238c908b%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%22.8%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20410%20C170%20355%20250%20445%20400%20410%20S700%20320%201200%20390%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20435%20C165%20385%20255%20470%20405%20438%20S705%20350%201200%20415%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20460%20C160%20415%20265%20495%20415%20465%20S710%20385%201200%20440%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20735%20C160%20685%20285%20725%20420%20700%20S690%20620%201200%20690%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20760%20C170%20715%20290%20755%20430%20730%20S700%20650%201200%20715%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E"); background-size:cover; background-position:center; background-repeat:no-repeat; } .board{ background:rgba(105,105,105,.34) !important; } .cell{ background:rgba(255,255,255,.34) !important; } .cell.road{ background:#3f4144 !important; } /* V1.35: muted satellite-style background, no contour rings */ .topo-background{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.74; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221400%22%20height%3D%221000%22%20viewBox%3D%220%200%201400%201000%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22terrain%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%0A%20%20%20%20%20%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.006%20.011%22%20numOctaves%3D%225%22%20seed%3D%2242%22%20result%3D%22n1%22/%3E%0A%20%20%20%20%20%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.022%20.018%22%20numOctaves%3D%223%22%20seed%3D%2217%22%20result%3D%22n2%22/%3E%0A%20%20%20%20%20%20%3CfeBlend%20in%3D%22n1%22%20in2%3D%22n2%22%20mode%3D%22multiply%22%20result%3D%22noise%22/%3E%0A%20%20%20%20%20%20%3CfeColorMatrix%20in%3D%22noise%22%20type%3D%22matrix%22%0A%20%20%20%20%20%20%20%20values%3D%22.42%200%200%200%20.18%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%20.46%200%200%20.20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%20.34%200%20.16%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%20.65%200%22%20result%3D%22colored%22/%3E%0A%20%20%20%20%20%20%3CfeDiffuseLighting%20in%3D%22n1%22%20surfaceScale%3D%227%22%20diffuseConstant%3D%22.65%22%20lighting-color%3D%22%23d9ddd3%22%20result%3D%22light%22%3E%0A%20%20%20%20%20%20%20%20%3CfeDistantLight%20azimuth%3D%22315%22%20elevation%3D%2242%22/%3E%0A%20%20%20%20%20%20%3C/feDiffuseLighting%3E%0A%20%20%20%20%20%20%3CfeBlend%20in%3D%22colored%22%20in2%3D%22light%22%20mode%3D%22multiply%22/%3E%0A%20%20%20%20%3C/filter%3E%0A%0A%20%20%20%20%3Cfilter%20id%3D%22soft%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2218%22/%3E%3C/filter%3E%0A%0A%20%20%20%20%3ClinearGradient%20id%3D%22base%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23a9ad9d%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%238f9787%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23b7b3a5%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%3C/defs%3E%0A%0A%20%20%3Crect%20width%3D%221400%22%20height%3D%221000%22%20fill%3D%22url%28%23base%29%22/%3E%0A%20%20%3Crect%20width%3D%221400%22%20height%3D%221000%22%20filter%3D%22url%28%23terrain%29%22%20opacity%3D%22.95%22/%3E%0A%0A%20%20%3C%21--%20broad%20natural%20landcover%20zones%20--%3E%0A%20%20%3Cg%20opacity%3D%22.28%22%20filter%3D%22url%28%23soft%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-80%2080%20C190%2015%20360%20110%20515%20250%20C645%20365%20655%20515%20505%20620%20C330%20745%20120%20650%20-40%20500%20Z%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22%235d6a54%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M780%20-70%20C1045%2015%201255%20120%201440%20300%20L1440%20690%20C1200%20665%201040%20560%20930%20420%20C840%20305%20765%20145%20780%20-70Z%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22%236e765f%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M530%20590%20C690%20515%20840%20560%20980%20720%20C1080%20835%201060%20970%20900%201060%20L300%201060%20C310%20885%20390%20690%20530%20590Z%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22%238f826d%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M90%20680%20C220%20610%20355%20645%20445%20745%20C505%20815%20470%20925%20350%20995%20L-40%20995%20L-40%20820Z%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22%2366755f%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20dry/open%20ground%20--%3E%0A%20%20%3Cg%20opacity%3D%22.20%22%20filter%3D%22url%28%23soft%29%22%3E%0A%20%20%20%20%3Cellipse%20cx%3D%22720%22%20cy%3D%22300%22%20rx%3D%22300%22%20ry%3D%22145%22%20fill%3D%22%23c3b89e%22/%3E%0A%20%20%20%20%3Cellipse%20cx%3D%221160%22%20cy%3D%22730%22%20rx%3D%22260%22%20ry%3D%22170%22%20fill%3D%22%23c7baa0%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20drainage%20network%20--%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-20%20715%20C155%20660%20245%20705%20355%20650%20C480%20590%20535%20500%20680%20505%20C840%20510%20920%20620%201070%20590%20C1210%20565%201275%20505%201420%20535%22%0A%20%20%20%20%20%20%20%20%20%20stroke%3D%22%2371898d%22%20stroke-opacity%3D%22.46%22%20stroke-width%3D%228%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M150%20110%20C220%20195%20255%20280%20310%20360%20C370%20450%20380%20545%20355%20650%22%0A%20%20%20%20%20%20%20%20%20%20stroke%3D%22%237f9292%22%20stroke-opacity%3D%22.30%22%20stroke-width%3D%224%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M760%2070%20C735%20170%20760%20245%20720%20330%20C690%20390%20655%20445%20680%20505%22%0A%20%20%20%20%20%20%20%20%20%20stroke%3D%22%237f9292%22%20stroke-opacity%3D%22.26%22%20stroke-width%3D%224%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1120%20170%20C1040%20260%201000%20330%201005%20410%20C1010%20485%201040%20535%201070%20590%22%0A%20%20%20%20%20%20%20%20%20%20stroke%3D%22%237f9292%22%20stroke-opacity%3D%22.27%22%20stroke-width%3D%224%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M545%20755%20C590%20690%20630%20630%20680%20505%22%0A%20%20%20%20%20%20%20%20%20%20stroke%3D%22%237f9292%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%223%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20subtle%20field/open-land%20geometry%2C%20intentionally%20irregular%20--%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23d6d2c5%22%20stroke-opacity%3D%22.12%22%20stroke-width%3D%222%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M820%20650%20L1010%20610%20L1080%20730%20L900%20790%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1035%20615%20L1200%20590%20L1290%20690%20L1110%20735%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M990%20790%20L1160%20748%20L1240%20870%20L1060%20900%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M455%20180%20L595%20145%20L635%20265%20L505%20305%20Z%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20faint%20haze%20to%20keep%20game%20readable%20--%3E%0A%20%20%3Crect%20width%3D%221400%22%20height%3D%221000%22%20fill%3D%22%23f0f1ed%22%20opacity%3D%22.18%22/%3E%0A%3C/svg%3E") !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; filter:saturate(.72) contrast(.92) brightness(1.08); } .board{ background:rgba(95,95,95,.38) !important; } .cell{ background:rgba(255,255,255,.30) !important; } .cell.road{ background:#3f4144 !important; } /* V1.35a: brighter, clearer aerial background */ .topo-background{ opacity:.92 !important; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221400%22%20height%3D%221000%22%20viewBox%3D%220%200%201400%201000%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22terrain%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%0A%20%20%20%20%20%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.0045%20.008%22%20numOctaves%3D%225%22%20seed%3D%2231%22%20result%3D%22large%22/%3E%0A%20%20%20%20%20%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.018%20.025%22%20numOctaves%3D%223%22%20seed%3D%2212%22%20result%3D%22fine%22/%3E%0A%20%20%20%20%20%20%3CfeBlend%20in%3D%22large%22%20in2%3D%22fine%22%20mode%3D%22soft-light%22%20result%3D%22noise%22/%3E%0A%20%20%20%20%20%20%3CfeColorMatrix%20in%3D%22noise%22%20type%3D%22matrix%22%0A%20%20%20%20%20%20%20%20values%3D%22.34%200%200%200%20.30%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%20.38%200%200%20.34%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%20.26%200%20.27%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%20.48%200%22%20result%3D%22colored%22/%3E%0A%20%20%20%20%20%20%3CfeDiffuseLighting%20in%3D%22large%22%20surfaceScale%3D%225%22%20diffuseConstant%3D%22.58%22%20lighting-color%3D%22%23f7f5ec%22%20result%3D%22light%22%3E%0A%20%20%20%20%20%20%20%20%3CfeDistantLight%20azimuth%3D%22320%22%20elevation%3D%2248%22/%3E%0A%20%20%20%20%20%20%3C/feDiffuseLighting%3E%0A%20%20%20%20%20%20%3CfeBlend%20in%3D%22colored%22%20in2%3D%22light%22%20mode%3D%22screen%22/%3E%0A%20%20%20%20%3C/filter%3E%0A%0A%20%20%20%20%3Cfilter%20id%3D%22blur12%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2212%22/%3E%3C/filter%3E%0A%20%20%20%20%3Cfilter%20id%3D%22blur24%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2224%22/%3E%3C/filter%3E%0A%0A%20%20%20%20%3ClinearGradient%20id%3D%22base%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23d9dfd2%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23cad5c1%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dfd8c8%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%3C/defs%3E%0A%0A%20%20%3Crect%20width%3D%221400%22%20height%3D%221000%22%20fill%3D%22url%28%23base%29%22/%3E%0A%20%20%3Crect%20width%3D%221400%22%20height%3D%221000%22%20filter%3D%22url%28%23terrain%29%22%20opacity%3D%22.78%22/%3E%0A%0A%20%20%3C%21--%20vegetation%20masses%20--%3E%0A%20%20%3Cg%20opacity%3D%22.34%22%20filter%3D%22url%28%23blur24%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-80%20110%20C135%2010%20330%2060%20500%20220%20C640%20350%20620%20520%20450%20610%20C280%20700%2080%20640%20-40%20500%20Z%22%20fill%3D%22%236f8b63%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M850%20-80%20C1090%200%201280%20120%201440%20275%20L1440%20650%20C1230%20635%201070%20545%20965%20400%20C865%20260%20820%2090%20850%20-80Z%22%20fill%3D%22%2378916d%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M80%20720%20C230%20620%20390%20650%20505%20790%20C560%20865%20520%20960%20405%201020%20L-30%201020%20L-30%20860Z%22%20fill%3D%22%235f7d5a%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20open%20/%20dry%20ground%20--%3E%0A%20%20%3Cg%20opacity%3D%22.30%22%20filter%3D%22url%28%23blur24%29%22%3E%0A%20%20%20%20%3Cellipse%20cx%3D%22695%22%20cy%3D%22280%22%20rx%3D%22320%22%20ry%3D%22170%22%20fill%3D%22%23d6c9a5%22/%3E%0A%20%20%20%20%3Cellipse%20cx%3D%221120%22%20cy%3D%22760%22%20rx%3D%22300%22%20ry%3D%22190%22%20fill%3D%22%23d7c49d%22/%3E%0A%20%20%20%20%3Cellipse%20cx%3D%22575%22%20cy%3D%22680%22%20rx%3D%22220%22%20ry%3D%22145%22%20fill%3D%22%23cbbd97%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20darker%20ridges%20/%20folds%20--%3E%0A%20%20%3Cg%20opacity%3D%22.20%22%20filter%3D%22url%28%23blur12%29%22%20fill%3D%22%23586657%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M170%20120%20C280%20220%20350%20280%20390%20405%20C415%20480%20390%20575%20315%20640%20C250%20695%20170%20705%20110%20650%20C190%20550%20215%20455%20185%20340%20C160%20250%20120%20190%20170%20120Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M930%20120%20C1045%20230%201085%20355%201040%20470%20C1010%20545%20955%20605%20890%20635%20C850%20555%20835%20470%20855%20375%20C875%20280%20895%20200%20930%20120Z%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20clearer%20drainage%20and%20water%20--%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-30%20715%20C145%20655%20260%20720%20365%20655%20C485%20580%20565%20500%20690%20505%20C850%20512%20925%20625%201090%20590%20C1220%20562%201300%20500%201430%20535%22%0A%20%20%20%20%20%20%20%20%20%20stroke%3D%22%236f98a2%22%20stroke-opacity%3D%22.62%22%20stroke-width%3D%229%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M150%20100%20C215%20180%20250%20280%20310%20360%20C360%20430%20390%20545%20365%20655%22%0A%20%20%20%20%20%20%20%20%20%20stroke%3D%22%237ea4aa%22%20stroke-opacity%3D%22.42%22%20stroke-width%3D%224%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M760%2045%20C735%20160%20765%20255%20720%20345%20C690%20410%20670%20455%20690%20505%22%0A%20%20%20%20%20%20%20%20%20%20stroke%3D%22%237ea4aa%22%20stroke-opacity%3D%22.40%22%20stroke-width%3D%224%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1125%20160%20C1050%20250%201000%20330%201008%20420%20C1015%20495%201050%20545%201090%20590%22%0A%20%20%20%20%20%20%20%20%20%20stroke%3D%22%237ea4aa%22%20stroke-opacity%3D%22.38%22%20stroke-width%3D%224%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20sparse%20agricultural/open%20land%20boundaries%20--%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23f2ecd9%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%222%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M820%20650%20L1015%20610%20L1090%20730%20L900%20790%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1040%20615%20L1205%20590%20L1295%20690%20L1115%20735%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M990%20790%20L1165%20748%20L1245%20870%20L1065%20900%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M460%20180%20L600%20145%20L640%20265%20L510%20305%20Z%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20light%20atmospheric%20wash%20--%3E%0A%20%20%3Crect%20width%3D%221400%22%20height%3D%221000%22%20fill%3D%22%23faf9f3%22%20opacity%3D%22.22%22/%3E%0A%3C/svg%3E") !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; filter:saturate(.82) contrast(1.08) brightness(1.16) !important; } .viewport{ background:#f7f7f3 !important; } .board{ background:rgba(110,110,110,.28) !important; } .cell{ background:rgba(255,255,255,.44) !important; } .cell.road{ background:#5f625e !important; } /* V1.35b: terrain is locked to the panning game grid */ .world{ position:absolute; left:0; top:0; width:1112px; height:890px; will-change:transform; } .world .topo-background{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; z-index:0 !important; pointer-events:none; } .world .board{ position:relative; z-index:1; } /* V1.35c: slightly greener, still bright aerial background */ .topo-background{ filter:saturate(.95) contrast(1.07) brightness(1.16) hue-rotate(-8deg) !important; } .viewport{ background:#f6f8f2 !important; } .cell.landscape-removable{ cursor:pointer !important; box-shadow:inset 0 0 0 3px #2f7d32 !important; } .cell.landscape-removable:hover{ box-shadow:inset 0 0 0 4px #1f6a27 !important; } .play-context-grid{display:grid;gap:8px;margin:10px 0 8px} .context-setting{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 11px;border:1px solid var(--border);border-radius:8px;background:#fff} .context-setting span{display:grid;gap:3px}.context-setting small{color:var(--muted);font-weight:400;line-height:1.25} .context-setting input{width:20px;height:20px;flex:0 0 auto}.context-summary{padding:8px 10px;background:#f5f7f2;border-radius:7px} .stop-setting.context-disabled{opacity:.45}.dot-rule-choice.context-disabled{display:none!important} /* V1.36b: Settings stays visible at the top and uses the available screen width. */ #settingsOverlay{ position:fixed !important; inset:0 !important; align-items:flex-start !important; justify-content:center !important; overflow-y:auto !important; padding:18px 22px !important; z-index:950000 !important; } #settingsOverlay .modal{ width:min(780px,calc(100vw - 44px)) !important; max-height:calc(100vh - 36px) !important; overflow-y:auto !important; margin:0 auto !important; padding:20px 24px !important; } #settingsOverlay .stop-settings-list{ max-height:240px !important; } @media(max-width:700px){ #settingsOverlay{padding:10px !important} #settingsOverlay .modal{width:calc(100vw - 20px) !important;max-height:calc(100vh - 20px) !important;padding:16px !important} } .dot-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0} .dot-settings-grid label{display:grid;gap:7px;padding:10px;border:1px solid var(--border);border-radius:8px;background:#fff} .dot-settings-grid select{width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;background:#fff} .dot-setting-label{display:flex;align-items:center;gap:6px} .settings-submenu-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px} .settings-submenu-button{font-weight:700} .settings-subpanel{margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:10px;background:#f8f9f6} .settings-subpanel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px} .settings-subpanel-head h3{margin:0} @media(max-width:700px){.dot-settings-grid{grid-template-columns:1fr}.settings-submenu-row{grid-template-columns:1fr}} .player-roster{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .player-chip{display:flex;gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:13px} .player-chip.away{opacity:.55} .player-chip .swatch{width:11px;height:11px;border-radius:50%;border:1px solid #222} .multiplayer-actions{display:flex;gap:8px;flex-wrap:wrap} #turnTimer{font-size:13px;font-weight:700;margin:-2px 0 8px;color:#444;text-align:center} .hitchhiker-list{display:grid;gap:8px;margin-top:12px} .hitchhiker-list button{text-align:left;padding:11px;border:1px solid var(--border);border-radius:8px;background:#fff} .timeout-setting{display:grid;grid-template-columns:1fr 120px;gap:12px;align-items:center;margin-top:10px} .timeout-setting input{width:100%;padding:8px;border:1px solid var(--border);border-radius:6px} .opponent-select{width:100%;padding:9px;border:1px solid var(--border);border-radius:7px;margin:8px 0 12px;background:#fff} @media(max-width:700px){.timeout-setting{grid-template-columns:1fr}} .room-controls #playerName{min-width:150px}\n .cell.road{overflow:visible} .dot-legend{ padding:9px 12px; gap:16px; font-size:14px; min-height:38px; } .dot-legend > span{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .dot-legend .ld{ width:16px; height:16px; border-radius:50%; flex:0 0 16px; box-shadow:0 0 0 1px rgba(0,0,0,.3); } /* V1.43: fixed below-map information order, one line per section */ .dot-legend{ display:flex; flex-wrap:nowrap; align-items:center; overflow-x:auto; white-space:nowrap; } .compact-bank .player-roster{ flex-wrap:nowrap!important; white-space:nowrap; } .turn-order-track{ flex-wrap:nowrap; white-space:nowrap; } /* V1.44: keep the turn countdown directly above End Turn */ #turnTimer{ margin:8px 0 5px; } /* V1.45: active-turn halo must sit above every map-layer visual */ .traveler{ z-index:200!important; overflow:visible!important; } .traveler.active-turn{ z-index:1000!important; } .traveler.active-turn::before{ z-index:1001!important; } .cell, .cell.road, .landscape, .attraction, .map-feature{ position:relative; } .landscape, .attraction, .map-feature{ z-index:20; } .cell.road{ z-index:10; overflow:visible!important; } /* V1.46: identify the correct Charades/Pictionary guesser */ .guesser-picker{ margin-top:10px; padding:10px; border:1px solid #bbb; border-radius:10px; background:#fffdf0; } .guesser-choices{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; } .guesser-choices button{ flex:1 1 120px; } /* V1.47 Catch Phrase */ .catch-phrase-card{margin:12px 0;padding:18px 14px;border:2px solid #222;border-radius:12px;text-align:center;background:#fff} .catch-phrase-label{font-size:11px;letter-spacing:.12em;color:#666;margin-bottom:5px} .catch-phrase-word{font-size:30px;font-weight:900;line-height:1.1} .catch-phrase-history-wrap{margin-top:12px;padding:9px;border:1px solid #ccc;border-radius:8px;background:#fafafa} .catch-phrase-history{margin-top:6px;line-height:1.35} .catch-phrase-score-rows{display:grid;gap:7px;margin-top:10px} .catch-phrase-score-row{display:grid;grid-template-columns:minmax(120px,1fr) 90px;gap:8px;align-items:center} .catch-phrase-score-row input{width:100%} /* V1.49: the active player's whole cell is the top board stacking context. This lets the car halo escape above neighboring road/landscape cells. */ .cell.active-player-cell{ z-index:100000!important; overflow:visible!important; } .cell.active-player-cell .traveler{ z-index:100001!important; } .cell.active-player-cell .traveler.active-turn::before{ z-index:100002!important; } /* V1.49: Catch Phrase uses a large centered panel over the map instead of the side rail. */ .overlay.stop-docked.catch-phrase-mode{ z-index:200000!important; pointer-events:none; } .overlay.stop-docked.catch-phrase-mode .modal{ width:100%!important; max-width:none!important; max-height:calc(100vh - 16px)!important; overflow:auto!important; pointer-events:auto; } .overlay.stop-docked.catch-phrase-mode #catchPhrasePanel{ display:block; } .overlay.stop-docked.catch-phrase-mode .catch-phrase-word{ font-size:42px; } .overlay.stop-docked.catch-phrase-mode .catch-phrase-history-wrap{ max-height:150px; overflow:auto; } /* V1.53: unified road visual language */ .cell.road{ background:#5f625e !important; box-shadow: inset 0 0 0 1px rgba(35,38,35,.58), inset 0 0 8px rgba(255,255,255,.035) !important; } .road-yellow{ stroke:#d3ad58 !important; opacity:.88; } .feature-layer .road-dot, .feature-layer .stop-sign{ filter:saturate(.72) contrast(.96) brightness(.98); opacity:.94; box-shadow: inset 0 0 0 2px rgba(241,239,230,.72), 0 0 0 1px rgba(31,34,31,.52) !important; } .feature-layer .road-dot.dot-blue, .tray-dot.dot-blue{background:#557a9b !important} .feature-layer .road-dot.dot-green, .tray-dot.dot-green{background:#5f846f !important} .feature-layer .road-dot.dot-orange, .tray-dot.dot-orange{background:#aa7a50 !important} .feature-layer .stop-sign, .tray-stop{ background:#9f4e49 !important; color:#f6f3e9 !important; } .tray-dot, .tray-stop{ filter:saturate(.72) contrast(.96) brightness(.98); } /* Keep active interaction states bright enough to read over the quieter road. */ .cell.preview, .cell.hover-good, .cell.dest{ filter:none !important; } /* V1.54: make the current decision points visually obvious without adding noise. */ .action-guide{ margin:8px 0 10px;padding:7px 9px;border:1px solid rgba(74,83,70,.28); border-radius:9px;background:rgba(255,255,255,.62);font-size:12px;line-height:1.25; display:flex;gap:7px;align-items:center;flex-wrap:wrap;color:#4f554e; } .action-guide strong{font-size:10px;letter-spacing:.08em} .action-guide span{font-weight:800} .action-ready{ outline:2px solid rgba(211,173,88,.88)!important; outline-offset:2px; box-shadow:0 0 0 4px rgba(211,173,88,.13)!important; } .turn-time-actions{display:flex;justify-content:center;margin:-2px 0 7px} #extendTurn{font-size:12px;padding:6px 10px} .landscape-actions{display:flex;gap:8px;margin:8px 0} .landscape-actions button{flex:1} /* V1.7.1: keep docked STOP/game menus fully usable as their contents expand. */ .overlay.stop-docked .modal{ max-height:calc(100dvh - 24px)!important; overflow-y:auto!important; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; } @supports not (height:100dvh){ .overlay.stop-docked .modal{max-height:calc(100vh - 24px)!important} } /* V1.55: every modal/game overlay must render above the active-cell halo/map. */ .overlay{ z-index:300000!important; } .overlay.stop-docked{ z-index:300000!important; } #rpsGame,#armWrestlingGame,#landscapeChoiceGame{ z-index:310000!important; } /* V1.59: expanded map + player-controlled zoom */ .map-zoom-controls{ position:absolute;top:10px;left:10px;z-index:100;display:flex;gap:5px; padding:5px;border:1px solid rgba(60,60,60,.35);border-radius:9px; background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.16); } .map-zoom-controls button{ min-width:34px;height:32px;padding:0 9px;border:1px solid #aaa;border-radius:6px; background:#fff;color:#222;font-weight:800;line-height:1; } .map-zoom-controls #zoomReset{min-width:54px;font-size:12px} .map-zoom-controls #zoomFit{min-width:66px;font-size:12px} /* V1.7.2: persistent turn clock directly below map zoom controls */ .map-turn-clock{ position:absolute;top:57px;left:10px;z-index:100;min-width:198px; padding:7px 9px 8px;border:1px solid rgba(60,60,60,.35);border-radius:9px; background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(0,0,0,.16); text-align:center;pointer-events:auto; } .map-turn-clock-label{font-size:10px;font-weight:900;letter-spacing:.09em;color:#666;margin-bottom:1px} .map-turn-clock #turnTimer{font-size:24px;font-weight:900;line-height:1.05;margin:0 0 6px;color:#333;font-variant-numeric:tabular-nums} .map-turn-clock .turn-time-actions{margin:0;display:flex;justify-content:center} .map-turn-clock #extendTurn{font-size:12px;padding:6px 10px;width:100%} @keyframes turnClockUrgentPulse{ 0%,100%{transform:scale(1);box-shadow:0 2px 8px rgba(0,0,0,.16)} 50%{transform:scale(1.035);box-shadow:0 0 0 4px rgba(190,35,35,.18),0 3px 12px rgba(130,0,0,.30)} } .map-turn-clock.urgent{ border-color:#b42323;background:rgba(255,238,238,.97); animation:turnClockUrgentPulse .8s ease-in-out infinite; } .map-turn-clock.urgent .map-turn-clock-label,.map-turn-clock.urgent #turnTimer{color:#b42323} .map-turn-clock.expired{border-color:#8f1111;background:#ffe3e3} /* V1.8.993 AIRPORTS */ .airport-marker{position:absolute;inset:1px;z-index:7;display:flex;align-items:center;justify-content:center;border-radius:7px;background:linear-gradient(145deg,#eef8ff,#8fc8ef);border:2px solid #2e6f9e;box-shadow:0 2px 4px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.9);font-size:21px;line-height:1;pointer-events:none} .airport-marker::before{content:'✈';transform:rotate(-12deg);filter:drop-shadow(0 1px 0 white)} .airport-marker .airport-num{position:absolute;right:1px;bottom:0px;min-width:12px;height:12px;padding:0 2px;border-radius:6px;background:#183e5b;color:white;font:700 8px/12px Arial;text-align:center} .airport-marker .airport-name{position:absolute;left:50%;top:100%;transform:translate(-50%,2px);max-width:92px;padding:1px 4px;border-radius:4px;background:rgba(255,255,255,.92);border:1px solid #2e6f9e;color:#183e5b;font:700 8px/11px Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 2px rgba(0,0,0,.18);pointer-events:none} .airport-help{font-size:14px;line-height:1.35;margin:8px 0 12px;font-weight:700} .airport-tray{display:flex;justify-content:center;align-items:center;gap:12px;min-height:105px} .airport-piece,.airport-drag-ghost{width:58px;height:58px;border-radius:12px;background:linear-gradient(145deg,#eef8ff,#8fc8ef);border:3px solid #2e6f9e;box-shadow:0 4px 10px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;font-size:34px;cursor:grab;user-select:none;touch-action:none} .airport-piece:active{cursor:grabbing}.airport-piece.placed{opacity:.35;cursor:default} .airport-drag-ghost{position:fixed;z-index:99999;pointer-events:none;transform:translate(-50%,-50%);cursor:grabbing} .airport-good{outline:4px solid #58c7ff!important;outline-offset:-4px}.airport-bad{outline:4px solid #d45b5b!important;outline-offset:-4px} .airport-destination-buttons{display:grid;gap:8px;margin-top:12px}.airport-destination-buttons button{padding:11px;border-radius:8px;border:1px solid var(--border);background:white;font-weight:800} .toll-booth-marker{ position:absolute; left:50%;top:50%; width:56px;height:56px; transform:translate(-50%,-58%); display:flex;align-items:center;justify-content:center; z-index:8; pointer-events:auto; } .toll-eligible{outline:3px solid #ffd54a!important;outline-offset:-3px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)} .toll-booth-help{font-size:14px;line-height:1.35;margin:8px 0 12px;font-weight:700} .toll-booth-tray{display:flex;justify-content:center;align-items:center;min-height:100px} .toll-booth-piece{ width:88px;height:88px;border:2px solid #333;border-radius:14px;background:#fff; display:flex;align-items:center;justify-content:center;font-size:42px; box-shadow:0 4px 12px rgba(0,0,0,.2);cursor:grab;touch-action:none;user-select:none } .toll-booth-piece:active{cursor:grabbing} .toll-drag-ghost{ position:fixed;z-index:99999;width:64px;height:64px;border:2px solid #333;border-radius:12px; background:#fff;display:flex;align-items:center;justify-content:center;font-size:38px; pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 6px 18px rgba(0,0,0,.3) } .toll-drop-good{outline:4px solid #ffd54a!important;outline-offset:-4px} .toll-booth-piece img{width:100%;height:100%;object-fit:contain;pointer-events:none} .toll-drag-ghost img{width:100%;height:100%;object-fit:contain;pointer-events:none} .toll-booth-marker img{width:100%;height:100%;object-fit:contain;pointer-events:none} .toll-booth-marker::after{ content:attr(data-owner); position:absolute; left:50%; bottom:100%; transform:translate(-50%,-8px); white-space:nowrap; background:rgba(20,20,20,.94); color:white; border-radius:7px; padding:5px 8px; font-size:11px; font-weight:800; line-height:1.15; opacity:0; visibility:hidden; pointer-events:none; z-index:30; box-shadow:0 2px 7px rgba(0,0,0,.28); } .toll-booth-marker:hover::after{ opacity:1; visibility:visible; } /* V1.8.73: keep the STOP/Toll Booth popup above mountains and other board art. */ #stopEvent{ z-index:500000 !important; } #stopEvent .modal{ position:relative; z-index:500001 !important; } /* V1.8.74 Cities */ .city-help{font-size:13px;line-height:1.35;padding:9px 10px;border:1px solid #a8b7c7;border-radius:8px;background:#f3f8fc;margin:8px 0} .city-tray{height:132px;position:relative;border:1px dashed var(--border);border-radius:8px;margin:10px 0;background:#eef5f8;touch-action:none;user-select:none} .city-piece,.city-drag-ghost,.city-fill{ width:84px;height:84px;position:absolute;border-radius:9px; background:linear-gradient(145deg,#727b83,#3f474e); border:2px solid #26313a;box-shadow:0 4px 8px rgba(0,0,0,.35); overflow:visible;pointer-events:none; } .city-piece{left:50%;top:12px;transform:translateX(-50%);cursor:grab;pointer-events:auto;touch-action:none} .city-piece .b,.city-drag-ghost .b,.city-fill .b{ position:absolute;bottom:9px;width:17px;border:1px solid #26313a; background:linear-gradient(90deg,#5f7384 0 24%,#b9d3df 25% 37%,#607887 38% 61%,#b9d3df 62% 74%,#526776 75%); box-shadow:3px 3px 3px rgba(0,0,0,.28); } .city-piece .b:before,.city-drag-ghost .b:before,.city-fill .b:before{ content:"";position:absolute;left:-2px;right:-2px;top:-5px;height:6px;background:#384650;border:1px solid #202b32;transform:skewX(-20deg) } .city-piece .b1,.city-drag-ghost .b1,.city-fill .b1{left:8px;height:37px} .city-piece .b2,.city-drag-ghost .b2,.city-fill .b2{left:27px;height:53px} .city-piece .b3,.city-drag-ghost .b3,.city-fill .b3{left:47px;height:43px} .city-piece .b4,.city-drag-ghost .b4,.city-fill .b4{left:22px;height:29px;width:14px;z-index:3;background:linear-gradient(90deg,#7c6d5d,#d4bd96,#66594d)} .city-tray-name{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-weight:800;font-size:12px;color:#24313a} .city-drag-ghost{position:fixed;z-index:600000;transform:translate(-50%,-50%);pointer-events:none;opacity:.9} .city-fill{left:0;top:0;width:73px;height:73px;z-index:12;transform:translate(-1px,-1px)} .city-name-tag{ position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%); white-space:nowrap;padding:4px 7px;border-radius:6px;background:#202224;color:#fff; font-size:11px;font-weight:800;opacity:0;visibility:hidden;z-index:50;pointer-events:none } .cell:hover .city-name-tag,.cell:focus-visible .city-name-tag{opacity:1;visibility:visible} .cell.city-zone{box-shadow:inset 0 0 0 1px rgba(46,154,184,.18)} .cell.city-preview{background:rgba(78,188,216,.16)!important;box-shadow:inset 0 0 0 3px #2999b7!important} .cell.city-good{background:rgba(92,194,120,.18)!important;box-shadow:inset 0 0 0 3px #3f8b46!important} .cell.city-bad{background:rgba(200,70,70,.16)!important;box-shadow:inset 0 0 0 3px #b23b3b!important} /* V1.8.75 city placement preview */ .city-fill{width:73px!important;height:73px!important} .cell.city-zone-good{ background:rgba(75,185,103,.22)!important; box-shadow:inset 0 0 0 2px rgba(46,137,66,.78)!important; } .cell.city-zone-bad{ background:rgba(207,69,69,.22)!important; box-shadow:inset 0 0 0 2px rgba(173,45,45,.80)!important; } .cell.city-footprint-good{ background:rgba(62,201,97,.34)!important; box-shadow:inset 0 0 0 4px #25883c!important; } .cell.city-footprint-bad{ background:rgba(227,66,66,.34)!important; box-shadow:inset 0 0 0 4px #a92323!important; } .city-piece img,.city-drag-ghost img,.city-fill img{ width:100%;height:100%;object-fit:contain;display:block;pointer-events:none; } /* V1.8.77: keep the attraction visibly attached to the cursor/preview cell. */ .attraction-placement-icon{ position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); z-index:24; min-width:25px;height:25px; display:flex;align-items:center;justify-content:center; font-size:21px;line-height:1; background:rgba(255,255,255,.94); border:2px solid #3f4b54; border-radius:7px; box-shadow:0 2px 5px rgba(0,0,0,.35); pointer-events:none; } .cell.attraction-good .attraction-placement-icon, .cell.attraction-preview .attraction-placement-icon{ border-color:#2f7e3b; } .cell.attraction-bad .attraction-placement-icon{ border-color:#a62c2c; opacity:.72; } /* Road-piece preview should look like solid road, not a transparent blue cell. */ .cell.preview{ background:#55595d !important; } .cell.preview::after{ content:""; position:absolute; inset:1px; border:3px solid var(--accent); border-radius:3px; z-index:22; pointer-events:none; } .cell.hover-good{ background:#62666a !important; } .cell.hover-bad{ background:rgba(115,50,50,.82) !important; } .cell.road-section-removable{cursor:pointer} .cell.road-section-protected{cursor:not-allowed} .cell.road-section-hover{ box-shadow:inset 0 0 0 4px #21a63a !important; filter:brightness(1.13); z-index:18; } .cell.road-section-hover-blocked{ box-shadow:inset 0 0 0 4px #c52f2f !important; filter:brightness(.88); z-index:18; } /* V1.8.9 landscape deck: 1x1 Mountains/Trees + unified 5-12 tile Lakes */ .landscape-fill,.landscape-sq{box-sizing:border-box;background-size:cover;background-position:center;background-repeat:no-repeat} .landscape-fill.terrain-mountain,.landscape-sq.terrain-mountain{background-image:url("../images/mountain-tile.png")!important} .landscape-fill.terrain-trees,.landscape-sq.terrain-trees{background-image:url("../images/tree-tile.png")!important} .landscape-fill.terrain-lake,.landscape-sq.terrain-lake{ background-image: radial-gradient(circle at 28% 24%,rgba(255,255,255,.34) 0 2%,transparent 3%), radial-gradient(circle at 68% 61%,rgba(255,255,255,.22) 0 2%,transparent 3%), linear-gradient(145deg,#55b9e7 0%,#2087c0 48%,#0e659f 100%)!important; background-size:31px 31px,37px 37px,cover!important; border-style:solid!important;border-color:#dfc79a!important;border-width:0!important; border-radius:0!important; box-shadow:inset 0 0 7px rgba(255,255,255,.16); } .landscape-fill.terrain-lake{inset:-1px!important;z-index:1!important;pointer-events:none} .landscape-sq.terrain-lake{width:27px;height:27px;border-color:#dfc79a!important} .terrain-lake.shore-n{border-top-width:5px!important} .terrain-lake.shore-e{border-right-width:5px!important} .terrain-lake.shore-s{border-bottom-width:5px!important} .terrain-lake.shore-w{border-left-width:5px!important} .terrain-lake.shore-n.shore-w{border-top-left-radius:8px!important} .terrain-lake.shore-n.shore-e{border-top-right-radius:8px!important} .terrain-lake.shore-s.shore-w{border-bottom-left-radius:8px!important} .terrain-lake.shore-s.shore-e{border-bottom-right-radius:8px!important} .cell.landscape-preview .landscape-fill,.cell.landscape-good .landscape-fill,.cell.landscape-bad .landscape-fill{opacity:.76} /* V1.8.91 visual system: raised roads, deeper lakes, and local skins */ :root{--road-top:#303337;--road-low:#17191b;--road-edge:#0d0e10;--road-line:#e1bb63;--ui-accent:#2f6e4f;--ui-soft:#edf4ee} .cell.road{ background:linear-gradient(145deg,#3b3e42 0%,var(--road-top) 42%,var(--road-low) 100%)!important; border:1px solid #101214!important; box-shadow:inset 1px 1px 0 rgba(255,255,255,.14),inset -2px -2px 0 rgba(0,0,0,.32),0 3px 3px rgba(0,0,0,.34)!important; transform:translateY(-1px);z-index:4; } .cell.road:before{content:"";position:absolute;left:1px;right:1px;top:1px;height:4px;border-radius:2px;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);pointer-events:none;z-index:1} .cell.road:after{content:"";position:absolute;left:2px;right:2px;bottom:1px;height:3px;background:rgba(0,0,0,.26);filter:blur(.5px);pointer-events:none;z-index:1} .road-yellow{stroke:var(--road-line)!important;filter:drop-shadow(0 1px 0 rgba(0,0,0,.7)) drop-shadow(0 -1px 0 rgba(255,255,255,.08))} .landscape-fill.terrain-lake,.landscape-sq.terrain-lake{ background-image:radial-gradient(ellipse at 48% 18%,rgba(255,255,255,.40),transparent 22%),radial-gradient(ellipse at 72% 70%,rgba(0,40,90,.26),transparent 44%),repeating-linear-gradient(165deg,rgba(255,255,255,.10) 0 1px,transparent 1px 7px),linear-gradient(145deg,#61caef 0%,#218fc8 42%,#075a94 100%)!important; box-shadow:inset 0 2px 4px rgba(255,255,255,.26),inset 0 -5px 8px rgba(0,40,80,.28)!important; } .terrain-lake.shore-n{border-top-color:#e7d0a4!important;box-shadow:inset 0 5px 4px -3px rgba(245,231,190,.75),inset 0 -5px 8px rgba(0,40,80,.25)!important} .terrain-lake.shore-e{border-right-color:#d5b982!important}.terrain-lake.shore-s{border-bottom-color:#c7a96f!important}.terrain-lake.shore-w{border-left-color:#dfc491!important} .skin-choice-row{display:flex;gap:8px;flex-wrap:wrap}.skin-choice.active{outline:3px solid var(--ui-accent);background:var(--ui-soft)} body[data-skin="bloom"]{--bg:#f7eef4;--card:#fff9fc;--border:#d8b9ca;--muted:#826c79;--road-top:#66525f;--road-low:#382e35;--road-edge:#241d22;--road-line:#f3c76e;--ui-accent:#a84f7b;--ui-soft:#f7dfea;background:radial-gradient(circle at 15% 5%,#fff8fb 0,#f7eef4 42%,#eadce6 100%)!important} body[data-skin="bloom"] .top,body[data-skin="bloom"] aside,body[data-skin="bloom"] .modal,body[data-skin="bloom"] .card,body[data-skin="bloom"] .info{border-color:#d8b9ca!important;box-shadow:0 6px 18px rgba(112,63,89,.12)} body[data-skin="bloom"] button.primary{background:linear-gradient(#bd668f,#99456e)!important;border-color:#7d3658!important} body[data-skin="bloom"] button.secondary{background:#fff8fb!important;border-color:#d8b9ca!important;color:#583d4c!important} body[data-skin="bloom"] #sidePanel.your-turn{background:#f8e0ec!important;box-shadow:inset 0 0 0 3px #b95f8a,0 0 0 2px rgba(185,95,138,.12)!important} body[data-skin="midnight"]{--bg:#111820;--card:#1d2731;--border:#40515f;--muted:#a8b5c0;--road-top:#37424c;--road-low:#11171c;--road-edge:#050708;--road-line:#e8c35d;--ui-accent:#5ea7d6;--ui-soft:#20394a;background:#0f151c!important;color:#eaf2f7} body[data-skin="midnight"] .top,body[data-skin="midnight"] aside,body[data-skin="midnight"] .modal,body[data-skin="midnight"] .card,body[data-skin="midnight"] .info{background:#1d2731!important;color:#eaf2f7!important;border-color:#40515f!important} body[data-skin="midnight"] button.secondary{background:#273541!important;color:#eaf2f7!important;border-color:#526675!important} /* V1.8.994 first-arrival lobby. Kept independent of gameplay overlays so it cannot disturb turn state. */ .welcome-overlay{position:fixed;inset:0;z-index:1000;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box} .welcome-overlay.hidden{display:none} .welcome-card{width:min(620px,100%);background:#fff;color:#1f2933;border:1px solid #d9e2ec;border-radius:20px;padding:24px;box-shadow:0 18px 45px rgba(31,41,51,.16);text-align:center} .welcome-card h2{margin:4px 0 8px;font-size:30px}.welcome-card p{margin:0 0 18px;color:#52606d;font-size:16px;line-height:1.45}.welcome-art{display:block;width:min(480px,92%);max-height:235px;object-fit:contain;margin:0 auto 8px} .welcome-main-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.welcome-main-actions button{min-height:58px;font-size:18px;font-weight:800} .welcome-form{margin-top:16px;text-align:left}.welcome-form label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;margin:10px 0 5px;color:var(--muted)} .welcome-form input{width:100%;box-sizing:border-box;padding:12px 13px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:inherit;font-size:17px} .welcome-form-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:14px}.welcome-note{min-height:20px;margin-top:10px!important;font-size:13px!important} @media(max-width:560px){.welcome-main-actions{grid-template-columns:1fr}.welcome-card{padding:20px}.welcome-card h2{font-size:26px}} /* V1.9.1: the landing page is a true lobby; map HUD stays out of sight until play begins. */ body.welcome-open .map-zoom-controls, body.welcome-open .map-turn-clock{visibility:hidden!important;pointer-events:none!important} .map-expand-overlay{position:fixed;inset:0;z-index:180;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;padding:18px} .map-expand-overlay.hidden{display:none} .map-expand-card{width:min(430px,100%);background:#fff;border-radius:14px;padding:20px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.22)} .map-expand-card h2{margin:0 0 8px}.map-expand-card p{margin:0 0 15px;color:var(--muted);line-height:1.4} .map-expand-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.map-expand-actions button{min-height:48px;font-weight:800} @media(max-width:520px){.map-expand-actions{grid-template-columns:1fr}} /* V1.8.97 movement highlight + dot-action continuation fixes; V1.8.94 continuous lake-image renderer remains intact. */ .board{position:relative!important} .lake-art-overlay{position:absolute;pointer-events:none;object-fit:fill;z-index:6;filter:drop-shadow(0 3px 2px rgba(0,0,0,.28));user-select:none;-webkit-user-drag:none} .lake-art-overlay.preview-art{opacity:.77;z-index:12} .landscape-lake-tray-art{position:absolute;pointer-events:none;object-fit:fill;filter:drop-shadow(0 3px 2px rgba(0,0,0,.24));z-index:1} .landscape-sq.lake-hit{background:transparent!important;border:0!important;box-shadow:none!important;z-index:3} /* V2.0.11 game objectives */ .rt-mode-builder{display:grid;gap:9px;margin:12px 0;padding:12px;background:rgba(110,136,161,.09);border:1px solid #8b9bae;border-radius:10px} .rt-mode-builder label{font-size:12px;font-weight:800;letter-spacing:.05em} .rt-mode-builder input,.rt-mode-builder select{width:100%;min-width:0;box-sizing:border-box;padding:9px;border-radius:6px} .rt-mode-builder .rt-inline{display:flex;align-items:center;gap:5px}.rt-mode-builder .rt-inline input{flex:1;width:40px}.rt-mode-builder small{opacity:.8} .rt-objective{margin:8px 0;padding:10px 15px;background:#202f3a;color:#fff;border-radius:9px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap} .rt-objective strong{font-size:14px}.rt-objective button{padding:7px 12px}.rt-objective.hidden{display:none} /* V2.0.11 welcome setup hotfix: keep all controls reachable at short viewport heights. */ .welcome-overlay{overflow-y:auto;overscroll-behavior:contain;align-items:safe center;} .welcome-card{box-sizing:border-box;max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;} .welcome-form-actions{position:sticky;bottom:0;z-index:2;background:#fff;padding:10px 0 6px;} @media (max-height:700px){.welcome-card{padding:14px 20px}.welcome-art{max-height:115px}.welcome-card h2{font-size:24px}.welcome-card p{margin-bottom:10px}.welcome-form{margin-top:8px}} @media (max-height:480px){.welcome-overlay{align-items:flex-start}.welcome-art{max-height:70px}.welcome-card{max-height:calc(100dvh - 16px)}} /* Destination locating — clear visual emphasis without generating any roads. */ .map-zoom-controls #rtFindDestination{min-width:125px;background:#fff3c4;border-color:#b9780f;color:#5e3600;font-size:12px} .cell.journey-destination{overflow:visible!important;isolation:isolate;z-index:9;outline:4px solid #ffc400;outline-offset:-2px;box-shadow:0 0 0 5px rgba(255,193,7,.45),0 0 22px 8px rgba(255,193,7,.65)} .cell.journey-destination:before{content:'🎯';position:absolute;top:-35px;left:50%;transform:translateX(-50%);font-size:24px;line-height:1;z-index:60;filter:drop-shadow(0 2px 2px black);pointer-events:none} .cell.journey-destination .attraction-tag{opacity:1;visibility:visible;background:#8b4700;border:2px solid #ffc400;z-index:70} .cell.destination-located{outline:4px solid #ff8900;outline-offset:0} @media(max-width:650px){.map-zoom-controls{flex-wrap:wrap;max-width:calc(100% - 20px)}.map-zoom-controls #rtFindDestination{min-width:100px}} /* Destination compass — stays visible while panning/zooming. */ .rt-destination-compass{position:absolute;right:12px;top:72px;z-index:35;width:190px;box-sizing:border-box;background:rgba(19,31,45,.94);color:#fff;border:2px solid #f6bf45;border-radius:14px;padding:10px 12px;box-shadow:0 5px 18px #0007;pointer-events:none} .rt-destination-compass.hidden{display:none!important} .rt-compass-heading{font-size:10px;font-weight:900;letter-spacing:1.5px;color:#ffd574} .rt-compass-middle{display:flex;align-items:center;gap:10px;margin:8px 0} .rt-compass-arrow{display:inline-block;flex:0 0 48px;text-align:center;font-size:45px;line-height:1;color:#ffce49;text-shadow:0 1px 5px #000;transform-origin:center;transition:transform .25s ease} .rt-compass-middle strong{display:block;font-size:13px;line-height:1.2;overflow-wrap:anywhere} .rt-compass-middle small{display:block;font-size:11px;color:#e8edf2;margin-top:5px} .rt-compass-note{font-size:10px;color:#bbc9d6} @media(max-width:650px){.rt-destination-compass{top:116px;right:7px;width:155px;padding:7px 9px}.rt-compass-arrow{flex-basis:35px;font-size:34px}.rt-compass-middle{gap:6px}.rt-compass-note{font-size:9px}}