*{box-sizing:border-box}html{margin:0;padding:0}body{margin:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(135deg,#eef2ff,#f7f9fc);color:#1f2430}.container{max-width:1500px;margin:auto;padding:22px 18px}header{text-align:center;margin-bottom:16px}.logo{font-size:48px;font-weight:900;letter-spacing:-2px}.logo span{vertical-align:middle}.logo+ p{margin:0;color:#6b7280;font-weight:600}.card{background:rgba(255,255,255,.96);border-radius:18px;box-shadow:0 10px 35px rgba(31,36,48,.10);border:1px solid rgba(220,225,235,.7)}.lobby{max-width:1000px;margin:25px auto;padding:28px}.hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(120deg,#f4f0ff,#eef7ff);border-radius:16px;padding:24px;margin-bottom:22px}.hero h2{font-size:32px;margin:8px 0}.hero p{color:#687184;max-width:650px}.heroArt{font-size:34px;line-height:1.1;text-align:center}.pill,.badge{display:inline-block;background:#eee8ff;color:#6c43c5;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800}.forms{display:grid;grid-template-columns:1fr 1fr;gap:18px}.formBox{border:1px solid #e1e5ed;border-radius:14px;padding:20px}.formBox h3{margin-top:0;font-size:22px}.formBox label{display:block;font-size:13px;font-weight:800;margin:12px 0 5px;color:#505867}.formBox input,.formBox select{width:100%;padding:12px;border:1px solid #cfd5df;border-radius:9px;font-size:15px;background:#fff}.avatars{display:flex;gap:6px;flex-wrap:wrap}.avatar{padding:6px 8px;font-size:21px;background:#f1f3f7;border:2px solid transparent}.avatar.selected{border-color:#7b55d9;background:#ece6ff}.primary,.secondary{width:100%;margin-top:16px;padding:13px 16px;border:0;border-radius:10px;font-weight:900;cursor:pointer}.primary{background:#6c43c5;color:white}.secondary{background:#202735;color:white}.small{font-size:12px;color:#747b88}.topbar{padding:13px 16px;display:flex;gap:15px;align-items:center;justify-content:space-between;flex-wrap:wrap}.topbar button,.tools button,.guessForm button,.ghost{padding:9px 12px;border:0;border-radius:9px;cursor:pointer;font-weight:800}.topbar button{background:#eef0f4}.badge{margin-left:8px;background:#eaf6ef;color:#227544}.notice{margin:12px 0;padding:12px;text-align:center;font-weight:800}.layout{display:grid;grid-template-columns:220px minmax(500px,1fr) 330px;gap:14px}.panel,.chat{padding:15px}.panel h3,.chat h3{margin:0 0 12px}.panel ul{padding:0;margin:0;list-style:none}.panel li{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:9px 6px;border-bottom:1px solid #edf0f4;font-weight:700}.panel li.spectator{opacity:.55}.pname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.start{width:100%;margin-top:14px;padding:11px;border:0;border-radius:9px;background:#248b51;color:#fff;font-weight:900;cursor:pointer}.ghost{width:100%;margin-top:8px;background:#eef1f6}.board{padding:12px}.boardHead{display:flex;gap:8px;align-items:center;padding:2px 3px 9px;font-weight:800;color:#5d6470}canvas{display:block;width:100%;background:#fff;border:2px solid #dce1e9;border-radius:12px;aspect-ratio:5/3;touch-action:none}.tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.tools button{background:#f0f2f5}.chat{display:flex;flex-direction:column}.chat #messages{height:450px;overflow:auto;border:1px solid #dfe3ea;border-radius:10px;padding:9px;margin-bottom:8px;background:#fbfcfe}.msg{padding:5px 2px;line-height:1.3}.guessForm{display:flex;gap:7px}.guessForm input{flex:1;min-width:0;padding:12px;border:1px solid #cfd5df;border-radius:9px}.guessForm button{background:#202735;color:white}.guessForm input:disabled{background:#f1f3f6}.overlay{position:fixed;inset:0;background:rgba(16,20,30,.60);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}.dialog{background:#fff;border-radius:20px;padding:30px;width:min(520px,100%);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25)}.bigIcon{font-size:46px}.choice{display:flex;align-items:center;justify-content:space-between;width:100%;margin:10px 0;padding:15px 17px;border:1px solid #e0e4eb;border-radius:12px;background:#f6f7fa;cursor:pointer;font-size:16px}.choice:hover{transform:translateY(-1px);background:#eee9ff;border-color:#c7b5ef}.choice span{text-transform:uppercase;font-size:11px;color:#747b88}.choiceTime{margin-top:12px;color:#6c43c5}.rank{display:flex;justify-content:space-between;padding:11px 7px;border-bottom:1px solid #eee}.rank b{font-size:18px}.checkRow{display:flex!important;align-items:center;gap:8px;cursor:pointer}.checkRow input{width:auto!important}.badge{white-space:nowrap}.mobileActions{display:flex;gap:7px;margin-top:8px}.mobileActions button{padding:9px 12px;border:0;border-radius:9px;background:#eef1f6;font-weight:800;cursor:pointer}.mobileOnly{display:none}.canvasWrap{width:100%;overflow:hidden;border-radius:12px}.canvasWrap canvas{width:100%;height:auto;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.quickBox{background:linear-gradient(135deg,#f8f4ff,#f2fbff)}.quickBtn{width:100%;margin-top:16px;padding:13px 16px;border:0;border-radius:10px;background:#7b45d7;color:#fff;font-weight:900;cursor:pointer;font-size:15px}.quickBtn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.mobileNav{display:none}
@media(max-width:1100px){.layout{grid-template-columns:180px 1fr}.chat{grid-column:1/-1}.chat #messages{height:190px}}
@media(max-width:750px){
 :root{--mobile-nav:52px;--mobile-guess:58px}
 html,body{width:100%;min-height:100%;overflow-x:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
 body{background:#f4f6fa}
 .container{width:100%;max-width:none;padding:0 0 calc(var(--mobile-nav) + var(--mobile-guess) + 12px)}
 header{padding:9px 12px 6px;margin:0}.logo{font-size:30px;letter-spacing:-1px}.logo+ p{font-size:11px}
 #game{width:100%}
 .topbar{position:sticky;top:0;z-index:20;border-radius:0;padding:7px 9px;gap:5px;min-height:44px;font-size:12px;box-shadow:0 4px 14px rgba(31,36,48,.12)}
 .topbar>div:first-child{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar .badge{margin-left:3px;font-size:9px;padding:3px 6px}.topbar>span{white-space:nowrap}.topbar button{padding:7px 8px;font-size:11px}
 .notice{margin:5px 7px;padding:6px 8px;border-radius:10px;font-size:11px;line-height:1.25}
 .layout{display:block;width:100%;padding:0 6px}
 .board{width:100%;padding:6px;border-radius:13px;box-shadow:0 5px 18px rgba(31,36,48,.10)}
 .boardHead{padding:0 3px 5px;font-size:12px;min-height:24px}
 .canvasWrap{width:100%;background:#fff;border-radius:9px}
 .canvasWrap canvas{width:100%;height:auto;aspect-ratio:5/3;border-width:1px;border-radius:9px}
 .mobileActions{display:none}
 .tools{margin:5px -1px 0;padding:5px 2px;gap:5px;overflow-x:auto;flex-wrap:nowrap;background:#fff;border-radius:9px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tools::-webkit-scrollbar{display:none}.tools button{flex:0 0 auto;min-width:40px;min-height:38px;padding:7px 9px;font-size:12px}.tools button:first-child,.tools button:nth-child(2),.tools button:nth-child(3),.tools button:nth-child(4),.tools button:nth-child(5){font-size:17px;padding:5px 7px}
 .panel{position:fixed;z-index:31;left:0;top:0;bottom:0;width:min(86vw,330px);padding:14px;background:#fff;border-radius:0 18px 18px 0;transform:translateX(-105%);transition:transform .22s ease;overflow:auto;box-shadow:12px 0 35px rgba(0,0,0,.18)}
 .chat{position:fixed;z-index:30;left:0;right:0;bottom:var(--mobile-nav);height:var(--mobile-guess);padding:7px 8px;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -5px 20px rgba(0,0,0,.15);transition:height .22s ease;overflow:hidden}
 .chat h3{display:none}.chat #messages{height:calc(100% - 48px);margin:0 0 5px;border-radius:10px}.guessForm{height:45px;flex:0 0 45px}.guessForm input,.guessForm button{min-height:42px;height:42px;font-size:16px}.guessForm button{padding:8px 13px}
 body.mobile-players-open .panel{transform:translateX(0)}
 body.mobile-chat-open .chat{height:min(46vh,420px)}
 .mobileNav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;left:0;right:0;bottom:0;height:var(--mobile-nav);padding:5px 6px;z-index:40;background:rgba(255,255,255,.98);border-top:1px solid #dfe3ea;box-shadow:0 -4px 18px rgba(31,36,48,.10);backdrop-filter:blur(8px)}
 .mobileNav button{border:0;border-radius:9px;background:#eef1f6;color:#252b38;font-weight:900;font-size:11px;padding:5px 2px}.mobileNav button.active{background:#e9e0ff;color:#6238b7}
 .mobileNav button span{display:block;font-size:17px;line-height:18px}
 .layout>.panel,.layout>.chat{grid-column:auto}
 .start{margin-top:12px}.panel li{padding:10px 4px}
 .overlay{padding:8px}.dialog{padding:20px 14px;border-radius:17px;width:min(95vw,520px);max-height:90vh;overflow:auto}.choice{min-height:54px;font-size:16px;margin:8px 0}.choiceTime{font-size:13px}
 #chooser{z-index:60}
 #modal{z-index:60}
 .lobby{margin:8px;border-radius:15px;padding:14px}.hero{padding:14px;margin-bottom:12px}.heroArt{display:none}.hero h2{font-size:23px}.hero p{font-size:12px}.forms{grid-template-columns:1fr;gap:10px}.formBox{padding:13px}.formBox h3{font-size:19px}.formBox label{margin:9px 0 4px}.formBox input,.formBox select{padding:11px;font-size:16px}.avatar{font-size:19px;padding:5px 7px}
 .quickBtn,.primary,.secondary{padding:12px;margin-top:12px}
 .quickBox{order:-1}
 .mobileOnly{display:block}
 .panel .mobileOnly{display:block}
}
@media(max-width:420px){.topbar{font-size:11px}.topbar button{font-size:10px}.notice{font-size:10px}.tools button{min-width:38px;padding:7px 8px}.mobileNav button{font-size:10px}.mobileNav button span{font-size:16px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:900px){
 :root{--mobile-nav:48px;--mobile-guess:54px}
 .container{padding-bottom:calc(var(--mobile-nav) + var(--mobile-guess) + 6px)}
 header{display:none}.notice{margin:3px 6px;padding:4px}.boardHead{display:none}.canvasWrap canvas{aspect-ratio:16/9}.tools{margin-top:3px}.chat{height:var(--mobile-guess)}
}

/* V9 mobile keyboard-aware layout */
html{min-height:100%;}
body{min-height:100dvh;}
@media(max-width:750px){
 :root{--keyboard-inset:0px;--visual-height:100dvh;--mobile-nav:52px;--mobile-guess:58px}
 html,body{width:100%;min-height:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;overscroll-behavior:none}
 body{padding:0;margin:0}
 .container{min-height:100dvh;padding-bottom:calc(var(--mobile-nav) + var(--mobile-guess) + var(--keyboard-inset) + env(safe-area-inset-bottom,0px))}
 #game{min-height:100dvh}
 .topbar{position:sticky;top:0;z-index:50}
 .chat{bottom:calc(var(--mobile-nav) + var(--keyboard-inset) + env(safe-area-inset-bottom,0px));
        max-height:min(46dvh,420px);}
 .mobileNav{bottom:calc(var(--keyboard-inset) + env(safe-area-inset-bottom,0px));}
 .guessForm{padding-bottom:env(safe-area-inset-bottom,0px)}
 .guessForm input{font-size:16px;line-height:1.2;min-height:44px;}
 body.keyboard-open .chat{height:min(46dvh,420px);z-index:80;}
 body.keyboard-open .mobileNav{z-index:90;}
 body.keyboard-open .board{margin-bottom:4px}
 body.keyboard-open .notice{display:none}
 body.keyboard-open .tools{display:none}
 body.keyboard-open .container{padding-bottom:calc(var(--mobile-guess) + var(--mobile-nav) + var(--keyboard-inset) + env(safe-area-inset-bottom,0px));}
 body.keyboard-open .chat #messages{height:calc(100% - 50px);}
 body.keyboard-open .chat .guessForm{height:48px;flex-basis:48px;}
}
@media(max-width:420px){
 :root{--mobile-nav:50px;--mobile-guess:56px}
 .chat{bottom:calc(var(--mobile-nav) + var(--keyboard-inset) + env(safe-area-inset-bottom,0px));}
 .mobileNav{bottom:calc(var(--keyboard-inset) + env(safe-area-inset-bottom,0px));}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:900px){
 .container{padding-bottom:calc(var(--mobile-nav) + var(--mobile-guess) + var(--keyboard-inset) + env(safe-area-inset-bottom,0px));}
}

/* V10 mobile chat behavior: chat expands only when the user chooses Chat/Guess;
   touching the drawing board/tools collapses it and dismisses the keyboard. */
@media(max-width:750px){
 .chat{height:var(--mobile-guess);transition:height .2s ease,transform .2s ease;}
 .chat #messages{display:none;}
 .chat .guessForm{display:flex;}
 body.mobile-chat-open .chat{height:min(46dvh,420px);}
 body.mobile-chat-open .chat #messages{display:block;}
 body.mobile-chat-open .chat .guessForm{display:flex;}
 body:not(.mobile-chat-open) .chat{box-shadow:0 -2px 12px rgba(0,0,0,.10);}
 body.keyboard-open .chat{height:min(46dvh,420px);}
}

/* V11: iOS/Android keyboard split layout.
   When the guess keyboard is open, the visible browser viewport is split into
   a drawing area and a chat/guess area. The OS keyboard remains below them.
   This prevents the chat panel from overlapping the canvas. */
@media (max-width:750px){
  body.keyboard-open{
    overflow:hidden;
    position:fixed;
    width:100%;
    left:0;
    right:0;
    top:0;
  }
  body.keyboard-open .container{
    height:var(--visual-height);
    min-height:var(--visual-height);
    padding:0;
    overflow:hidden;
  }
  body.keyboard-open #game{
    height:var(--visual-height);
    min-height:0;
    overflow:hidden;
  }
  body.keyboard-open .topbar{
    position:relative;
    top:auto;
    height:46px;
    min-height:46px;
    flex-wrap:nowrap;
    overflow:hidden;
  }
  body.keyboard-open .notice,
  body.keyboard-open .mobileNav,
  body.keyboard-open .mobileActions,
  body.keyboard-open .tools,
  body.keyboard-open .panel{
    display:none !important;
  }
  body.keyboard-open .layout{
    height:calc(100% - 46px);
    min-height:0;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,56%) minmax(0,44%);
    gap:5px;
    padding:0 5px 5px;
    overflow:hidden;
  }
  body.keyboard-open .board{
    grid-row:1;
    min-height:0;
    height:100%;
    display:flex;
    flex-direction:column;
    padding:5px;
    overflow:hidden;
  }
  body.keyboard-open .boardHead{
    flex:0 0 20px;
    min-height:20px;
    padding:0 3px 3px;
    font-size:11px;
  }
  body.keyboard-open .canvasWrap{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  body.keyboard-open .canvasWrap canvas{
    width:100%;
    height:100%;
    max-height:100%;
    aspect-ratio:auto;
    object-fit:contain;
    border-radius:7px;
  }
  body.keyboard-open .chat{
    grid-row:2;
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    top:auto;
    z-index:35;
    width:100%;
    height:100%;
    max-height:none;
    min-height:0;
    padding:5px;
    border-radius:11px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 -2px 10px rgba(0,0,0,.12);
  }
  body.keyboard-open .chat h3{
    display:block;
    flex:0 0 18px;
    height:18px;
    margin:0 3px 3px;
    font-size:11px;
  }
  body.keyboard-open .chat #messages{
    display:block;
    flex:1 1 auto;
    min-height:0;
    height:auto;
    margin:0 0 4px;
    padding:5px 7px;
    overflow:auto;
    border-radius:8px;
    font-size:11px;
  }
  body.keyboard-open .chat .guessForm{
    display:flex;
    flex:0 0 44px;
    height:44px;
    min-height:44px;
    gap:5px;
    padding:0;
  }
  body.keyboard-open .chat .guessForm input{
    flex:1 1 auto;
    width:auto;
    min-width:0;
    min-height:44px;
    height:44px;
    padding:8px 10px;
    font-size:16px;
  }
  body.keyboard-open .chat .guessForm button{
    flex:0 0 62px;
    min-width:62px;
    min-height:44px;
    height:44px;
    padding:7px 9px;
    font-size:13px;
  }
}

@media (max-width:420px){
  body.keyboard-open .topbar{height:43px;min-height:43px;padding:5px 7px;font-size:10px}
  body.keyboard-open .layout{height:calc(100% - 43px);grid-template-rows:minmax(0,56%) minmax(0,44%);padding:0 4px 4px}
  body.keyboard-open .chat #messages{font-size:10px}
  body.keyboard-open .chat .guessForm{flex-basis:43px;height:43px;min-height:43px}
  body.keyboard-open .chat .guessForm input,
  body.keyboard-open .chat .guessForm button{height:43px;min-height:43px}
}

/* V12 mobile keyboard behavior: the chat/guess panel NEVER floats over the canvas.
   When the OS keyboard is visible, the browser's visible viewport is divided into
   60% drawing + 40% chat. The OS keyboard remains below the visual viewport. */
@media (max-width:750px){
  body.keyboard-open,
  body.keyboard-open .container,
  body.keyboard-open #game{position:fixed;inset:0;width:100%;height:var(--visual-height);min-height:0;overflow:hidden;}

  body.keyboard-open .container{padding:0!important;}
  body.keyboard-open #game{display:block;}

  body.keyboard-open .topbar{
    height:42px!important;min-height:42px!important;padding:4px 7px!important;
    overflow:hidden;flex-wrap:nowrap;
  }

  body.keyboard-open .notice,
  body.keyboard-open .mobileNav,
  body.keyboard-open .mobileActions,
  body.keyboard-open .tools,
  body.keyboard-open .panel{display:none!important;}

  body.keyboard-open .layout{
    display:grid!important;grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,60%) minmax(0,40%)!important;
    height:calc(var(--visual-height) - 42px)!important;
    min-height:0!important;gap:4px!important;padding:0 4px 4px!important;
    overflow:hidden!important;
  }

  body.keyboard-open .board{
    grid-row:1!important;height:100%!important;min-height:0!important;
    padding:4px!important;overflow:hidden!important;
  }
  body.keyboard-open .boardHead{display:none!important;}
  body.keyboard-open .canvasWrap{
    height:100%!important;min-height:0!important;display:flex!important;
    align-items:center;justify-content:center;overflow:hidden!important;
  }
  body.keyboard-open .canvasWrap canvas{
    width:100%!important;height:100%!important;max-height:100%!important;
    aspect-ratio:auto!important;object-fit:contain!important;border-radius:7px;
  }

  body.keyboard-open .chat{
    grid-column:1!important;grid-row:2!important;
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;height:100%!important;max-height:none!important;min-height:0!important;
    padding:5px!important;margin:0!important;z-index:2!important;
    display:flex!important;flex-direction:column!important;overflow:hidden!important;
    border-radius:10px!important;box-shadow:0 -1px 8px rgba(0,0,0,.10)!important;
  }
  body.keyboard-open .chat h3{
    display:block!important;flex:0 0 17px!important;height:17px!important;margin:0 3px 3px!important;font-size:10px!important;
  }
  body.keyboard-open .chat #messages{
    display:block!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;
    margin:0 0 4px!important;padding:4px 6px!important;overflow:auto!important;font-size:10px!important;
  }
  body.keyboard-open .chat .guessForm{
    display:flex!important;flex:0 0 42px!important;height:42px!important;min-height:42px!important;
    gap:5px!important;padding:0!important;margin:0!important;
  }
  body.keyboard-open .chat .guessForm input{
    flex:1 1 auto!important;width:auto!important;min-width:0!important;height:42px!important;min-height:42px!important;
    font-size:16px!important;padding:7px 9px!important;
  }
  body.keyboard-open .chat .guessForm button{
    flex:0 0 60px!important;width:60px!important;height:42px!important;min-height:42px!important;
    font-size:12px!important;padding:6px 8px!important;
  }
}

/* V13 MOBILE KEYBOARD OVERLAY MODE
   The chat stays in its normal bottom position. When the OS keyboard opens,
   the keyboard overlays the bottom portion of the page instead of pushing
   the chat upward. The drawing board remains visible in the upper area. */
@media (max-width:750px){
  body.keyboard-overlay-mode{
    overflow:hidden!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:0!important;
    width:100%!important;
    height:100vh!important;
    min-height:100vh!important;
  }
  body.keyboard-overlay-mode .container,
  body.keyboard-overlay-mode #game{
    width:100%!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
    overflow:hidden!important;
  }
  body.keyboard-overlay-mode .container{padding:0!important}
  body.keyboard-overlay-mode .topbar{
    position:absolute!important;
    left:0;right:0;top:0;
    height:44px;min-height:44px;
    z-index:20;
  }
  body.keyboard-overlay-mode .notice{position:absolute!important;top:44px;left:6px;right:6px;z-index:19;margin:4px 0!important}
  body.keyboard-overlay-mode .layout{
    display:block!important;
    position:absolute!important;
    left:0;right:0;top:72px;bottom:0;
    height:auto!important;
    padding:0 6px!important;
    overflow:hidden!important;
  }
  body.keyboard-overlay-mode .board{
    position:absolute!important;
    left:6px;right:6px;top:0;
    height:calc(60vh - 72px)!important;
    min-height:0!important;
    max-height:none!important;
    padding:6px!important;
    overflow:hidden!important;
    z-index:5;
  }
  body.keyboard-overlay-mode .boardHead{display:none!important}
  body.keyboard-overlay-mode .canvasWrap{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body.keyboard-overlay-mode .canvasWrap canvas{
    width:100%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
  }
  body.keyboard-overlay-mode .tools,
  body.keyboard-overlay-mode .mobileActions{display:none!important}
  body.keyboard-overlay-mode .chat{
    position:fixed!important;
    left:0!important;right:0!important;
    bottom:0!important;
    height:150px!important;
    max-height:150px!important;
    z-index:30!important;
    transform:none!important;
    overflow:hidden!important;
    transition:none!important;
    display:flex!important;
    flex-direction:column!important;
    background:#fff!important;
  }
  body.keyboard-overlay-mode .chat h3{
    display:none!important;
  }
  body.keyboard-overlay-mode .chat #messages{
    display:block!important;
    order:2!important;
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    font-size:11px!important;
    padding:4px 7px!important;
  }
  body.keyboard-overlay-mode .chat .guessForm{
    display:flex!important;
    order:1!important;
    height:48px!important;
    min-height:48px!important;
    flex:0 0 48px!important;
    background:#fff!important;
    padding:4px!important;
    z-index:32!important;
  }
  body.keyboard-overlay-mode .chat .guessForm input,
  body.keyboard-overlay-mode .chat .guessForm button{height:42px!important;min-height:42px!important;font-size:16px!important}
  body.keyboard-overlay-mode .mobileNav{display:none!important}
  body.keyboard-overlay-mode .panel{display:none!important}
}

/* V16 MOBILE CHAT ALWAYS VISIBLE
   Mobile chat/messages stay in the normal bottom area. The Chat button only
   focuses the guess input; it does not move or expand the chat over the canvas.
   When the OS keyboard opens, it overlays the bottom chat naturally. */
@media (max-width:750px){
  .chat{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:calc(var(--mobile-nav) + env(safe-area-inset-bottom,0px))!important;
    width:100%!important;
    height:150px!important;
    max-height:150px!important;
    min-height:150px!important;
    display:flex!important;
    flex-direction:column!important;
    padding:7px 8px!important;
    z-index:30!important;
    background:#fff!important;
    border-radius:16px 16px 0 0!important;
    overflow:hidden!important;
    transform:none!important;
  }
  .chat h3{display:block!important;flex:0 0 22px!important;height:22px!important;margin:0 3px 4px!important;font-size:12px!important;}
  .chat #messages{
    display:block!important;
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 0 5px!important;
    padding:5px 7px!important;
    overflow-y:auto!important;
    border:1px solid #dfe3ea!important;
    border-radius:9px!important;
    background:#fbfcfe!important;
    font-size:11px!important;
  }
  .chat .guessForm{
    display:flex!important;
    flex:0 0 44px!important;
    height:44px!important;
    min-height:44px!important;
    gap:6px!important;
    padding:0!important;
    margin:0!important;
  }
  .chat .guessForm input{
    flex:1 1 auto!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    font-size:16px!important;
    padding:7px 9px!important;
  }
  .chat .guessForm button{
    flex:0 0 62px!important;
    width:62px!important;
    height:42px!important;
    min-height:42px!important;
    font-size:12px!important;
  }
  body.mobile-chat-open .chat,
  body.keyboard-open .chat,
  body.keyboard-overlay-mode .chat{
    height:150px!important;
    max-height:150px!important;
    min-height:150px!important;
    transform:none!important;
  }
  body.mobile-chat-open .chat #messages,
  body.keyboard-open .chat #messages,
  body.keyboard-overlay-mode .chat #messages{display:block!important;}
}

@media(max-width:420px){
  .chat{height:150px!important;max-height:150px!important;min-height:150px!important;}
}


/* V17 FINAL MOBILE UX
   - Chat never moves or expands when the input receives focus.
   - The OS keyboard overlays the lower part of the fixed chat panel.
   - Canvas stays in its normal document position.
   - Fullscreen/Rotate mobile controls removed.
   - Players drawer starts below the top game ribbon, so it never covers it.
*/
@media (max-width:750px){
  html,body{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    height:auto!important;
    min-height:100%!important;
    position:static!important;
  }
  body.keyboard-overlay-mode,
  body.keyboard-open{
    position:static!important;
    height:auto!important;
    min-height:100%!important;
    overflow-y:auto!important;
  }

  /* Never apply keyboard reflow rules from earlier versions. */
  body.keyboard-overlay-mode .container,
  body.keyboard-open .container,
  body.keyboard-overlay-mode #game,
  body.keyboard-open #game{
    position:static!important;
    inset:auto!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.keyboard-overlay-mode .layout,
  body.keyboard-open .layout{
    position:static!important;
    display:block!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    padding:0 6px!important;
  }
  body.keyboard-overlay-mode .board,
  body.keyboard-open .board{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body.keyboard-overlay-mode .canvasWrap,
  body.keyboard-open .canvasWrap{
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.keyboard-overlay-mode .canvasWrap canvas,
  body.keyboard-open .canvasWrap canvas{
    width:100%!important;
    height:auto!important;
    aspect-ratio:5/3!important;
    object-fit:contain!important;
  }

  /* Chat is a normal bottom panel in the page. It does NOT react to focus.
     On mobile Safari/Chrome the OS keyboard covers the bottom part naturally. */
  .chat,
  body.mobile-chat-open .chat,
  body.keyboard-open .chat,
  body.keyboard-overlay-mode .chat{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:var(--mobile-nav)!important;
    width:100%!important;
    height:150px!important;
    min-height:150px!important;
    max-height:150px!important;
    z-index:30!important;
    transform:none!important;
    transition:none!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#fff!important;
    border-radius:16px 16px 0 0!important;
  }

  .chat h3{
    display:block!important;
    flex:0 0 20px!important;
    height:20px!important;
    margin:0 3px 3px!important;
    font-size:12px!important;
  }
  .chat #messages{
    display:block!important;
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    margin:0 0 4px!important;
    padding:4px 7px!important;
    font-size:11px!important;
  }
  .chat .guessForm{
    display:flex!important;
    flex:0 0 44px!important;
    height:44px!important;
    min-height:44px!important;
    gap:5px!important;
    margin:0!important;
    padding:0!important;
  }

  /* Player drawer: begins below the top room ribbon and sits above game content. */
  .panel,
  body.mobile-players-open .panel{
    position:fixed!important;
    left:0!important;
    top:54px!important;
    bottom:var(--mobile-nav)!important;
    width:min(86vw,330px)!important;
    z-index:45!important;
    transform:translateX(-105%)!important;
    overflow:auto!important;
    border-radius:0 18px 18px 0!important;
  }
  body.mobile-players-open .panel{
    transform:translateX(0)!important;
  }
  .topbar{z-index:60!important;position:sticky!important;top:0!important;}
  .mobileNav{
    z-index:50!important;
    grid-template-columns:repeat(2,1fr)!important;
  }
  .mobileNav button{min-height:40px!important;}

  /* Old keyboard-mode hiding rules must not hide useful chat/messages. */
  body.keyboard-overlay-mode .mobileNav,
  body.keyboard-open .mobileNav{display:grid!important;}
  body.keyboard-overlay-mode .chat #messages,
  body.keyboard-open .chat #messages{display:block!important;}
  body.keyboard-overlay-mode .chat .guessForm,
  body.keyboard-open .chat .guessForm{display:flex!important;}
}

@media(max-width:420px){
  .chat,
  body.mobile-chat-open .chat,
  body.keyboard-open .chat,
  body.keyboard-overlay-mode .chat{
    bottom:var(--mobile-nav)!important;
    height:150px!important;
    min-height:150px!important;
    max-height:150px!important;
  }
  .panel,body.mobile-players-open .panel{top:50px!important;}
}


/* V18: fixed mobile game shell. Canvas + chat never reflow when keyboard opens.
   The native phone keyboard is allowed to cover the bottom chat area. */
@media (max-width:750px){
  html,body{width:100%;height:100%;margin:0;overflow:hidden!important;position:fixed;inset:0;}
  body{touch-action:pan-x pan-y;background:#f4f6fa;}
  .container{width:100%;height:100%;min-height:0;padding:0!important;overflow:hidden;}
  header{display:none}
  #game{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;background:#f4f6fa;}
  #game .topbar{
    position:absolute!important;left:0;right:0;top:0;height:48px;min-height:48px;
    z-index:100;padding:6px 8px;border-radius:0;overflow:hidden;
  }
  #game .notice{
    position:absolute!important;left:6px;right:6px;top:50px;height:30px;margin:0!important;
    z-index:90;padding:5px 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  }
  #game .layout{
    position:absolute!important;left:0;right:0;top:84px;bottom:184px;
    width:100%;height:auto;padding:0 6px!important;display:block!important;overflow:hidden!important;
  }
  #game .board{
    position:absolute!important;left:6px;right:6px;top:0;bottom:0;
    width:auto!important;height:auto!important;padding:6px!important;margin:0!important;
    overflow:hidden!important;display:flex;flex-direction:column;
  }
  #game .boardHead{flex:0 0 24px;min-height:24px;overflow:hidden;}
  #game .canvasWrap{
    flex:1 1 auto;min-height:0;width:100%;height:auto;overflow:hidden;border-radius:9px;
  }
  #game .canvasWrap canvas{
    width:100%!important;height:100%!important;aspect-ratio:auto!important;
    display:block;border-width:1px;touch-action:none;
  }
  #game .tools{
    flex:0 0 45px;height:45px;margin:5px 0 0!important;padding:4px 2px;
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  }
  #game .tools button{flex:0 0 auto;min-height:37px;height:37px;}

  /* Chat stays in one fixed bottom slot. It does not expand or move on focus. */
  #game .chat{
    position:fixed!important;left:0!important;right:0!important;bottom:52px!important;
    width:100%!important;height:128px!important;min-height:128px!important;max-height:128px!important;
    z-index:80;padding:6px 8px!important;margin:0!important;border-radius:14px 14px 0 0;
    display:flex!important;flex-direction:column!important;overflow:hidden!important;
    transform:translateY(var(--keyboard-cover,0px));
    transition:none!important;
  }
  #game .chat h3{display:block!important;flex:0 0 20px;height:20px;margin:0 0 4px!important;font-size:13px;}
  #game .chat #messages{
    display:block!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;
    overflow-y:auto!important;margin:0 0 5px!important;padding:5px!important;
  }
  #game .guessForm{display:flex!important;flex:0 0 44px!important;height:44px!important;}
  #game .guessForm input,#game .guessForm button{height:44px!important;min-height:44px!important;font-size:16px!important;}

  /* Players drawer opens below the top ribbon and never covers it. */
  #game .panel{
    position:fixed!important;left:0!important;top:48px!important;bottom:52px!important;
    width:min(88vw,340px)!important;height:auto!important;z-index:110!important;
    transform:translateX(-105%);transition:transform .2s ease!important;
    overflow:auto!important;border-radius:0 16px 16px 0!important;
  }
  body.mobile-players-open #game .panel{transform:translateX(0)!important;}

  #game .mobileNav{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:52px!important;z-index:120!important;
    transform:translateY(var(--keyboard-cover,0px));
  }

  /* Never let old "chat open" rules change canvas dimensions. */
  body.mobile-chat-open #game .chat{height:128px!important;max-height:128px!important;}
  body.keyboard-open #game .chat{height:128px!important;max-height:128px!important;}
  body.keyboard-open #game .layout{top:84px!important;bottom:184px!important;}
  body.keyboard-open #game .board{top:0!important;bottom:0!important;}
  body.keyboard-open #game .notice{display:block!important;}
  body.keyboard-open #game .tools{display:flex!important;}

  /* Answer focus: no scroll, no automatic chat expansion. */
  #messageInput{scroll-margin:0!important;}
}
@media(max-width:420px){
  #game .topbar{height:46px;min-height:46px}
  #game .notice{top:48px}
  #game .layout{top:82px;bottom:182px}
  #game .chat{bottom:50px;height:126px!important;min-height:126px!important;max-height:126px!important}
  #game .panel{top:46px;bottom:50px}
  #game .mobileNav{height:50px}
}

