:root { color-scheme: light; --ink:#17332c; --muted:#6a7d75; --paper:#f5f0dd; --green:#285f4c; --orange:#e76f3c; --line:rgba(23,51,44,.15); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 50% 0,#fff9dc 0,transparent 34%),linear-gradient(150deg,#dce8d2,#f4edd8 55%,#d9e4d4); }
button,input,select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }
.site-header { min-height:88px; padding:16px clamp(18px,4vw,56px); display:flex; justify-content:space-between; align-items:center; background:var(--green); color:white; box-shadow:0 5px 20px #17332c33; }
.site-header h1 { margin:0; letter-spacing:.06em; font-size:clamp(25px,4vw,43px); line-height:1; }
.site-header h1 span { color:#ffd45c; }
.eyebrow { margin:0 0 5px; font-size:11px; font-weight:800; letter-spacing:.23em; text-transform:uppercase; opacity:.75; }
.connection-pill { border:1px solid #ffffff55; border-radius:999px; padding:8px 13px; font-size:13px; background:#ffffff15; }
main { width:min(1500px,96vw); margin:24px auto 50px; }
.setup-shell { width:min(900px,100%); margin:8vh auto 0; display:grid; grid-template-columns:1.1fr .9fr; border-radius:25px; overflow:hidden; box-shadow:0 22px 60px #17332c2b; }
.intro-card,.setup-card { padding:clamp(28px,5vw,58px); }
.intro-card { color:white; background:linear-gradient(145deg,#1d4c3e,#387d5e); }
.intro-card h2 { font-size:clamp(28px,4vw,42px); line-height:1.12; margin:18px 0; }
.intro-card p { line-height:1.8; opacity:.85; }
.mountain-mark { font-size:95px; color:#ffd45c; line-height:.8; text-shadow:13px 9px 0 #163d32; }
.setup-card { background:#fffdf4; }
.mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:5px; margin-bottom:25px; background:#e9e8da; border-radius:12px; }
.mode-switch button { border:0; padding:10px; border-radius:9px; color:var(--muted); background:transparent; }
.mode-switch button.active { background:white; color:var(--green); font-weight:800; box-shadow:0 3px 10px #17332c18; }
.setup-form { display:grid; gap:16px; }
label { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:700; }
input,select { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:white; }
button { border:1px solid var(--line); border-radius:9px; padding:9px 13px; color:var(--ink); background:#fffdf5; }
button:disabled { cursor:not-allowed; opacity:.45; }
button.primary { border-color:var(--green); color:white; background:var(--green); font-weight:800; }
button.danger { color:#a13931; border-color:#dca49e; }
.setup-form .primary { margin-top:5px; padding:13px; }
.setup-note { margin:20px 0 0; color:var(--muted); text-align:center; font-size:12px; }
.room-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:14px; padding:12px 16px; border-radius:14px; background:#fffdf4dd; box-shadow:0 7px 24px #17332c14; }
.room-toolbar>div:first-child { display:flex; align-items:baseline; gap:10px; }
.room-toolbar strong { font-size:25px; letter-spacing:.15em; }
.host-tools { display:flex; align-items:end; gap:8px; }
.host-tools label { display:flex; align-items:center; gap:5px; }
.host-tools select { width:65px; padding:8px; }
.game-layout { display:grid; grid-template-columns:240px minmax(560px,1fr) 285px; gap:14px; align-items:start; }
.panel { background:#fffdf1e8; border:1px solid #fff; border-radius:17px; box-shadow:0 10px 30px #17332c16; }
.side-panel,.action-panel { padding:15px; }
.panel-title,.dice-title,.round-meta,.timer-box>div:first-child { display:flex; justify-content:space-between; align-items:center; }
.panel-title { padding-bottom:10px; border-bottom:1px solid var(--line); font-weight:800; }
.player-list { display:grid; gap:9px; margin-top:12px; }
.player-item { padding:10px; border:1px solid var(--line); border-left:5px solid var(--player); border-radius:10px; background:#fff; transition:.2s; }
.player-item.player-current { outline:3px solid #f5b82e55; transform:translateX(3px); }
.player-item.player-offline { filter:grayscale(1); opacity:.55; }
.player-item>div { display:flex; align-items:center; gap:6px; }
.player-item em { padding:2px 5px; border-radius:4px; color:var(--green); background:#e2efe6; font-size:10px; font-style:normal; }
.player-item>span,.player-item small { display:block; margin-top:6px; color:var(--muted); font-size:12px; }
.player-item button { margin-top:8px; padding:4px 8px; font-size:11px; }
.player-color { width:10px; height:10px; border-radius:50%; background:var(--player); }
.legend { display:flex; gap:12px; margin-top:15px; color:var(--muted); font-size:11px; }
.legend i { display:inline-block; width:10px; height:10px; margin-right:3px; border-radius:50%; }
.tent-dot { background:#2589bd; }.runner-dot { background:#f5b82e; clip-path:polygon(50% 0,100% 100%,0 100%); }
.board-panel { padding:14px; overflow:hidden; }
.board-stage { position:relative; }
.dice-canvas { position:absolute; z-index:20; left:20%; top:20%; width:60%; height:60%; border-radius:50%; opacity:0; filter:drop-shadow(0 14px 18px #17332c52); pointer-events:none; transition:opacity .18s ease; }
.dice-canvas.visible { opacity:1; }
.round-meta { gap:10px; color:var(--muted); font-size:13px; }
.phase-badge { padding:5px 10px; border-radius:999px; color:white; background:var(--green); font-size:11px; font-weight:800; }
.notice { min-height:22px; margin:10px 0; text-align:center; font-weight:800; }
.mountain-board { isolation:isolate; position:relative; min-height:570px; display:flex; align-items:end; justify-content:center; gap:clamp(2px,.65vw,8px); padding:24px 5px 12px; overflow:hidden; border:5px solid #f2e8cc; border-radius:18px; background:linear-gradient(#8fc8d5 0 34%,#c8d8c5 34% 47%,#60846a 47% 100%); box-shadow:inset 0 0 55px #17332c40,0 3px 0 #c9bfa4; }
.mountain-board:after { content:""; z-index:-1; position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.mountain-scenery { z-index:-2; position:absolute; inset:0; pointer-events:none; }
.mountain-scenery svg { width:100%; height:100%; display:block; }
.cloud { fill:#fff; opacity:.56; animation:cloud-drift 16s ease-in-out infinite alternate; }.cloud-b { animation-delay:-7s; }.snow { fill:#edf0e2; opacity:.94; }.snow-far { opacity:.56; }.ridge { fill:none; stroke:#355a4a; stroke-width:4; opacity:.32; }.trees { fill:#294f3e; opacity:.75; }
.mist { position:absolute; width:43%; height:9%; border-radius:50%; background:#ffffff70; filter:blur(12px); animation:mist-drift 12s ease-in-out infinite alternate; }.mist-one { left:-6%; top:38%; }.mist-two { right:-8%; top:55%; animation-delay:-5s; }
.route { width:calc((100% - 58px)/11); display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; filter:drop-shadow(0 2px 2px #17332c38); }
.route:before { content:""; position:absolute; inset:20px 12% 28px; border:2px dashed #f1dfb784; border-radius:999px; background:linear-gradient(90deg,#6c73523d,#fff1c158 45%,#6c73523d); transform:rotate(calc((var(--route) - 8) * .18deg)); }
.route.claimed:before { border-color:var(--owner); background:color-mix(in srgb,var(--owner) 29%,#fff4d2 71%); box-shadow:0 0 14px color-mix(in srgb,var(--owner) 55%,transparent); }
.route>b { z-index:3; position:relative; width:31px; height:28px; display:grid; place-items:center; border:2px solid #e8d4a9; border-radius:5px 5px 9px 9px; color:#fff6da; background:#244f40; box-shadow:0 3px 0 #17382e,0 4px 8px #17332c66; font-size:12px; transform:rotate(calc((var(--route) - 8) * .25deg)); }
.route>b:before { content:""; position:absolute; left:50%; bottom:-8px; width:3px; height:8px; background:#573c27; transform:translateX(-50%); }.route>b span { z-index:1; }
.summit { z-index:4; position:relative; width:34px; height:27px; display:flex; align-items:flex-end; justify-content:center; color:#f5d36b; line-height:1; }
.summit-peak { filter:drop-shadow(0 2px 1px #17332c); animation:summit-glow 2.4s ease-in-out infinite; }
.claim-flag { position:relative; width:25px; height:27px; border-left:3px solid #f4ead2; filter:drop-shadow(0 2px 2px #17332c99); animation:flag-rise .65s cubic-bezier(.2,.8,.2,1) both; }.claim-flag i { position:absolute; left:1px; top:1px; width:20px; height:13px; background:var(--flag); clip-path:polygon(0 0,100% 12%,78% 53%,100% 94%,0 82%); transform-origin:left center; animation:flag-wave 1.8s ease-in-out infinite; }
.route-cell { z-index:2; position:relative; width:clamp(20px,2.15vw,30px); height:clamp(19px,2.05vw,29px); display:flex; align-items:center; justify-content:center; margin:0 auto; border:2px solid #665c43aa; border-radius:46% 54% 42% 58%/55% 45% 55% 45%; background:linear-gradient(145deg,#fff7d6,#d8cba7); box-shadow:inset 2px 2px 2px #fff9,inset -2px -2px 3px #594f3b35,0 2px 2px #17332c55; transform:translateX(var(--drift)) rotate(var(--tilt)); }
.route-cell:nth-of-type(3n) { border-radius:58% 42% 55% 45%/43% 57% 45% 55%; }.route-cell:after { content:""; position:absolute; width:3px; height:3px; left:23%; top:24%; border-radius:50%; background:#82785d55; box-shadow:9px 6px 0 #82785d38; }
.camp { z-index:5; position:absolute; left:var(--camp-x); bottom:13%; width:66%; height:68%; filter:drop-shadow(0 2px 1px #17332c88); font-style:normal; animation:camp-set .38s ease-out both; }.camp:before { content:""; position:absolute; inset:0; background:var(--color); clip-path:polygon(50% 0,100% 88%,87% 100%,12% 100%,0 88%); }.camp:after { content:""; position:absolute; left:42%; bottom:0; width:25%; height:48%; background:#263c34; clip-path:polygon(50% 0,100% 100%,0 100%); }.camp span { position:absolute; z-index:1; left:8%; right:8%; bottom:-2px; height:3px; border-radius:99px; background:#f2e1b7; }
.runner { z-index:7; position:absolute; width:78%; height:100%; color:var(--color); filter:drop-shadow(0 1px 0 white) drop-shadow(0 2px 2px #17332caa); font-style:normal; animation:runner-arrive .42s cubic-bezier(.2,.9,.3,1.35) both; }.runner-head { position:absolute; left:39%; top:3%; width:30%; aspect-ratio:1; border:2px solid #fff7dc; border-radius:50%; background:var(--color); }.runner-body { position:absolute; left:31%; top:31%; width:43%; height:55%; border:2px solid #fff7dc; border-radius:45% 45% 25% 25%; background:var(--color); transform:rotate(-4deg); }.runner-body:before,.runner-body:after { content:""; position:absolute; bottom:-25%; width:31%; height:48%; border-radius:99px; background:var(--color); border:1px solid #fff7dc; }.runner-body:before { left:3%; transform:rotate(15deg); }.runner-body:after { right:3%; transform:rotate(-15deg); }.runner-pack { position:absolute; left:13%; top:33%; width:29%; height:45%; border:2px solid #fff7dc; border-radius:45% 20% 25% 45%; background:#304d42; }
@keyframes cloud-drift { to { transform:translateX(28px); opacity:.72; } }
@keyframes mist-drift { to { transform:translateX(45px) scaleX(1.12); opacity:.55; } }
@keyframes summit-glow { 50% { color:#fff0a5; transform:translateY(-2px); } }
@keyframes flag-rise { from { transform:translateY(18px); opacity:0; } }
@keyframes flag-wave { 50% { transform:skewY(7deg) scaleX(.9); } }
@keyframes camp-set { from { transform:translateY(-7px) scale(.7); opacity:0; } }
@keyframes runner-arrive { from { transform:translateY(12px) scale(.7); opacity:.2; } 65% { transform:translateY(-3px) scale(1.08); } }
.timer-box { margin-top:12px; }
.timer-box>div:first-child { margin-bottom:6px; color:var(--muted); font-size:12px; }
.shared-timer-track { height:6px; border-radius:99px; overflow:hidden; background:#dfe4d8; }
.shared-timer-bar { height:100%; background:var(--orange); transition:width .2s linear; }
.dice-title { padding-bottom:10px; font-weight:800; }
.dice-title b { color:var(--muted); font-size:11px; }
.dice-area { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:13px 0; }
.die { aspect-ratio:1; display:grid; place-items:center; border:2px solid #d7d0b9; border-radius:10px; color:var(--green); background:white; box-shadow:0 4px 0 #c8c1ac; font-size:23px; font-weight:900; }
.die.empty { color:#a9afa7; background:#efeee5; }
.action-area { display:grid; gap:8px; min-height:92px; }
.big-action,.stop-action { padding:14px; font-weight:900; }
.stop-action { border:2px solid var(--orange); color:#b64a24; background:#fff5ec; }
.choice-action { display:flex; justify-content:space-between; align-items:center; padding:10px; border:2px solid #79a38e; background:#f1faef; }
.choice-action span { font-size:17px; font-weight:900; }.choice-action small { color:var(--muted); }
.log-title { margin-top:18px; }.log-title button { padding:3px 7px; font-size:11px; }
.log-list { max-height:250px; overflow:auto; }.log-list.collapsed { display:none; }.log-list p { margin:0; padding:8px 2px; border-bottom:1px dashed var(--line); color:var(--muted); font-size:11px; line-height:1.5; }
.result-panel { margin-top:14px; padding:20px; text-align:center; }.result-panel h2 { margin:5px 0 15px; font-size:28px; }.result-panel .eyebrow { color:var(--orange); }
.result-actions { display:flex; justify-content:center; margin-top:16px; }
#resultList { width:min(500px,100%); margin:auto; }#resultList p { display:grid; grid-template-columns:15px 1fr auto; gap:8px; align-items:center; padding:9px; margin:4px; border-radius:8px; background:white; text-align:left; }#resultList i { width:11px; height:11px; border-radius:50%; }
.muted { color:var(--muted); }
@media(max-width:1050px) { .game-layout { grid-template-columns:210px 1fr; }.action-panel { grid-column:1/-1; display:grid; grid-template-columns:180px 1fr 1fr; gap:14px; }.action-panel .log-title,.action-panel .log-list { grid-column:3; }.dice-area { grid-column:1; }.action-area { grid-column:2; grid-row:1/3; }.mountain-board { min-height:515px; } }
@media(max-width:720px) { main { width:94vw; margin-top:14px; }.site-header { min-height:70px; }.connection-pill { font-size:11px; }.setup-shell { grid-template-columns:1fr; margin-top:2vh; }.intro-card { padding:30px; }.mountain-mark { font-size:60px; }.game-layout { display:flex; flex-direction:column; }.side-panel,.board-panel,.action-panel { width:100%; }.side-panel { order:2; }.board-panel { order:1; padding:8px; }.action-panel { order:3; display:block; }.mountain-board { min-height:440px; gap:1px; border-width:3px; }.route-cell { width:clamp(16px,5.25vw,25px); height:clamp(16px,5vw,24px); border-width:1px; transform:translateX(calc(var(--drift) * .45)); }.route:before { inset:18px 3% 25px; border-width:1px; }.route>b { width:25px; height:24px; }.room-toolbar { align-items:flex-start; }.host-tools { flex-wrap:wrap; justify-content:flex-end; }.runner { width:88%; }.camp { width:90%; } }
@media(prefers-reduced-motion:reduce) { .cloud,.mist,.summit-peak,.claim-flag,.claim-flag i,.camp,.runner { animation:none!important; } }
 .spectator-action-note { line-height: 1.6; }