.shell{max-width:820px;padding:18px 24px}.shell header{justify-content:center;margin-bottom:18px}.layout{display:flex;flex-direction:column;gap:20px;align-items:center}.play-area{width:100%;max-width:600px}.players{display:flex;justify-content:space-evenly;gap:18px;width:100%;max-width:600px;margin:0;flex-wrap:wrap}.player-circle{display:flex;flex-direction:column;align-items:center;gap:10px}.circle-name{font-size:14px;color:var(--muted)}.power-circle{width:140px;height:140px;position:relative;border-radius:50%;padding:7px;border:0;background:#2a3448;box-shadow:0 8px 25px #0003;opacity:.5;color:var(--muted);transition:opacity .25s,box-shadow .25s;touch-action:manipulation}.power-circle.active{opacity:1;box-shadow:0 0 0 1px color-mix(in srgb,var(--player-color),transparent 35%),0 0 25px color-mix(in srgb,var(--player-color),transparent 80%);background:var(--player-color)}.power-circle.charging{background:conic-gradient(from -90deg,var(--player-color) 0deg,color-mix(in srgb,var(--player-color),white 45%) var(--strength),#2a3448 var(--strength),#2a3448 360deg)}.circle-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:50%;width:100%;height:100%;background:radial-gradient(at 35% 20%,#2e3c57,#172237 80%);box-shadow:inset 0 2px 3px #ffffff10}.circle-face strong{font-size:23px;color:var(--text);font-weight:500}.circle-face span{font-size:12px;min-height:20px;color:var(--muted)}.circle-face small{font-size:13px;min-height:22px;color:var(--muted)}.power-circle:enabled:hover .circle-face{background:radial-gradient(at 35% 20%,#3a4c68,#1c2a42 80%)}.power-circle:focus-visible{outline:3px solid white;outline-offset:5px}@media(max-width:680px){.shell{padding:12px}.shell header{margin-bottom:12px}.layout{gap:16px}.power-circle{width:118px;height:118px}.circle-face strong{font-size:20px}.players{gap:12px}.circle-name{font-size:12px}}@media(prefers-reduced-motion:reduce){.power-circle{transition:none}}

/* Match each player's control to their home corner from the red player's view. */
.play-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;direction:ltr}.play-area>.players{display:contents}.board-wrap{grid-column:1/-1;grid-row:2}.player-circle{direction:rtl;justify-self:center;min-width:0}.seat-0{grid-column:1;grid-row:3}.seat-1{grid-column:1;grid-row:1}.seat-2{grid-column:2;grid-row:1}.seat-3{grid-column:2;grid-row:3}.power-circle{width:112px;height:112px}.circle-face strong{font-size:20px}.circle-name{color:var(--player-color)}@media(max-width:680px){.play-area{gap:10px}.power-circle{width:98px;height:98px;padding:6px}.player-circle{gap:5px}.circle-face strong{font-size:18px}.circle-face span{font-size:11px}.circle-face small{font-size:12px}}