/* V20 FINAL MOBILE ARCHITECTURE
   Game geometry belongs to the stable/small viewport. The native mobile
   keyboard is deliberately NOT measured or used to resize/reposition the game.
   Result: canvas and chat keep their exact screen positions; the OS keyboard
   simply covers the lower chat area when an input receives focus. */
@media (max-width:750px){
  html{
    width:100%;
    height:100%;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    -webkit-text-size-adjust:100%;
  }
  body{
    width:100%;
    height:100%;
    min-height:0!important;
    margin:0!important;
    overflow:hidden!important;
    position:fixed!important;
    inset:0!important;
    overscroll-behavior:none!important;
    -webkit-overflow-scrolling:auto!important;
  }
  body.keyboard-open{position:fixed!important;inset:0!important;overflow:hidden!important;}

  /* Use the stable viewport: it does not shrink when the soft keyboard opens. */
  #game{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100svh!important;
    min-height:0!important;
    max-height:100svh!important;
    overflow:hidden!important;
    contain:layout paint;
  }
  #game .topbar{
    position:absolute!important;
    left:0!important;right:0!important;top:0!important;
    width:100%!important;
    height:46px!important;
    min-height:46px!important;
    z-index:200!important;
  }
  #game .notice{
    position:absolute!important;
    left:6px!important;right:6px!important;top:48px!important;
    width:auto!important;height:30px!important;
    z-index:190!important;
  }
  #game .layout{
    position:absolute!important;
    left:0!important;right:0!important;top:82px!important;bottom:182px!important;
    width:100%!important;height:auto!important;
    padding:0 6px!important;margin:0!important;
    display:block!important;overflow:hidden!important;
  }
  #game .board{
    position:absolute!important;
    left:6px!important;right:6px!important;top:0!important;bottom:0!important;
    width:auto!important;height:auto!important;
    margin:0!important;padding:6px!important;
    overflow:hidden!important;
    display:flex!important;flex-direction:column!important;
  }
  #game .boardHead{flex:0 0 24px!important;height:24px!important;min-height:24px!important;overflow:hidden!important;}
  #game .canvasWrap{
    flex:1 1 auto!important;min-height:0!important;
    width:100%!important;height:auto!important;overflow:hidden!important;
  }
  #game .canvasWrap canvas{
    width:100%!important;height:100%!important;
    aspect-ratio:auto!important;display:block!important;
    touch-action:none!important;
  }
  #game .tools{
    flex:0 0 45px!important;height:45px!important;min-height:45px!important;
    margin:5px 0 0!important;padding:4px 2px!important;
    display:flex!important;flex-wrap:nowrap!important;
    overflow-x:auto!important;overflow-y:hidden!important;
  }

  /* The chat has a fixed slot. It NEVER expands or translates for focus. */
  #game .chat{
    position:absolute!important;
    left:0!important;right:0!important;bottom:52px!important;
    width:100%!important;height:128px!important;
    min-height:128px!important;max-height:128px!important;
    margin:0!important;padding:6px 8px!important;
    z-index:150!important;
    display:flex!important;flex-direction:column!important;
    overflow:hidden!important;
    transform:none!important;
    transition:none!important;
  }
  #game .chat h3{display:block!important;flex:0 0 20px!important;height:20px!important;margin:0 0 4px!important;font-size:13px!important;}
  #game .chat #messages{
    display:block!important;flex:1 1 auto!important;min-height:0!important;
    height:auto!important;overflow-y:auto!important;
    margin:0 0 5px!important;padding:5px!important;
  }
  #game .guessForm{display:flex!important;flex:0 0 44px!important;height:44px!important;}
  #game .guessForm input,#game .guessForm button{height:44px!important;min-height:44px!important;font-size:16px!important;}

  /* Keyboard overlay mode: keep EVERYTHING above in the same geometry. */
  body.keyboard-open #game,
  body.keyboard-open #game .layout,
  body.keyboard-open #game .board,
  body.keyboard-open #game .canvasWrap,
  body.keyboard-open #game .chat,
  body.keyboard-open #game .mobileNav{
    transform:none!important;
  }
  body.keyboard-open #game .layout{top:82px!important;bottom:182px!important;}
  body.keyboard-open #game .chat{bottom:52px!important;height:128px!important;min-height:128px!important;max-height:128px!important;}
  body.keyboard-open #game .mobileNav{bottom:0!important;transform:none!important;}

  /* Players is a separate layer below the top ribbon, never a reflowing panel. */
  #game .panel{
    position:absolute!important;
    left:0!important;top:46px!important;bottom:52px!important;
    width:min(88vw,340px)!important;height:auto!important;
    z-index:180!important;
    transform:translateX(-105%)!important;
    transition:transform .2s ease!important;
    overflow:auto!important;
    border-radius:0 16px 16px 0!important;
  }
  body.mobile-players-open #game .panel{transform:translateX(0)!important;}

  #game .mobileNav{
    position:absolute!important;
    left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:52px!important;
    z-index:220!important;
  }
  body.mobile-chat-open #game .chat{height:128px!important;max-height:128px!important;transform:none!important;}

  /* Stop iOS/Android from adding a scroll/pan jump for the focused guess input. */
  #messageInput{
    scroll-margin:0!important;
    -webkit-user-select:text!important;
    user-select:text!important;
  }
}
@media (max-width:420px){
  #game .topbar{height:46px!important;min-height:46px!important;}
  #game .notice{top:48px!important;}
  #game .layout{top:82px!important;bottom:182px!important;}
  #game .chat{bottom:50px!important;height:126px!important;min-height:126px!important;max-height:126px!important;}
  #game .panel{top:46px!important;bottom:50px!important;}
  #game .mobileNav{height:50px!important;}
  body.keyboard-open #game .chat{bottom:50px!important;height:126px!important;min-height:126px!important;max-height:126px!important;}
}

