/* Mindcorner 3D — rainbow snakes and ladders interface */
:root {
  --mc-ink:#34463f;
  --mc-muted:#637269;
  --mc-border:#d8dfcb;
  --mc-surface:rgba(255,253,244,.97);
  --mc-rainbow:linear-gradient(115deg,#80c799 0%,#efc26e 22%,#b79bdf 43%,#80c7dd 64%,#eca4b9 83%,#a8cc82 100%);
}
body{background:#fff5df;font-family:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--mc-ink)}
button,select{font:inherit}
button{transition:background .15s,transform .15s,box-shadow .15s}
button:not(:disabled):active{transform:translateY(2px)}
button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
button:focus-visible,select:focus-visible{outline:3px solid #347d83;outline-offset:3px}
header{z-index:8;top:16px;left:16px;right:16px;gap:12px;align-items:flex-start}
header>*{background:#fffdf4;border:2px solid #e7d5a6;border-radius:17px;padding:10px 14px;box-shadow:0 3px 0 #e3d6b6}
header small{display:block;font-size:11px;line-height:1.4;color:var(--mc-muted)}
#characters,body #multiplayer-lobby,#panel{
  background:linear-gradient(var(--mc-surface),var(--mc-surface)) padding-box,var(--mc-rainbow) border-box;
  border:3px solid transparent;border-radius:22px;
  box-shadow:0 5px 0 #c5baa84d,0 12px 28px #675e3820;
  backdrop-filter:blur(12px);
}
#characters{position:fixed;z-index:10;top:161px;left:16px;width:230px;max-width:calc(100vw - 32px);max-height:min(66dvh,520px);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:#91bdae #fffdf4}
#characters[hidden]{display:none!important}
#characters b{font-size:13px;margin:0;letter-spacing:.1px;color:var(--mc-ink)}
#characters .choices{gap:8px}
#characters button{--choice:#daeadd;min-height:42px;padding:9px 6px;border:2px solid transparent;border-radius:14px;font-size:12px;font-weight:750;line-height:1.2;background:var(--choice);color:var(--mc-ink);box-shadow:0 3px 0 #394b3c20}
#characters button[data-character="girl"]{--choice:#f5d6e1}
#characters button[data-character="boy"]{--choice:#d0e7f2}
#characters button[data-character="cat"]{--choice:#e5dcf4}
#characters button[data-character="chick"]{--choice:#f9e6b7}
#characters button.selected{border-color:#347d67;color:#244d3e;box-shadow:0 3px 0 #347d6740}
#characters select{margin:0;min-height:38px;padding:8px 10px;border:2px solid var(--mc-border);border-radius:12px;background:#fffef9;color:var(--mc-ink);font-size:12px}
#characters select:nth-of-type(2){border-color:#e7cddd}
#characters select:nth-of-type(3){border-color:#e6d3a6}
#character-toggle{position:fixed;z-index:11;top:105px;left:16px;width:50px;height:50px;display:grid;place-items:center;padding:0;border:3px solid #83bd9d;border-radius:18px;background:#fffdf4;color:var(--mc-ink);box-shadow:0 4px 0 #83bd9d60,0 8px 20px #675e3820;font-size:24px;line-height:1}
#character-toggle[aria-expanded="true"]{background:#d6eddb;border-color:#347d67;color:#244d3e}
body #multiplayer-lobby{position:fixed;z-index:7;top:105px;right:16px;width:230px;max-width:calc(100vw - 32px);padding:15px;display:flex;flex-direction:column;gap:10px;font-size:12px}
body #multiplayer-lobby strong{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;margin:0;line-height:1.35;color:var(--mc-ink)}
body #lobby-count{display:inline-block;flex-shrink:0;padding:4px 8px;border-radius:99px;background:#d8ecdc;color:#285941;font-size:11px;font-weight:800}
body #lobby-message{font-size:12px;line-height:1.45;color:var(--mc-muted)}
body #lobby-players{margin:0;max-height:110px;overflow:auto;overflow-wrap:anywhere;line-height:1.65;font-size:12px;scrollbar-width:thin;scrollbar-color:#91bdae #fffdf4}
body #start-match{min-height:42px;width:100%;padding:10px 12px;border:2px solid #286349;border-radius:14px;font-size:12px;line-height:1.25;font-weight:800;background:#286349;color:#fffdf4;box-shadow:0 3px 0 #1d4936}
#panel{z-index:9;bottom:18px;width:min(470px,calc(100vw - 32px));min-height:78px;padding:14px 16px;gap:16px}
/* A small rung pattern connects the game controls to the board theme. */
#panel::after{content:"";position:absolute;left:14px;top:-13px;width:38px;height:11px;border:2px solid #b08a56;border-radius:5px;background:repeating-linear-gradient(90deg,#fff6df 0 7px,#b08a56 7px 10px);transform:rotate(-8deg);pointer-events:none}
#status{min-width:0;flex:1;font-size:12px;line-height:1.5;color:var(--mc-muted)}
#status strong{display:block;font-size:17px;color:var(--mc-ink)}
#roll{flex-shrink:0;min-height:46px;padding:11px 18px;border:2px solid #993f4c;border-radius:16px;font-size:13px;font-weight:800;white-space:nowrap;background:#a24756;color:#fffdf4;box-shadow:0 3px 0 #7f3241}
body #sound-toggle{right:16px!important;bottom:calc(108px + env(safe-area-inset-bottom))!important;width:46px;height:46px;padding:0!important;display:grid;place-items:center;background:#e2f1f5!important;color:#344d5a!important;border:3px solid #8fbfce!important;border-radius:16px!important;box-shadow:0 3px 0 #8fbfce60;font-size:20px;line-height:1}
body #sound-toggle[aria-pressed="true"]{background:#f1e9dc!important;border-color:#c9baa3!important;box-shadow:0 3px 0 #c9baa360}
@media(hover:hover){
 #characters button:hover{border-color:#75a994}
 #roll:not(:disabled):hover{background:#913c4b;box-shadow:0 4px 0 #7f3241}
 body #start-match:not(:disabled):hover{background:#1f553d}
 #character-toggle:hover{background:#e5f2dc}
}
@media(max-width:700px){
 header{display:none}
 #character-toggle{top:74px;left:8px;width:44px;height:44px;border-radius:15px;font-size:21px}
 #characters{top:127px;left:8px;width:min(225px,calc(100vw - 16px));max-width:none;max-height:calc(100dvh - 217px);padding:11px;gap:8px;border-radius:18px}
 #characters b,body #multiplayer-lobby strong{font-size:11px}
 #characters .choices{gap:6px}
 #characters button{font-size:11px;padding:8px 4px;min-height:38px;border-radius:11px}
 #characters select{min-height:35px;padding:7px;font-size:11px}
 body #multiplayer-lobby{top:74px;right:8px;width:min(200px,calc((100vw - 24px)/2));max-width:none;padding:10px;gap:8px;border-radius:18px}
 body #lobby-count{padding:3px 6px;font-size:10px}
 body #lobby-message,body #lobby-players{font-size:10px;line-height:1.5}
 body #lobby-players{max-height:65px}
 body #start-match{font-size:11px;min-height:38px;padding:8px 5px;border-radius:11px}
 #panel{bottom:max(8px,env(safe-area-inset-bottom));width:calc(100vw - 16px);padding:11px 12px;min-height:72px;gap:8px;border-radius:19px}
 #status{font-size:11px}
 #status strong{font-size:14px}
 #roll{min-height:42px;padding:9px 12px;font-size:12px;border-radius:13px}
 body #sound-toggle{right:8px!important;bottom:calc(92px + env(safe-area-inset-bottom))!important;width:42px;height:42px;border-radius:14px!important;font-size:19px}
}
@media(max-height:560px){
 #characters{max-height:calc(100dvh - 220px)}
 body #multiplayer-lobby{max-height:calc(100dvh - 175px);overflow-y:auto}
}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Room navigation and spectator queue */
body #room-choice{width:100%;min-height:36px;border:2px solid #d8dfcb;border-radius:11px;padding:7px;background:#fffef9;color:#34463f;font-size:12px}
body #leave-room{width:100%;min-height:38px;border:2px solid #8fbfce;border-radius:12px;padding:8px;background:#e2f1f5;color:#344d5a;font-size:12px;font-weight:750}
body #lobby-count{font-size:10px;white-space:nowrap}
@media(max-width:700px){body #room-choice,body #leave-room{font-size:10px;min-height:33px;padding:6px}body #multiplayer-lobby strong{flex-wrap:wrap;gap:5px}}

/* Custom room picker: use the board palette instead of an OS dropdown. */
body #room-choice[hidden]{display:none}
#room-picker{border:2px solid #91bdae;border-radius:15px;background:linear-gradient(120deg,#e3f2e4,#e0edf8 60%,#ece1f5);box-shadow:0 3px 0 #91bdae35;overflow:hidden}
#room-picker summary{display:flex;align-items:center;gap:9px;min-height:54px;padding:9px 10px;cursor:pointer;list-style:none}
#room-picker summary::-webkit-details-marker{display:none}
#room-picker summary:focus-visible{outline:3px solid #347d83;outline-offset:-3px;border-radius:12px}
.room-picker-icon{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border:2px solid #91bdae;border-radius:10px;background:#fff8dc;font-size:20px;transform:rotate(-6deg)}
.room-picker-heading{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.room-picker-heading small{font-size:8px;font-weight:850;letter-spacing:1px;color:#52735f}
#room-picker-label{font-size:13px;font-weight:850;color:#2c5542}
.room-picker-chevron{font-size:23px;line-height:1;color:#52735f;transition:transform .15s}
#room-picker[open] .room-picker-chevron{transform:rotate(180deg)}
.room-picker-menu{border-top:2px dashed #a3c6b2;padding:10px;background:linear-gradient(145deg,#fff2d5,#f4e9f5 55%,#e2f1ec)}
.room-picker-menu p{margin:0 0 9px;font-size:11px;line-height:1.4;color:#637269}
.room-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
body #room-picker button{--room-bg:#dcf0df;--room-edge:#8db99c;display:flex;align-items:center;justify-content:center;gap:5px;min-height:38px;padding:6px 4px;border:2px solid var(--room-edge);border-radius:10px;background:var(--room-bg);color:#34463f;font-size:10px;font-weight:800;box-shadow:0 2px 0 #34463f18}
body #room-picker button:nth-child(5n+2){--room-bg:#ffe9b4;--room-edge:#d4b064}
body #room-picker button:nth-child(5n+3){--room-bg:#e8dcf7;--room-edge:#b49bd3}
body #room-picker button:nth-child(5n+4){--room-bg:#d6edf7;--room-edge:#89bacd}
body #room-picker button:nth-child(5n+5){--room-bg:#f8dce5;--room-edge:#d39eb2}
body #room-picker button.room-auto{grid-column:1/-1;font-size:11px}
body #room-picker button[aria-pressed="true"]{border-color:#286349;background:#286349;color:#fffdf4;box-shadow:0 2px 0 #1d4936}
.room-number{display:grid;place-items:center;min-width:20px;height:20px;border-radius:6px;background:#fff8;font-size:10px;color:#34463f}
.room-picker-note{display:block;margin-top:10px;font-size:10px;line-height:1.45;color:#637269}
@media(hover:hover){body #room-picker button:hover{filter:brightness(.96);transform:translateY(-1px)}#room-picker summary:hover{background:#ffffff35}}
@media(max-width:700px){
 #room-picker{border-radius:12px}
 #room-picker summary{min-height:47px;padding:7px;gap:6px}
 .room-picker-icon{width:27px;height:27px;font-size:17px;border-radius:8px}
 .room-picker-heading small{font-size:7px;letter-spacing:.6px}
 #room-picker-label{font-size:11px}
 .room-picker-menu{padding:7px}
 .room-picker-menu p,.room-picker-note{font-size:9px}
 .room-picker-grid{gap:6px}
 body #room-picker button{font-size:9px;min-height:36px;gap:3px}
 .room-number{min-width:17px;height:18px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.room-picker-chevron{transition:none}}

/* Keep the expanded desktop lobby inside the viewport, above sound controls. */
@media(min-width:701px){
 body #multiplayer-lobby{
  max-height:calc(100dvh - 265px);
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:#91bdae #fff3dc;
 }
 body #multiplayer-lobby>*{flex-shrink:0}
}

/* Compact room launcher, matching the character picker. */
body #multiplayer-lobby[hidden]{display:none!important}
#room-toggle{position:fixed;z-index:11;top:105px;right:16px;width:50px;height:50px;display:grid;place-items:center;padding:0;border:3px solid #8fbfce;border-radius:18px;background:#e2f1f5;color:#344d5a;box-shadow:0 4px 0 #8fbfce60,0 8px 20px #675e3820;font-size:24px;line-height:1}
#room-toggle[aria-expanded="true"]{background:#d6eddb;border-color:#347d67;color:#244d3e}
body #multiplayer-lobby{top:161px;max-height:calc(100dvh - 321px);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#91bdae #fff3dc}
body #multiplayer-lobby>*{flex-shrink:0}
@media(hover:hover){#room-toggle:hover{background:#d6ebf0}}
@media(max-width:700px){
 #room-toggle{top:74px;right:8px;width:44px;height:44px;border-radius:15px;font-size:21px}
 body #multiplayer-lobby{top:127px;width:min(230px,calc(100vw - 16px));max-height:calc(100dvh - 227px)}
}

/* Styled avatar choices, matching the rainbow room picker. */
#characters select[hidden]{display:none!important}
#characters .avatar-picker[hidden]{display:none!important}
#characters .avatar-picker{border:2px solid #a6cbb1;border-radius:14px;background:linear-gradient(115deg,#e0efde,#f1ead1);overflow:hidden;flex-shrink:0}
#characters .avatar-picker:nth-of-type(2){border-color:#c3a4d8;background:linear-gradient(115deg,#e7ddf3,#f5dfe8)}
#characters .avatar-picker:nth-of-type(3){border-color:#dfbd7b;background:linear-gradient(115deg,#fae4b8,#f7dacd)}
#characters .avatar-picker:nth-of-type(4){border-color:#91bfce;background:linear-gradient(115deg,#d9eef1,#e4e0f6)}
.avatar-picker summary{display:flex;align-items:center;gap:9px;padding:8px 10px;min-height:49px;cursor:pointer;list-style:none}
.avatar-picker summary::-webkit-details-marker{display:none}
.avatar-picker summary:focus-visible{outline:3px solid #347d83;outline-offset:-3px;border-radius:11px}
.avatar-picker-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:#fff8;font-size:18px;flex-shrink:0}
.avatar-picker-heading{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.avatar-picker-heading small{font-size:9px;color:#637269;font-weight:750}
.avatar-picker-value{font-size:12px;color:#34463f;font-weight:850;overflow-wrap:anywhere}
.avatar-picker-arrow{font-size:22px;color:#637269;line-height:1}
.avatar-picker[open] .avatar-picker-arrow{transform:rotate(180deg)}
.avatar-picker-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px;border-top:1px dashed #9fb5a6;background:linear-gradient(145deg,#fff0d1,#eddff4);max-height:190px;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#91bdae #fff3dc}
#characters .avatar-picker-options button{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 4px;min-height:38px;border:2px solid #bdd4bd;border-radius:10px;background:#e0eed7;color:#34463f;font-size:10px;font-weight:750;overflow-wrap:anywhere;box-shadow:0 2px 0 #34463f18}
#characters .avatar-picker-options button:nth-child(3n+2){background:#e7dcf3;border-color:#c3a7d7}
#characters .avatar-picker-options button:nth-child(3n){background:#f7e2b4;border-color:#d5b878}
#characters .avatar-picker-options button[aria-pressed="true"]{background:#286349;border-color:#286349;color:#fffdf4}
.avatar-color-swatch{width:16px;height:16px;flex-shrink:0;border-radius:50%;border:1px solid #34463f55}
@media(max-width:700px){
 .avatar-picker summary{padding:7px 8px;min-height:45px;gap:7px}
 .avatar-picker-value{font-size:11px}
 .avatar-picker-options{max-height:160px;padding:7px}
 #characters .avatar-picker-options button{font-size:10px;min-height:36px}
}

/* Portraits are rendered from the actual avatar heads. */
#character-toggle .character-portrait{display:block;width:100%;height:100%;object-fit:contain;border-radius:14px;pointer-events:none}
#character-toggle[aria-expanded="true"]::after{content:"×";position:absolute;right:-4px;top:-5px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#347d67;color:#fffdf4;font-size:15px;border:2px solid #fffdf4}
#characters .choices button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;min-height:83px}
#characters .choices .character-portrait{display:block;width:54px;height:54px;object-fit:contain;pointer-events:none}
#characters .choices button span{font-size:11px;line-height:1.2}
@media(max-width:700px){#characters .choices button{min-height:75px}#characters .choices .character-portrait{width:46px;height:46px}}