/* ── Game screen layout, top bar, buttons, responsive ── */

#game-screen{
  display:none;padding:16px;max-width:1400px;margin:0 auto;
  min-height:100vh;
  background:
    radial-gradient(ellipse 70% 35% at 40% -2%, rgba(255,210,140,0.12) 0%, transparent 100%),
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(0,0,0,0.04) 80px, rgba(0,0,0,0.04) 82px),
    linear-gradient(180deg, var(--wall) 0%, var(--bg) 100%);
}
.game-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:10px;
}
.game-top h1{
  font-family:'Playfair Display',serif;font-size:28px;color:#f0e8dc;
  text-shadow:1px 1px 3px rgba(0,0,0,0.5);
}
.game-logo{
  width:clamp(100px,25vw,160px);height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.case-label{
  font-family:'Caveat',cursive;font-size:18px;color:#c8b8a0;opacity:0.8;
  margin-left:12px;
}
.game-timer{
  font-family:'Nunito',sans-serif;font-size:16px;font-weight:700;
  color:#f0e8dc;background:rgba(0,0,0,0.35);border-radius:20px;padding:6px 18px;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);
}
.top-btns{display:flex;gap:6px;flex-wrap:wrap}
.btn{
  font-family:'Nunito',sans-serif;font-weight:700;font-size:11px;
  padding:8px 12px;border-radius:8px;border:1.5px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.08);color:#ddd;cursor:pointer;transition:all 0.15s;
  backdrop-filter:blur(2px);
}
.btn:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);transform:translateY(-1px)}
.btn-danger{border-color:rgba(200,60,60,0.5);color:#e88}
.btn-danger:hover{background:rgba(200,60,60,0.15)}
.btn-menu{border-color:rgba(244,200,122,0.4);color:#f4c87a}
.btn-menu:hover{background:rgba(244,200,122,0.12);border-color:#f4c87a}
.btn.eraser-active{
  background:rgba(200,60,60,0.2);border-color:#d44;color:#f88;
}
.btn.xmark-active{
  background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.4);color:#fff;
}

.game-body{
  display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;
}
@media(max-width:860px){.game-body{grid-template-columns:1fr}}

/* ── Phones ── */
@media(max-width:480px){
  #title-screen{padding:20px 12px}
  .title-logo{width:clamp(180px,85vw,400px)}
  .diff-cards{gap:8px;flex-direction:column;align-items:center}
  .diff-card{padding:12px 20px;min-width:0;max-width:260px;width:100%;
    display:flex;align-items:center;gap:12px;text-align:left}
  .diff-card .diff-icon{font-size:24px;margin-bottom:0;flex-shrink:0}
  .diff-card .diff-name{font-size:14px}
  .diff-card .diff-desc{font-size:9px}
  .how-to{font-size:10px;max-width:100%}
  #game-screen{padding:8px}
  .game-top{gap:4px;justify-content:center}
  .game-top>*{width:100%;text-align:center}
  .game-top>div:first-child{display:flex;align-items:center;justify-content:center;gap:6px}
  .game-timer{font-size:13px;padding:4px 12px;display:inline-block}
  .top-btns{justify-content:center}
  .game-logo{width:clamp(80px,22vw,120px)}
  .case-label{font-size:12px;margin-left:4px}
  .top-btns{gap:4px}
  .btn{font-size:10px;padding:8px 8px}
  .map-wrap{padding:8px}
  .panel{padding:10px}
  .panel-head{font-size:12px;word-break:break-word}
  .sus-clue{font-size:10px}
  .accuse-panel p{font-size:10px;line-height:1.5}
  .room-badge{font-size:clamp(3px,1vw,5px);padding:0 2px}
  .cell-notes{font-size:clamp(8px,2.5vw,14px)}
  #compass svg{width:30px;height:30px}
  .modal-box{padding:20px;max-width:100%}
  .modal-box h2{font-size:20px}
  .modal-box .reveal-name{font-size:26px}
  .modal-btns{flex-wrap:wrap}
  .main-menu{max-width:260px;gap:8px}
  .menu-btn{font-size:15px;padding:12px 18px}
  .menu-sub h2{font-size:16px;margin-bottom:16px}
  .menu-back{padding:8px 18px;font-size:12px}
  .instructions-text li{font-size:11px;padding:8px 10px;margin-bottom:6px}
  .lang-option{padding:8px 14px;font-size:12px}
  .sticky{transform:none}
  .sticky p{font-size:13px}
}

/* ── Very small phones ── */
@media(max-width:360px){
  .title-logo{width:clamp(160px,90vw,300px)}
  .diff-card{padding:10px 16px}
  .diff-card .diff-name{font-size:12px}
  .diff-card .diff-icon{font-size:20px}
  .game-logo{width:clamp(70px,20vw,100px)}
  .case-label{font-size:11px}
  .btn{font-size:9px;padding:7px 6px}
  .game-timer{font-size:12px;padding:3px 10px}
  #compass svg{width:24px;height:24px}
  .room-badge{font-size:3px}
}