/* V21 MOBILE GEOMETRY FIX
   Keep the game canvas and chat in viewport slots. The chat is fixed to the
   viewport (not the .layout), so it cannot overlap/reflow the canvas. The
   native mobile keyboard is intentionally allowed to cover the chat. */
@media (max-width:750px){
  html,body{width:100%!important;height:100%!important;overflow:hidden!important;margin:0!important;padding:0!important;}
  body{position:fixed!important;inset:0!important;}
  #game{position:fixed!important;inset:0!important;width:100%!important;height:100svh!important;max-height:100svh!important;overflow:hidden!important;}

  #game .topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;height:46px!important;min-height:46px!important;z-index:500!important;overflow:hidden!important;}
  #game .notice{position:fixed!important;top:48px!important;left:6px!important;right:6px!important;height:30px!important;margin:0!important;padding:5px 8px!important;z-index:490!important;overflow:hidden!important;white-space:nowrap!important;}

  /* Canvas slot: ends before the fixed chat slot. */
  #game .layout{position:fixed!important;left:0!important;right:0!important;top:82px!important;bottom:180px!important;width:100%!important;height:auto!important;padding:0 6px!important;margin:0!important;display:block!important;overflow:hidden!important;z-index:100!important;}
  #game .board{position:absolute!important;left:6px!important;right:6px!important;top:0!important;bottom:0!important;width:auto!important;height:auto!important;margin:0!important;padding:6px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
  #game .boardHead{flex:0 0 24px!important;height:24px!important;min-height:24px!important;}
  #game .canvasWrap{flex:1 1 auto!important;min-height:0!important;width:100%!important;height:auto!important;overflow:hidden!important;}
  #game .canvasWrap canvas{display:block!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;touch-action:none!important;}
  #game .tools{flex:0 0 45px!important;height:45px!important;min-height:45px!important;margin:5px 0 0!important;padding:4px 2px!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;}

  /* CRITICAL: chat is viewport-fixed, not layout-fixed. */
  #game .chat{position:fixed!important;left:0!important;right:0!important;bottom:52px!important;width:100%!important;height:128px!important;min-height:128px!important;max-height:128px!important;margin:0!important;padding:6px 8px!important;z-index:450!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;transform:none!important;transition:none!important;}
  #game .chat h3{display:block!important;flex:0 0 20px!important;height:20px!important;margin:0 0 4px!important;font-size:13px!important;}
  #game .chat #messages{display:block!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow-y:auto!important;margin:0 0 5px!important;padding:5px!important;}
  #game .guessForm{display:flex!important;flex:0 0 44px!important;height:44px!important;}
  #game .guessForm input,#game .guessForm button{height:44px!important;min-height:44px!important;font-size:16px!important;}

  /* Keyboard focus must NOT change any game geometry. */
  body.keyboard-open #game,
  body.keyboard-open #game .layout,
  body.keyboard-open #game .board,
  body.keyboard-open #game .canvasWrap,
  body.keyboard-open #game .chat{transform:none!important;}
  body.keyboard-open #game .layout{top:82px!important;bottom:180px!important;}
  body.keyboard-open #game .chat{position:fixed!important;bottom:52px!important;height:128px!important;min-height:128px!important;max-height:128px!important;}

  /* Players: its panel is viewport-fixed and starts below the room ribbon. */
  #game .panel{position:fixed!important;left:0!important;top:46px!important;bottom:52px!important;width:min(88vw,340px)!important;height:auto!important;z-index:480!important;transform:translateX(-105%)!important;transition:transform .2s ease!important;overflow:auto!important;border-radius:0 16px 16px 0!important;}
  body.mobile-players-open #game .panel{transform:translateX(0)!important;}

  #game .mobileNav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:52px!important;z-index:600!important;transform:none!important;}

  /* Never expand chat when the mobile Chat button or input receives focus. */
  body.mobile-chat-open #game .chat,
  body.keyboard-open #game .chat{height:128px!important;max-height:128px!important;}

  /* Prevent focus styles from creating an extra page scroll. */
  #messageInput{scroll-margin:0!important;}
}
@media (max-width:420px){
  #game .layout{top:82px!important;bottom:178px!important;}
  #game .chat{bottom:50px!important;height:126px!important;min-height:126px!important;max-height:126px!important;}
  body.keyboard-open #game .layout{top:82px!important;bottom:178px!important;}
  body.keyboard-open #game .chat{bottom:50px!important;height:126px!important;min-height:126px!important;max-height:126px!important;}
  #game .mobileNav{height:50px!important;}
}