/* A consistent, softly rounded board with equal padding on every edge. */
.play-area{gap:18px}.board-wrap{width:100%;min-width:0;aspect-ratio:1;padding:12px;border-radius:36px;background:linear-gradient(145deg,#3a4a65,#202d43);border:1px solid #52617a;box-shadow:0 18px 42px #0004,inset 0 1px 0 #ffffff20}.board{border-radius:24px;background:#e8edf5;isolation:isolate}.board svg{border-radius:inherit}.token{box-shadow:0 2px 0 color-mix(in srgb,var(--piece),#000 30%),0 3px 5px #0003}.player-circle{gap:8px}@media(max-width:680px){.play-area{gap:12px}.board-wrap{padding:8px;border-radius:28px}.board{border-radius:19px}}

:root{--board-cell:#f7f9fc;--board-surface:#e8edf5;--board-line:#dbe2ed;--board-frame-top:#3a4a65;--board-frame-bottom:#202d43;--page-base:#0e1423;--page-glow:#233354}body{background:radial-gradient(ellipse at 70% 0%,var(--page-glow),transparent 65%),var(--page-base)}.board-wrap{background:linear-gradient(145deg,var(--board-frame-top),var(--board-frame-bottom))}.board{background:var(--board-surface)}.shell header{position:relative;justify-content:space-between}.appearance-button{font-size:14px;background:color-mix(in srgb,var(--page-base),transparent 15%);color:var(--text)}#appearance{color:#f2f5fc;background:#1b263c}#appearance fieldset{border:0;padding:0;margin:20px 0}#appearance legend{margin-bottom:10px;font-size:14px}.theme-options{display:flex;flex-wrap:wrap;gap:8px}.theme-option{display:flex;align-items:center;gap:8px;background:#27364f;color:#edf3ff;border:2px solid transparent;border-radius:12px;padding:9px 10px;font-size:14px;min-height:44px}.theme-option::before{content:'';width:20px;height:20px;background:var(--swatch);border:1px solid #ffffff55;border-radius:50%}.theme-option[aria-pressed=true]{border-color:#f2be56;background:#354463}.circle-face strong{color:#f2f5fc}.circle-face span,.circle-face small{color:#aab5cc}[data-background=day] .circle-name{color:color-mix(in srgb,var(--player-color),#172138 30%)}[data-background=day] .logo{color:#aa7620}

.token.walking{z-index:8;transition:left var(--step-duration) cubic-bezier(.35,0,.35,1),top var(--step-duration) cubic-bezier(.35,0,.35,1);box-shadow:0 3px 0 color-mix(in srgb,var(--piece),#000 30%),0 5px 10px #0005}.token.returning{z-index:9;transition:left .75s cubic-bezier(.4,0,.2,1),top .75s cubic-bezier(.4,0,.2,1);box-shadow:0 0 0 3px #ffffff90,0 5px 14px #0005}@media(prefers-reduced-motion:reduce){.token.walking,.token.returning{transition:none}}

.goal-count{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.goal-count strong{direction:ltr;font-variant-numeric:tabular-nums;color:var(--text);font-weight:500}
.player-ledger{display:grid;grid-template-columns:repeat(4,auto);gap:3px;direction:ltr;margin-top:-4px}.player-ledger span{min-width:30px;padding:2px 5px;border:1px solid color-mix(in srgb,var(--player-color),transparent 65%);border-radius:999px;background:color-mix(in srgb,var(--page-base),transparent 10%);color:var(--text);font-size:10px;line-height:1.35;font-variant-numeric:tabular-nums;text-align:center}@media(max-width:680px){.player-ledger{grid-template-columns:repeat(2,auto);gap:2px}.player-ledger span{min-width:34px;font-size:9px;padding:1px 4px}}
.dice-guide{position:absolute;inset:0;z-index:4;pointer-events:none}.dice-guide:empty{display:none}.dice-guide b{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#111c30;color:#fff;border:1px solid color-mix(in srgb,var(--player-color),#fff 30%);box-shadow:0 2px 6px #0006;font-size:12px;line-height:1;font-weight:700;transform:translate(-50%,-50%) rotate(var(--guide-angle)) translateY(-57px) rotate(calc(-1 * var(--guide-angle)));transition:background .12s,transform .12s}.dice-guide b.current{background:var(--player-color);color:#101828;box-shadow:0 0 0 3px #fff,0 2px 9px #0007;transform:translate(-50%,-50%) rotate(var(--guide-angle)) translateY(-57px) rotate(calc(-1 * var(--guide-angle))) scale(1.12)}@media(max-width:680px){.dice-guide b{width:20px;height:20px;font-size:11px;transform:translate(-50%,-50%) rotate(var(--guide-angle)) translateY(-50px) rotate(calc(-1 * var(--guide-angle)))}.dice-guide b.current{transform:translate(-50%,-50%) rotate(var(--guide-angle)) translateY(-50px) rotate(calc(-1 * var(--guide-angle))) scale(1.1)}}

/* More compact dice controls, gently offset to the left of each seat. */
.power-circle{width:94px;height:94px;padding:6px;transform:translateX(-12px)}.circle-face strong{font-size:18px}.circle-face span{font-size:11px;min-height:17px}.circle-face small{font-size:12px;min-height:18px}@media(max-width:680px){.power-circle{width:84px;height:84px;padding:5px;transform:translateX(-8px)}.circle-face{gap:1px}.circle-face strong{font-size:16px}.circle-face span{font-size:11px}.circle-face small{font-size:11px}}

.name-edit{background:transparent;padding:5px 8px;border-radius:8px;max-width:100%;white-space:normal;overflow-wrap:anywhere;min-height:36px;text-align:center}.name-edit::after{content:' ✎';font-size:12px;opacity:.65}.name-edit:hover{background:#ffffff12}#name-dialog{color:#f2f5fc;background:#1b263c}#player-name-input{width:100%;margin-top:9px;padding:12px;border-radius:10px;border:1px solid #50617d;background:#101b2d;color:#f2f5fc;font:inherit;font-size:16px}#name-cancel{width:100%;margin-top:10px;color:#c5d0e4}

.shell header{gap:10px;flex-wrap:wrap}.brand{margin-inline-end:auto}.chat-open{color:var(--text);font-size:14px}#chat-dialog{width:min(470px,calc(100% - 24px));max-height:90dvh;overflow:auto;background:#1b263c;color:#f2f5fc}.chat-header{display:flex;justify-content:space-between;align-items:center;gap:10px}.chat-header h2{margin:0}.chat-note{font-size:12px!important;color:#b1bfd5!important}.chat-log{max-height:30dvh;min-height:110px;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;margin:16px 0;padding:8px;border-radius:12px;background:#111c30}.chat-message{padding:10px 12px;border-radius:12px;background:#27364d;border-inline-start:3px solid var(--sender-color)}.chat-message strong{font-size:13px;color:#e6eefc}.chat-message p{margin:5px 0 0;color:#f2f5fc;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}#chat-input{width:100%;resize:vertical;min-height:70px;max-height:160px;border-radius:10px;background:#111b2e;border:1px solid #465673;color:#f2f5fc;padding:10px;font:inherit;font-size:16px}#chat-error{color:#ffacb6}#chat-form label{margin-top:10px}@media(max-width:400px){.chat-open,.appearance-button{padding:7px 10px}.brand{gap:7px}.logo{font-size:34px}.brand h1{font-size:22px}}

.token.walking{z-index:20;pointer-events:none;transition:left var(--step-duration) linear,top var(--step-duration) linear;outline:2px solid #fff;outline-offset:1px}.token.finished{width:2.2%;font-size:clamp(7px,.9vw,10px);border-width:1px;box-shadow:0 1px 2px #0003}.token.springing{z-index:25;transition:left .85s cubic-bezier(.3,0,.3,1),top .85s cubic-bezier(.3,0,.3,1);box-shadow:0 0 0 4px #b18bff80,0 8px 18px #0004;outline-color:#e1ceff}#spring-dialog{color:#f2f5fc;background:#1b263c}#spring-dialog p{color:#bdc9de;font-size:14px}.spring-option{display:flex;align-items:center;gap:10px;cursor:pointer}.spring-option input{width:22px;height:22px;accent-color:#b48af5;flex-shrink:0}@media(prefers-reduced-motion:reduce){.token.walking,.token.springing{transition:none}}

#online-dialog,#lobby-dialog{width:min(440px,92vw);color:var(--text);background:#1b263c}#online-dialog input:not([type=checkbox]),#online-dialog select{display:block;width:100%;padding:12px;border-radius:12px;margin:8px 0 16px;border:1px solid #627089;background:#111c30;color:#fff}#online-dialog button,#lobby-dialog button,#spring-dialog button{margin-top:10px}#online-error{color:#ffb6b6}#network-status{position:fixed;bottom:12px;left:12px;right:12px;z-index:90;background:#30233c;color:#fff;padding:12px;border-radius:12px;text-align:center}#room-code{font-size:28px;letter-spacing:4px;user-select:all}

.name-edit:disabled{opacity:1;cursor:default}.name-edit:disabled:after{content:none}
.board-feature{position:absolute;z-index:6;display:grid;place-items:center;transform:translate(-50%,-50%);width:5.2%;aspect-ratio:1;line-height:1;border:2px solid #fff;cursor:help;pointer-events:auto;user-select:none;filter:drop-shadow(0 2px 3px #31405a55);transition:transform .18s ease,filter .18s ease}.board-feature:hover,.board-feature:focus-visible{z-index:8;transform:translate(-50%,-50%) scale(1.18);filter:drop-shadow(0 4px 7px #31405a66);outline:3px solid #fff;outline-offset:2px}.board-feature[hidden]{display:none}.treasure{border-radius:36% 36% 44% 44%;background:linear-gradient(145deg,#fffaf0,#ffe59b);font-size:clamp(13px,2.15vw,22px);animation:treasure-glow 1.5s ease-in-out infinite alternate}.passage-marker{border-radius:42%;border-color:color-mix(in srgb,var(--passage-color),#fff 38%);background:color-mix(in srgb,var(--passage-color),#fff 82%);color:color-mix(in srgb,var(--passage-color),#173052 18%);font-size:clamp(13px,2.1vw,21px);font-weight:900;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--passage-color),transparent 72%)}.spike-marker{border-radius:44% 44% 48% 48%;border-color:#dff2c8;background:linear-gradient(145deg,#f8ffe9,#cfeea8);font-size:clamp(13px,2.15vw,22px);box-shadow:inset 0 -3px 0 #7cb76533}.feature-tooltip{position:fixed;z-index:1000;width:max-content;max-width:min(260px,calc(100vw - 20px));padding:9px 12px;border:1px solid #ffffff55;border-radius:12px;background:#21314ef2;color:#fff;font-size:13px;line-height:1.55;text-align:right;direction:rtl;box-shadow:0 8px 24px #0c162b55;pointer-events:none;animation:tip-in .14s ease-out}.feature-tooltip[hidden]{display:none}@keyframes treasure-glow{to{filter:drop-shadow(0 3px 6px #d79b3a88)}}@keyframes tip-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.treasure,.feature-tooltip{animation:none}}
.token.frozen{filter:saturate(.3) brightness(1.25);box-shadow:0 0 0 4px #9de7ff,0 0 14px #62d8ff;cursor:not-allowed}.token.frozen:after{content:'❄';position:absolute;inset:-45% -35% auto auto;color:#d5f8ff;font-size:1.1em;text-shadow:0 1px 3px #075779}
.player-mood-face{--look-x:0px;--look-y:0px;--face-tilt:0deg;width:9.2%;border-radius:50%;border-color:color-mix(in srgb,var(--mood-color),#fff 45%);background:color-mix(in srgb,var(--mood-color),#fff 82%);box-shadow:0 4px 0 color-mix(in srgb,var(--mood-color),#34415c 38%),0 7px 14px #34415c35;overflow:visible}.avatar-head{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 38% 28%,#fffdf4,#ffeab7 72%,#efca7d);box-shadow:inset 0 -3px 0 #d6a4532b;transform:rotate(var(--face-tilt));transition:transform .25s ease}.avatar-eye{position:absolute;top:29%;width:25%;height:30%;border-radius:50%;background:#fff;box-shadow:inset 0 1px 2px #6a523433;overflow:hidden;animation:avatar-blink 5.2s ease-in-out infinite}.avatar-eye-left{left:18%}.avatar-eye-right{right:18%;animation-delay:.08s}.avatar-eye i{position:absolute;left:50%;top:50%;width:42%;aspect-ratio:1;border-radius:50%;background:#26334b;box-shadow:inset 0 0 0 2px #fff3;transform:translate(calc(-50% + var(--look-x)),calc(-50% + var(--look-y)));transition:transform .22s ease}.avatar-mouth{position:absolute;left:34%;top:64%;width:32%;height:16%;border:0 solid #6c4938;border-bottom-width:3px;border-radius:0 0 50% 50%;transition:all .2s ease}.avatar-brow{position:absolute;top:19%;width:23%;height:2px;border-radius:2px;background:#8d673f;transition:transform .2s ease}.avatar-brow-left{left:18%;transform:rotate(-4deg)}.avatar-brow-right{right:18%;transform:rotate(4deg)}.player-mood-face[data-mood=happy] .avatar-mouth,.player-mood-face[data-mood=excited] .avatar-mouth{left:29%;top:60%;width:42%;height:24%;border-bottom-width:4px}.player-mood-face[data-mood=sad] .avatar-mouth{top:72%;border-top:3px solid #6c4938;border-bottom:0;border-radius:50% 50% 0 0}.player-mood-face[data-mood=sad] .avatar-brow-left{transform:rotate(14deg)}.player-mood-face[data-mood=sad] .avatar-brow-right{transform:rotate(-14deg)}.player-mood-face[data-mood=scared] .avatar-mouth{left:42%;top:64%;width:16%;height:19%;border:3px solid #6c4938;border-radius:50%}.player-mood-face[data-mood=scared] .avatar-brow-left{transform:rotate(-18deg)}.player-mood-face[data-mood=scared] .avatar-brow-right{transform:rotate(18deg)}.player-mood-face[data-mood=focused] .avatar-mouth{top:69%;height:0;border-radius:8px}.player-mood-face[data-mood=proud] .avatar-mouth{left:39%;width:31%;transform:rotate(-9deg)}.player-mood-face[data-mood=relieved] .avatar-eye{height:8%;top:43%;background:#6c4938}.player-mood-face[data-mood=frozen] .avatar-head{filter:hue-rotate(155deg) saturate(.7);animation:mood-shiver .32s ease-in-out infinite alternate}.player-mood-face[data-mood=scared] .avatar-head{animation:mood-shiver .32s ease-in-out infinite alternate}.player-mood-face[data-mood=happy] .avatar-head,.player-mood-face[data-mood=excited] .avatar-head{animation:mood-bounce .8s ease-in-out infinite alternate}@keyframes avatar-blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.12)}}@keyframes mood-shiver{to{transform:rotate(calc(var(--face-tilt) + 4deg)) translateX(1px)}}@keyframes mood-bounce{to{transform:rotate(var(--face-tilt)) translateY(-4%) scale(1.04)}}@media(prefers-reduced-motion:reduce){.avatar-head,.avatar-eye{animation:none!important}}
.avatar-head::after{content:'';display:none;position:absolute;z-index:3}.player-mood-face[data-mood=scared]{border-color:#ff9a9a;box-shadow:0 0 0 4px #ff696955,0 0 18px #ff5f6d99;animation:mood-alert .24s ease-in-out infinite alternate}.player-mood-face[data-mood=scared] .avatar-head{animation:mood-shiver-strong .14s ease-in-out infinite alternate}.player-mood-face[data-mood=scared] .avatar-eye{top:25%;width:29%;height:36%;animation-duration:2.1s}.player-mood-face[data-mood=scared] .avatar-eye-left{left:14%}.player-mood-face[data-mood=scared] .avatar-eye-right{right:14%}.player-mood-face[data-mood=scared] .avatar-eye i{width:30%}.player-mood-face[data-mood=scared] .avatar-head::after{display:block;right:-8%;top:13%;width:12%;height:19%;border-radius:70% 30% 60% 40%;background:#66c9ff;transform:rotate(18deg);box-shadow:0 1px 2px #177ba655}.player-mood-face[data-mood=sad]{border-color:#86cfff;box-shadow:0 0 0 3px #73bff044,0 7px 15px #397da866}.player-mood-face[data-mood=sad] .avatar-head{animation:mood-droop .7s ease-in-out infinite alternate}.player-mood-face[data-mood=sad] .avatar-head::after{display:block;left:24%;top:53%;width:10%;height:20%;border-radius:70% 30% 60% 40%;background:#65c8ff;box-shadow:0 1px 2px #177ba655}.player-mood-face[data-mood=happy]{border-color:#fff09a;box-shadow:0 0 0 4px #ffd94e66,0 0 20px #ffca3a88}.player-mood-face[data-mood=happy] .avatar-head{animation:mood-cheer .48s ease-in-out infinite alternate}.player-mood-face[data-mood=happy] .avatar-eye{height:25%;top:32%}@keyframes mood-alert{to{filter:brightness(1.16) saturate(1.25)}}@keyframes mood-shiver-strong{0%{transform:rotate(calc(var(--face-tilt) - 6deg)) translateX(-2px)}100%{transform:rotate(calc(var(--face-tilt) + 6deg)) translateX(2px)}}@keyframes mood-droop{to{transform:rotate(var(--face-tilt)) translateY(4%) scale(.96)}}@keyframes mood-cheer{to{transform:rotate(var(--face-tilt)) translateY(-7%) scale(1.08)}}@media(prefers-reduced-motion:reduce){.player-mood-face,.avatar-head{animation:none!important}}
.player-mood-face[data-mood=calm]{background:color-mix(in srgb,var(--mood-color),#fff 82%)}.player-mood-face[data-mood=focused]{background:#ded8ff;border-color:#a99bf2}.player-mood-face[data-mood=focused] .avatar-head{background:radial-gradient(circle at 38% 28%,#fff,#eeeaff 70%,#c4b9ef)}.player-mood-face[data-mood=happy]{background:#fff0a9}.player-mood-face[data-mood=happy] .avatar-head{background:radial-gradient(circle at 38% 28%,#fffef0,#ffe783 72%,#f1b93f)}.player-mood-face[data-mood=sad]{background:#ccecff}.player-mood-face[data-mood=sad] .avatar-head{background:radial-gradient(circle at 38% 28%,#f7fdff,#cbeaff 72%,#83c6ec)}.player-mood-face[data-mood=scared]{background:#ffd1d5}.player-mood-face[data-mood=scared] .avatar-head{background:radial-gradient(circle at 38% 28%,#fff7f7,#ffc3c8 72%,#ef8790)}.player-mood-face[data-mood=angry]{background:#ff9b72;border-color:#ff5a3c;box-shadow:0 0 0 4px #ff5a3c55,0 0 20px #e83b2288;animation:mood-angry-ring .3s ease-in-out infinite alternate}.player-mood-face[data-mood=angry] .avatar-head{background:radial-gradient(circle at 38% 28%,#fff1d5,#ffad67 68%,#e9603f);animation:mood-angry .25s ease-in-out infinite alternate}.player-mood-face[data-mood=angry] .avatar-brow-left{top:23%;transform:rotate(24deg)}.player-mood-face[data-mood=angry] .avatar-brow-right{top:23%;transform:rotate(-24deg)}.player-mood-face[data-mood=angry] .avatar-eye{height:22%;top:35%}.player-mood-face[data-mood=angry] .avatar-mouth{top:72%;border-top:4px solid #6c3028;border-bottom:0;border-radius:50% 50% 0 0}@keyframes mood-angry-ring{to{filter:brightness(1.12) saturate(1.35)}}@keyframes mood-angry{to{transform:rotate(calc(var(--face-tilt) + 3deg)) scale(1.04)}}
.passage-marker{z-index:1}.player-mood-face[data-mood=scared]{box-shadow:0 0 0 2px #ff696944,0 0 12px #ff5f6d66;animation-duration:.45s}.player-mood-face[data-mood=scared] .avatar-head{animation-duration:.28s}.player-mood-face[data-mood=scared] .avatar-eye{width:27%;height:32%}.player-mood-face[data-mood=scared] .avatar-head::after{width:9%;height:15%}.player-mood-face[data-mood=happy] .avatar-head{animation-duration:.72s}.player-mood-face[data-mood=sad] .avatar-head{animation-duration:1s}.player-mood-face[data-mood=angry]{box-shadow:0 0 0 2px #ff5a3c44,0 0 13px #e83b2266;animation-duration:.55s}.player-mood-face[data-mood=angry] .avatar-head{animation-duration:.48s}@keyframes mood-shiver-strong{0%{transform:rotate(calc(var(--face-tilt) - 3deg)) translateX(-1px)}100%{transform:rotate(calc(var(--face-tilt) + 3deg)) translateX(1px)}}

#account-dialog{width:min(560px,94vw);max-height:90vh;overflow:auto;color:#eef3ff;background:#18243a}#account-dialog input{display:block;width:100%;background:#0f192b;border:1px solid #64718a;color:#fff;border-radius:12px;padding:12px;margin:8px 0 16px}#account-dialog button{margin:5px}#account-error{color:#ffbcbc}#account-profile h3{margin:24px 0 10px}#account-profile progress{width:100%;accent-color:#47cfa0}#profile-achievements{display:grid;grid-template-columns:1fr 1fr;gap:8px}.achievement{padding:10px;border-radius:12px;background:#24334d;color:#a6b2c6}.achievement.unlocked{background:#1d5147;color:#bcffdc}.account-row{padding:10px 0;border-bottom:1px solid #ffffff16}.account-note,#register-name p{font-size:13px;line-height:1.8;color:#b7c4d9}#account-dialog [hidden]{display:none!important}
.online-members{color:#8ff0c8!important}.room-name-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 12px;border-radius:999px;background:#1e3650;color:#bdebdc;border:1px solid #4fc99f55;font-size:13px}.auto-play-button[aria-pressed="true"]{color:#9ff5cf!important;border-color:#4fc99f88!important;background:#173e36!important}.danger-button{color:#ffb4b4!important;border-color:#ff7d7d66!important}.online-features{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;padding:14px;border:1px solid #ffffff24;border-radius:14px}.online-features label{display:flex;align-items:center;gap:8px;padding:9px;border-radius:10px;background:#111c30}.online-features input{width:auto!important;margin:0!important}.room-options{padding:10px 12px;border-radius:11px;background:#12243c;color:#9de8c9}.social-dashboard{padding:14px;border:1px solid #4fc99f55;border-radius:16px;background:#10283a}.social-dashboard h3{margin-top:0!important}.online-row,.invite-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.friend-badge{padding:4px 8px;border-radius:999px;background:#1c5c4b;color:#baffdf;font-size:12px}#room-invites{max-height:180px;overflow:auto}#chat-scope{width:100%;padding:10px;margin:8px 0;border-radius:10px;background:#111b2e;color:#fff;border:1px solid #465673}@media(max-width:560px){.room-name-badge{order:2;max-width:100%;width:100%;text-align:center}.online-features{grid-template-columns:1fr}.online-row,.invite-row{align-items:flex-start;flex-direction:column}}
.open-rooms-section{margin:16px 0;padding:13px;border:1px solid #4fc99f55;border-radius:15px;background:#102238}.open-rooms-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.open-rooms-heading h3{margin:0;font-size:16px}.open-rooms-heading button{margin:0!important;padding:7px 10px}.open-rooms{display:grid;gap:8px;margin-top:10px;max-height:210px;overflow:auto}.open-room-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:12px;background:#172d47;border:1px solid #ffffff14}.open-room-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}.open-room-row button{flex-shrink:0;margin:0!important;padding:8px 11px}@media(max-width:560px){.open-room-row{gap:8px}.open-room-row button{width:auto}}
.board-feature{transition:left .55s ease,top .55s ease,transform .18s ease,filter .18s ease}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.game-chat-panel{position:fixed;z-index:20;left:18px;top:110px;width:270px;max-height:calc(100dvh - 130px);display:flex;flex-direction:column;padding:14px;border:1px solid #4fc99f55;border-radius:18px;background:#111d31ee;box-shadow:0 16px 38px #0005;backdrop-filter:blur(12px);direction:rtl}.game-chat-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:10px;border-bottom:1px solid #ffffff16}.game-chat-heading h2{margin:0;font-size:17px}.game-chat-heading small{display:block;max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9fb0c8}.game-chat-heading #side-chat-close{padding:4px 10px;font-size:20px;line-height:1}.side-chat-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.side-chat-tabs button{padding:8px 5px;border-radius:9px;background:#1b2b43;color:#9fb0c8;font:inherit;font-size:12px}.side-chat-tabs button.active{background:#285345;color:#c5ffe7;box-shadow:inset 0 0 0 1px #58d2a5}.side-chat-tabs button:disabled{opacity:.4;cursor:default}.side-chat-hint{min-height:34px;margin:8px 2px 0!important;color:#9fb0c8!important;font-size:11px!important;line-height:1.5}.game-chat-log{display:flex;flex-direction:column;gap:8px;min-height:120px;max-height:330px;overflow:auto;padding:10px 2px}.game-chat-empty{margin:auto;color:#93a4bc;font-size:13px}.game-chat-message{--sender-color:#8a98ad;display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:12px;background:#1a2940}.game-chat-message[data-seat="0"]{--sender-color:#ed596c}.game-chat-message[data-seat="1"]{--sender-color:#27b78c}.game-chat-message[data-seat="2"]{--sender-color:#eebc44}.game-chat-message[data-seat="3"]{--sender-color:#4f8bea}.game-chat-message[data-seat="community"]{--sender-color:#9a8cff}.speaker-die{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border-radius:8px;background:var(--sender-color);color:#101828;font-size:20px;line-height:1;box-shadow:inset 0 1px 0 #fff8,0 2px 5px #0004}.game-chat-message>div{min-width:0;flex:1}.game-chat-message strong{display:block;color:var(--sender-color);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-chat-message p{margin:2px 0 0;color:#f1f5fb;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.game-chat-form{display:grid;grid-template-columns:1fr auto;gap:7px;padding-top:10px;border-top:1px solid #ffffff16}.game-chat-form input{min-width:0;padding:9px 10px;border:1px solid #465673;border-radius:10px;background:#0d1728;color:#fff;font:inherit;font-size:14px}.game-chat-form button{padding:8px 11px;border-radius:10px;background:#f2be56;color:#172138;font-weight:700}.game-chat-form input:disabled,.game-chat-form button:disabled{opacity:.5;cursor:default}.game-chat-form p{grid-column:1/-1;margin:0;color:#ffacb6;font-size:12px}.game-chat-panel[hidden]{display:none!important}@media(max-width:1250px){.game-chat-panel{position:relative;left:auto;top:auto;width:min(600px,calc(100% - 24px));max-height:none;margin:18px auto 0}.game-chat-log{max-height:220px}}@media(max-width:560px){.game-chat-panel{padding:11px;border-radius:15px}.game-chat-log{min-height:90px;max-height:180px}.game-chat-form{grid-template-columns:1fr}.game-chat-form button{width:100%}}
.goal-log-card{grid-column:1/-1;grid-row:4;direction:rtl;width:100%;padding:14px 16px;border:1px solid #ffffff1f;border-radius:16px;background:#18243a}.goal-log-card[hidden]{display:none}.goal-log-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.goal-log-heading h2{margin:0;font-size:18px}.goal-log-heading strong{color:#f3c65f}.goal-log{display:grid;gap:7px;margin-top:10px;max-height:150px;overflow:auto}.goal-log-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:#101b2e}.goal-log-row span{color:var(--goal-color);font-size:18px}.goal-log-row strong{font-size:13px}.goal-log-row small,.goal-log-empty{color:#aebbd0;font-size:12px}.goal-log-empty{margin:0}.performance-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0 20px}.performance-cards>div{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:13px;background:#101e34;border:1px solid #ffffff16}.performance-cards span{font-size:12px;color:#aebbd0}.performance-cards strong{font-size:20px;color:#f3c65f}@media(max-width:560px){.performance-cards{grid-template-columns:1fr}.goal-log-card{padding:12px}}

.account-required-note{padding:9px 11px;border-radius:11px;background:#362f1e;color:#ffe09a!important;border:1px solid #f2be5655;font-weight:700;text-align:center}
.legal-consent{display:flex;align-items:flex-start;gap:8px;margin:12px 0;padding:10px;border:1px solid #ffffff20;border-radius:10px;background:#101d31}.legal-consent input{width:auto;margin-top:4px}.legal-consent a,.account-legal-links a,.terms-required a{color:#7ee2bd}.terms-required{padding:12px;margin-bottom:15px;border:1px solid #f2be5680;border-radius:12px;background:#302a1d}.account-legal-links{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}.delete-account-box{margin:12px 0;padding:10px;border:1px solid #ee657055;border-radius:12px}.delete-account-box summary{cursor:pointer;color:#ff9fa8;font-weight:700}.delete-account-box input{width:100%;margin:8px 0}.delete-account-box .danger-button{width:100%;padding:10px;border-radius:9px;background:#8d3040;color:#fff}.message-actions{display:flex;gap:5px;margin-top:6px}.message-actions button{padding:3px 7px;border:1px solid #ffffff22;border-radius:7px;background:#111c2e;color:#aebbd0;font:inherit;font-size:10px}.account-row .safety-action{margin-inline-start:5px;padding:4px 7px;font-size:11px;color:#ffb2ba}
.chat-self-die{--sender-color:#9a8cff;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--sender-color);color:#101828;font-size:25px;line-height:1;box-shadow:inset 0 1px 0 #fff9,0 2px 6px #0004}.chat-self-die[data-seat="0"]{--sender-color:#ed596c}.chat-self-die[data-seat="1"]{--sender-color:#27b78c}.chat-self-die[data-seat="2"]{--sender-color:#eebc44}.chat-self-die[data-seat="3"]{--sender-color:#4f8bea}.game-chat-form{grid-template-columns:auto minmax(0,1fr) auto}.game-chat-form .chat-self-die[hidden]{display:none}.game-chat-log{flex:1;min-height:0;max-height:none}.game-chat-panel{width:min(600px,calc(100% - 24px));height:600px;max-height:600px;position:relative;left:auto;top:auto;margin:18px auto 0}.shell.chat-visible{max-width:1280px}.shell.chat-visible>.layout{width:100%}@media(min-width:1251px){.shell.chat-visible{display:grid;grid-template-columns:minmax(0,600px) minmax(0,600px);column-gap:28px;align-items:start}.shell.chat-visible>header{grid-column:1/-1}.shell.chat-visible>.layout{grid-column:1;grid-row:2}.shell.chat-visible>.game-chat-panel{grid-column:2;grid-row:2;width:600px;height:600px;margin:0;position:sticky;top:18px}.shell.chat-visible>footer{grid-column:1/-1}}@media(max-width:650px){.game-chat-panel{width:calc(100% - 24px);height:calc(100vw - 24px);max-height:600px;aspect-ratio:1}.game-chat-form{grid-template-columns:auto minmax(0,1fr) auto}.game-chat-form button{width:auto}.chat-self-die{width:36px;height:36px}}

/* Keep the chat half the board width while matching its 600px height. */
.game-chat-panel{width:300px;max-width:300px;height:600px;min-height:600px;max-height:600px;aspect-ratio:auto;margin:0}
.shell.chat-visible{max-width:924px}
.shell.chat-visible>.layout{min-width:0}
.shell.chat-visible>.game-chat-panel{width:300px;max-width:300px;height:600px;min-height:600px;max-height:600px}
@media(min-width:721px){
  .shell.chat-visible{display:grid;grid-template-columns:minmax(0,600px) 300px;column-gap:24px;align-items:start}
  .shell.chat-visible>header{grid-column:1/-1}
  .shell.chat-visible>.layout{grid-column:1;grid-row:2}
  .shell.chat-visible>.game-chat-panel{grid-column:2;grid-row:2;position:sticky;left:auto;top:18px;margin:0}
  .shell.chat-visible>footer{grid-column:1/-1}
}
@media(max-width:720px){
  .game-chat-panel,.shell.chat-visible>.game-chat-panel{position:relative;left:auto;top:auto;width:300px;max-width:calc(100% - 24px);height:600px;min-height:600px;max-height:600px;margin:18px auto 0;aspect-ratio:auto}
}

/* Show an unmistakable player-coloured die immediately before each chat name. */
.chat-self-identity,.speaker-line{display:flex;align-items:center;gap:7px;direction:rtl}
.chat-self-identity{--sender-color:#ed596c;margin-top:6px;color:var(--sender-color)}
.chat-self-identity[hidden]{display:none!important}
.chat-self-identity[data-seat="0"],.chat-self-identity .speaker-die[data-seat="0"]{--sender-color:#ed596c}
.chat-self-identity[data-seat="1"],.chat-self-identity .speaker-die[data-seat="1"]{--sender-color:#27b78c}
.chat-self-identity[data-seat="2"],.chat-self-identity .speaker-die[data-seat="2"]{--sender-color:#eebc44}
.chat-self-identity[data-seat="3"],.chat-self-identity .speaker-die[data-seat="3"]{--sender-color:#4f8bea}
.chat-self-identity strong{font-size:13px;color:var(--sender-color)}
.chat-self-identity .speaker-die,.speaker-line .speaker-die{width:25px;height:25px;flex-basis:25px;border-radius:7px;font-size:18px}
.speaker-line strong{display:block;color:var(--sender-color);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-chat-form{grid-template-columns:minmax(0,1fr) auto}

/* Chat colour markers use the same round, glossy shape as the player's board pieces. */
.speaker-die{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:27px;
  height:27px;
  flex:0 0 27px;
  border:2px solid #fff;
  border-radius:50%;
  background:radial-gradient(circle at 34% 25%,color-mix(in srgb,var(--sender-color),#fff 48%) 0 16%,var(--sender-color) 42%,color-mix(in srgb,var(--sender-color),#000 18%) 100%);
  color:#152039;
  font-size:12px;
  font-weight:800;
  line-height:1;
  box-shadow:0 2px 0 color-mix(in srgb,var(--sender-color),#000 35%),0 4px 6px #0005,inset 0 1px 2px #fff8;
}
.speaker-die:empty::after{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ffffffb8;
  box-shadow:inset 0 1px 1px #fff,0 1px 2px #0003;
}
.chat-self-identity .speaker-die,.speaker-line .speaker-die{width:27px;height:27px;flex-basis:27px;border-radius:50%;font-size:12px}


.sound-toggle{white-space:nowrap}
.sound-toggle[aria-pressed="true"]{color:#ffbdc5;border-color:#ed596c;background:#401d2a}
@media(max-width:560px){.sound-toggle{padding:7px 9px;font-size:12px}}


/* Compact main game menu with preset choices. */
#spring-dialog.home-menu{width:min(620px,calc(100% - 24px));padding:24px;overflow:auto;max-height:94dvh}
.home-menu-head{display:flex;align-items:center;justify-content:center;gap:12px;text-align:right;margin-bottom:18px}
.home-menu-head .logo{font-size:38px}.home-menu-head h2{margin:0;font-size:25px}.home-menu-head small{color:var(--muted)}
.home-quick-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.home-quick-settings label{margin:0!important;font-size:12px;color:var(--muted)}
.home-quick-settings select{margin-top:5px;padding:9px}
.game-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.game-preset{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:right;padding:13px;border:1px solid #394963;border-radius:15px;background:#142139;color:#fff}
.game-preset:hover{border-color:#73d7b2;background:#1d3047;transform:translateY(-1px)}
.game-preset>span{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#ffffff12;font-size:22px}
.game-preset strong{font-size:15px}.game-preset small{color:#9fb0c8;font-size:11px}
.game-preset.silent{border-color:#607086}.game-preset.classic{border-color:#eebc4466}.game-preset.adventure{border-color:#9a8cff88}.game-preset.custom{border-color:#27b78c66}
.local-custom-options{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:12px;padding:12px;border-radius:14px;background:#0f192b}
.local-custom-options label{display:flex!important;align-items:center;justify-content:center;gap:5px;margin:0!important;padding:7px 4px;border-radius:9px;background:#1b2a42;font-size:12px}
.local-custom-options input{accent-color:#27b78c}.local-custom-options .primary{grid-column:1/-1;margin:3px 0 0}
.home-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.home-menu-actions button{margin:0!important}
@media(max-width:520px){#spring-dialog.home-menu{padding:17px}.game-presets{grid-template-columns:1fr}.local-custom-options{grid-template-columns:repeat(2,1fr)}.local-custom-options .primary{grid-column:1/-1}}

