* { box-sizing: border-box; margin: 0; padding: 0; } /* Theme variables — defaults are the "Classic" look. themes.js overrides these on (and provides the matching SVG board palette via svgPalette()). */ :root { --accent: #ff8a3d; --accent-dark: #ef6c00; --accent-light: #ffa94d; --ink: #4a3526; --on-accent: #fff; /* text on a filled accent button */ --on-surface: #ef6c00; /* text on white/surface buttons + subtitle */ --surface: #fff; /* buttons, pickers */ --card-bg: rgba(255, 255, 255, 0.7); --btn-shadow: #c75b00; /* 3D drop under the big buttons */ --board-shadow: rgba(180, 120, 60, 0.3); --shadow-accent: rgba(239, 108, 0, 0.25); /* cards / lang toggle */ --pick-selected-bg: #fff3e0; --chip-border: #ccc; --page-bg: linear-gradient(160deg, #fff3e0 0%, #ffe0b2 45%, #ffccbc 100%); --h1-shadow: 2px 2px 0 #fff, 4px 4px 0 rgba(239, 108, 0, 0.25); } html { height: 100%; } html, body { font-family: "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--page-bg); background-attachment: fixed; -webkit-tap-highlight-color: transparent; user-select: none; } body { display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100dvh; padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); } /* Center when it fits; top-align + scroll when taller than the viewport. */ .screen { margin: auto 0; width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .hidden { display: none !important; } #fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; } /* Themed environment decorations. z-index 40 = above the board, below confetti (50) and the language toggle (60); never blocks taps (pointer-events:none). Menu: foliage in the 4 screen corners. Game: border strips that hug OUTSIDE the board's top/bottom edges, so they frame without covering any cells. */ #decor { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; } #decor .d { position: absolute; font-size: clamp(44px, 13vw, 104px); line-height: 1; opacity: 0.92; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.18)); user-select: none; } /* menu: corner-foliage art in the 4 screen corners */ #decor .dimg { position: absolute; width: clamp(120px, 32vw, 240px); height: auto; opacity: 0.95; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18)); } /* game: horizontal border strips hugging the board's top/bottom (sized in JS) */ #decor .dframe { position: fixed; height: auto; opacity: 0.95; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18)); } .screen { position: relative; z-index: 1; } /* Live language toggle — fixed top-right, above everything, clear of controls. */ #langToggle { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 60; display: flex; gap: 2px; padding: 3px; border: 3px solid var(--accent); border-radius: 14px; background: var(--surface); box-shadow: 0 4px 0 var(--shadow-accent); } #langToggle button { font-family: inherit; font-size: 13px; font-weight: 800; padding: 5px 8px; border: none; border-radius: 11px; background: transparent; color: var(--on-surface); cursor: pointer; white-space: nowrap; } #langToggle button.active { background: var(--accent); color: var(--on-accent); } #langToggle button:active { transform: translateY(1px); } h1 { font-size: clamp(30px, 7.5vw, 48px); text-shadow: var(--h1-shadow); } .subtitle { font-size: clamp(15px, 4vw, 21px); color: var(--on-surface); font-weight: 600; } .card { width: 100%; background: var(--card-bg); border-radius: 20px; padding: 16px; box-shadow: 0 6px 0 var(--shadow-accent); text-align: center; } .card h2 { font-size: clamp(16px, 4.5vw, 20px); margin-bottom: 12px; } .segmented { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .segmented button { font-size: clamp(16px, 4.5vw, 20px); font-weight: 700; padding: 12px 18px; border: 3px solid var(--accent); border-radius: 14px; background: var(--surface); color: var(--on-surface); cursor: pointer; } .segmented button.selected { background: var(--accent); color: var(--on-accent); } .big-btn { font-size: clamp(22px, 6vw, 30px); font-weight: 800; color: var(--on-accent); background: linear-gradient(180deg, var(--accent-light), var(--accent-dark)); border: none; border-radius: 18px; padding: 16px 40px; cursor: pointer; box-shadow: 0 6px 0 var(--btn-shadow); } .big-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--btn-shadow); } .status { font-size: clamp(20px, 5.5vw, 28px); font-weight: 800; min-height: 36px; text-align: center; } /* Board size is set in JS layout() to fill the available area. */ #board { display: block; max-width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 0 var(--board-shadow), 0 12px 24px rgba(0, 0, 0, 0.15); touch-action: manipulation; } #game { width: 100%; max-width: 1900px; } #gameWrap { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; } #panel { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; } /* Landscape on a roomy screen: board on the left, a narrow fixed vertical control sidebar on the right with full-width stacked buttons. */ @media (min-width: 720px) and (orientation: landscape) { #gameWrap { flex-direction: row; justify-content: center; align-items: center; gap: 24px; } #panel { width: 180px; flex: 0 0 180px; } #panel .dice-row { flex-direction: column; gap: 10px; width: 100%; } #panel .dice { font-size: clamp(38px, 8vh, 56px); } #panel .roll-btn { width: 100%; min-width: 0; padding: 14px 8px; } #panel .controls { flex-direction: column; width: 100%; gap: 10px; } #panel .ctrl-btn { width: 100%; } } /* Multi-player legend: who is which color/animal. */ .legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .legend-chip { font-size: clamp(14px, 3.6vw, 17px); font-weight: 700; padding: 6px 10px; border-radius: 12px; border: 3px solid var(--chip-border); background: var(--surface); /* Player chips get a light per-player tint set inline (lightFor), so their text must stay dark in every theme — otherwise --ink (near-white in the space theme) is invisible on the pastel fill. */ color: #2b2b33; } /* Emoji token picker */ .emoji-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .emoji-btn { font-size: clamp(26px, 7vw, 36px); width: 54px; height: 54px; border: 3px solid transparent; border-radius: 14px; background: var(--surface); cursor: pointer; transition: transform 0.08s; } .emoji-btn:active { transform: scale(0.92); } .emoji-btn.selected { border-color: var(--accent); background: var(--pick-selected-bg); transform: scale(1.05); } /* Per-player character pickers */ .picker-row { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 6px 0 10px; } .picker-label { font-weight: 800; font-size: clamp(14px, 3.8vw, 17px); padding: 4px 14px; border-radius: 12px; border: 3px solid transparent; } /* Dice + roll */ .dice-row { display: flex; align-items: center; gap: 14px; } .dice { font-size: clamp(40px, 11vw, 56px); line-height: 1; width: 1.3em; text-align: center; cursor: pointer; transition: transform 0.08s; } .dice.rolling { animation: spin 0.2s linear infinite; } .dice.pop { animation: pop 0.32s ease; } @keyframes spin { 0% { transform: rotate(0deg) scale(1.2, 1.2); } 50% { transform: rotate(180deg) scale(1.05, 1.32); } 100% { transform: rotate(360deg) scale(1.2, 1.2); } } @keyframes pop { 0% { transform: scale(1.6) rotate(-12deg); } 40% { transform: scale(0.8) rotate(6deg); } 70% { transform: scale(1.12) rotate(-3deg); } 100% { transform: scale(1) rotate(0deg); } } /* End-game step comparison */ .summary { display: none; flex-direction: column; align-items: center; gap: 6px; } .summary-title { font-weight: 800; font-size: clamp(15px, 4vw, 18px); } .summary-chip { font-size: clamp(13px, 3.4vw, 16px); font-weight: 700; padding: 6px 12px; border-radius: 12px; border: 3px solid var(--chip-border); background: var(--surface); color: #2b2b33; /* light per-player tint set inline — keep text dark (see .legend-chip) */ } .roll-btn { font-size: clamp(18px, 5vw, 24px); font-weight: 800; color: var(--on-accent); background: linear-gradient(180deg, var(--accent-light), var(--accent-dark)); border: none; border-radius: 16px; padding: 14px 20px; cursor: pointer; box-shadow: 0 5px 0 var(--btn-shadow); /* Fixed width so the label changing ("掷骰子" ↔ "电脑掷骰子…") doesn't resize the button and reflow / shake the board. */ min-width: 9.5em; text-align: center; } .roll-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 3px 0 var(--btn-shadow); } .roll-btn:disabled { opacity: 0.5; cursor: default; box-shadow: 0 5px 0 #b0926f; } /* Roll + reroll stacked together; reroll appears only during the keep/reroll choice. */ .roll-col { display: flex; flex-direction: column; gap: 8px; } .roll-btn.keep { background: linear-gradient(180deg, #7ed957, #2e9e3a); box-shadow: 0 5px 0 #1f6e28; } .roll-btn.reroll { font-size: clamp(15px, 4vw, 19px); padding: 10px 16px; min-width: 9.5em; /* Fixed light (white→cream) fill, so the label needs a fixed dark color — --ink is near-white in the space theme and would vanish here. */ background: linear-gradient(180deg, #fff, #e9e2d6); color: #3a2f1a; box-shadow: 0 4px 0 var(--board-shadow); } /* Difficulty chip in the legend — its fill follows --card-bg (dark in the space theme), so it keeps the theme ink rather than the dark player-chip text. */ .legend-chip.diff { background: var(--card-bg); border-style: dashed; color: var(--ink); } /* ---- Fog of war (the hero visual) ------------------------------------- */ /* Two-tier fog over tiles beyond the receding front (hazard art hidden inline): THICK = never visited, near-opaque, reveals nothing. THIN = visited before, translucent, shows a "?" on a hazard (forgot what). */ #fogLayer .fog-thick { fill: rgba(140, 156, 188, 0.96); stroke: rgba(255, 255, 255, 0.12); stroke-width: 0.02; } #fogLayer .fog-thin { fill: rgba(150, 166, 196, 0.52); stroke: rgba(255, 255, 255, 0.35); stroke-width: 0.02; } #fogLayer .fog-mark { fill: #fff3c4; stroke: rgba(120, 70, 0, 0.55); stroke-width: 0.012; font-family: sans-serif; font-weight: 800; paint-order: stroke; } @keyframes fogIn { from { opacity: 0; } to { opacity: 1; } } #fogLayer .fog-new { animation: fogIn 0.5s ease-out both; } /* Space theme: darker, bluer fog suits the night sky. */ :root[data-theme="space"] #fogLayer .fog-thick { fill: rgba(18, 24, 52, 0.97); stroke: rgba(120,150,255,0.18); } :root[data-theme="space"] #fogLayer .fog-thin { fill: rgba(40, 52, 96, 0.55); stroke: rgba(120,150,255,0.3); } :root[data-theme="ocean"] #fogLayer .fog-thick { fill: rgba(70, 96, 140, 0.96); } :root[data-theme="ocean"] #fogLayer .fog-thin { fill: rgba(120, 150, 190, 0.52); } @media (prefers-reduced-motion: reduce) { #fogLayer .fog-new { animation: none; } } .controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .ctrl-btn { font-size: clamp(15px, 4vw, 18px); font-weight: 700; padding: 12px 16px; border: none; border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 var(--board-shadow); } .ctrl-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--board-shadow); }