/* V22 HEADER / NOTICE NON-OVERLAP FIX
   Mobile: reserve a real header zone, place the transient notice underneath it,
   and start the board only after both. Chat remains independently fixed at the bottom. */
@media (max-width:750px){
  #game .topbar{
    top:0!important;
    height:58px!important;
    min-height:58px!important;
    padding:7px 8px!important;
    z-index:700!important;
    overflow:hidden!important;
    flex-wrap:nowrap!important;
  }
  #game .notice{
    top:60px!important;
    left:6px!important;
    right:6px!important;
    height:30px!important;
    min-height:30px!important;
    z-index:650!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  #game .layout{
    top:96px!important;
    bottom:180px!important;
    z-index:100!important;
  }
  #game .panel{
    top:58px!important;
    bottom:52px!important;
    z-index:680!important;
  }
}
@media (max-width:420px){
  #game .topbar{height:58px!important;min-height:58px!important;padding:6px 7px!important;}
  #game .notice{top:60px!important;height:30px!important;min-height:30px!important;}
  #game .layout{top:96px!important;bottom:178px!important;}
  #game .panel{top:58px!important;bottom:50px!important;}
}

.modalActions{display:none;gap:10px;margin-top:14px}.modalActions button{flex:1}.modalActions .secondary{margin-top:0}
@media(max-width:750px){.modalActions{display:flex;flex-direction:column;gap:8px}.modalActions button{width:100%;margin-top:0}}

/* ===== V25 REAL-TIME ROOM VOICE ===== */
.voiceBar{margin:10px 0;padding:10px 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.voiceTitle{display:flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap}
.voiceTitle #voiceState{font-size:12px;color:#6b7280;font-weight:700}
.voiceDot{width:9px;height:9px;border-radius:50%;background:#9ca3af;display:inline-block}
.voiceBar.voiceOn .voiceDot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.voicePeople{display:flex;gap:6px;flex:1;min-width:120px;flex-wrap:wrap}
.voicePerson{font-size:12px;padding:5px 8px;border-radius:999px;background:#f3f4f6;font-weight:700;transition:.15s}
.voicePerson.speaking{background:#dcfce7;box-shadow:0 0 0 2px rgba(34,197,94,.2);transform:translateY(-1px)}
.voicePerson.muted{opacity:.55}
.voiceBtn{border:0;border-radius:10px;padding:9px 13px;background:#1f2430;color:#fff;font-weight:800;cursor:pointer}
.voiceBtn.off{background:#eef0f4;color:#1f2430}
.voiceBtn:disabled{opacity:.5;cursor:not-allowed}
.voiceAudio{display:none}
@media(max-width:900px){
  .voiceBar{margin:8px 0;padding:8px 10px;gap:7px;position:relative;z-index:20}
  .voiceTitle{font-size:13px}
  .voicePeople{order:3;flex-basis:100%;min-height:0}
  .voiceBtn{margin-left:auto;padding:8px 10px}
}
@media(max-width:600px){
  .voiceBar{border-radius:12px}
  .voicePeople{display:none}
  .voiceTitle #voiceState{max-width:60px;overflow:hidden;text-overflow:ellipsis}
}

/* ===== V25.1 MOBILE VOICE VISIBILITY FIX ===== */
@media (max-width:900px){
  #game .voiceBar{
    position:fixed!important;
    top:84px!important;
    left:6px!important;
    right:6px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:6px 9px!important;
    z-index:520!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  #game .voiceTitle{font-size:13px!important;flex:0 0 auto!important;}
  #game .voiceBtn{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:2!important;margin-left:auto!important;white-space:nowrap!important;}
  #game .voicePeople{display:none!important;}
  #game .voiceTitle #voiceState{display:inline-block!important;max-width:70px!important;}
  #game .layout{top:132px!important;}
}
@media (max-width:420px){
  #game .voiceBar{top:94px!important;height:40px!important;min-height:40px!important;padding:5px 8px!important;}
  #game .layout{top:140px!important;}
}