[hidden] { display: none !important; }

.ranking-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ranking-head h3 { margin:0; }
.ranking-tabs { display:flex; gap:4px; }
.ranking-tabs button { padding:5px 9px; border-radius:8px; opacity:.55; }
.ranking-tabs button.active { opacity:1; color:white; background:#594be8; border-color:#594be8; }
.ranking-panel #ranking { height:110px; overflow:auto; margin:10px 0 0; padding-left:28px; }
.ranking-panel #ranking li { padding:3px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.room-actions { display:flex; align-items:center; gap:7px; }
.keybind-guide { max-width:520px; color:#687386; font-size:13px; }
.keybind-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; min-width:500px; }
.keybind-grid label { display:grid; grid-template-columns:110px 1fr; align-items:center; gap:8px; margin:0; }
.keybind-grid label span { font-size:13px; font-weight:700; }
.keybind-grid input { margin:0; cursor:pointer; text-align:center; background:#f7f9fc; }
.keybind-grid input:focus { border-color:#594be8; outline:3px solid #594be822; background:white; }
#lobby-chat { height:190px; }
#recovery-code { display:block; margin:18px 0; padding:16px; border-radius:10px; background:#171b2c; color:#8fffb0; font-size:22px; letter-spacing:.12em; text-align:center; user-select:all; }

@media (min-width: 851px) {
  body.game-active {
    height: 100dvh;
    overflow: hidden;
  }

  body.game-active .shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1520px;
    height: 100dvh;
    padding: 8px 16px;
    overflow: hidden;
  }

  body.game-active header {
    flex: 0 0 42px;
    min-height: 42px;
    margin-bottom: 6px;
  }

  body.game-active header b { font-size: 20px; }
  body.game-active header span { font-size: 13px; }
  body.game-active header button { padding: 7px 10px; }
  body.game-active #app { flex: 1; min-height: 0; }

  body.game-active #room {
    height: 100%;
    gap: 12px;
  }

  body.game-active #room > .panel.grow {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 10px 12px;
    overflow: hidden;
  }

  body.game-active #room > .panel.grow > .section-title {
    flex: 0 0 42px;
    min-height: 42px;
  }

  body.game-active #room .section-title .eyebrow { font-size: 10px; }
  body.game-active #room .section-title h2 { margin: 2px 0 0; font-size: 20px; }
  body.game-active #room .section-title button { padding: 7px 10px; }

  body.game-active #game {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
  }

  body.game-active #game > .game-head {
    flex: 0 0 28px;
    min-height: 28px;
  }

  body.game-active #room > aside {
    height: 100%;
  }

  body.game-active #room > aside > .panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 12px;
  }

  body.game-active #room > aside h3 { margin: 4px 0 10px; }
  body.game-active #room-chat { flex: 1; height: auto; min-height: 0; }

  body.apple-active #apple-play-area {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2px 8px 6px;
  }

  body.apple-active #apple-drag-info {
    flex: 0 0 auto;
    margin: 2px auto 7px;
    padding: 6px 16px;
    font-size: 14px;
  }

  body.apple-active .apple-board {
    margin: 0 auto;
  }

  body.tetris-active #tetris-play-area {
    position: relative;
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 0;
    margin: 2px auto 0;
    padding: 7px 10px;
    flex-direction: column;
    overflow: hidden;
  }

  body.tetris-active .tetris-stage {
    flex: 0 0 auto;
    min-height: 0;
    grid-template-columns: 96px minmax(180px, 300px) 96px;
    gap: 8px;
  }

  body.tetris-active #tetris-board {
    width: auto;
    height: min(600px, calc(100dvh - 226px));
    max-width: 100%;
    margin: 0 auto;
  }

  body.tetris-active .tetris-box { padding: 7px 5px; }
  body.tetris-active .tetris-box canvas { width: 80px; }
  body.tetris-active #tetris-controls { flex: 0 0 auto; margin-top: 5px; }
  body.tetris-active #tetris-controls button { padding: 6px 9px; }
  body.tetris-active .tetris-help { flex: 0 0 auto; margin: 4px 0 0; font-size: 10px; }

  body.tetris-active #tetris-opponents:not(:empty) {
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 7px;
    z-index: 4;
    display: flex;
    width: 92px;
    margin: 0;
    padding: 5px 0 0 6px;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 0;
    border-left: 1px solid #ffffff12;
    background: linear-gradient(90deg, transparent, #0b1122dd 18%);
  }

  body.tetris-active .tetris-opponent {
    flex: 0 0 auto;
    width: 78px;
    padding: 5px;
  }

  body.tetris-active .tetris-opponent canvas { width: 54px; margin: 4px auto; }
  body.tetris-active .tetris-opponent small { font-size: 8px; }
}

#apple-play-area {
  position: relative;
  overflow: visible;
  padding: 12px;
}

#apple-drag-info {
  width: fit-content;
  min-width: 260px;
  margin: 4px auto 12px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff4e8;
  border: 1px solid #ffc590;
  color: #9a4b12;
  font-weight: 800;
  text-align: center;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

#apple-drag-info.active {
  transform: scale(1.05);
  box-shadow: 0 8px 24px #ff7b3050;
}

#apple-drag-info.success {
  color: #075f2c;
  background: #d8ffe8;
  border-color: #38c778;
  box-shadow: 0 0 0 5px #38c77826, 0 8px 25px #38c77844;
}

.apple-board {
  position: relative;
  transition: filter .15s ease, transform .15s ease;
}

.apple-board.dragging {
  filter: none;
}

.apple {
  position: relative;
  overflow: visible;
  transition: transform .1s ease, background .1s ease, box-shadow .1s ease;
  box-shadow: inset -5px -7px 10px #d94d2850, inset 4px 4px 7px #fff7, 0 4px 8px #b83a2630;
}

.apple::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 10px;
  top: -5px;
  left: 54%;
  border-radius: 8px 1px;
  background: #42a94f;
  transform: rotate(35deg);
}

.apple.selected {
  z-index: 2;
  transform: scale(1.07);
  background: #ff5f3f;
  color: white;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ff914d77;
}

.apple.cleared {
  visibility: visible;
  pointer-events: auto;
  animation: apple-pop .3s cubic-bezier(.2,.8,.25,1) forwards;
}

#apple-selection-box {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  border: 2px solid #ff6b35;
  border-radius: 12px;
  background: #ff8a3d1c;
  box-shadow: 0 0 0 3px #ffffff99, inset 0 0 16px #ff7b3033;
  will-change: left, top, width, height;
}

#apple-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

.apple-particle {
  position: absolute;
  font-size: 18px;
  animation: particle-burst .45s ease-out forwards;
}

.apple-score-pop {
  position: absolute;
  color: #ff3d24;
  font-size: 28px;
  font-weight: 1000;
  text-shadow: 0 2px 0 white, 0 0 12px #ffcb57;
  animation: score-float .8s ease-out forwards;
}

@keyframes apple-pop {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  45% { opacity: 1; transform: scale(1.5) rotate(8deg); filter: brightness(1.55); }
  100% { opacity: 0; transform: scale(.05) rotate(25deg); filter: brightness(2); }
}

@keyframes particle-burst {
  from { opacity: 1; transform: translate(-50%,-50%) scale(.5); }
  to { opacity: 0; transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1.25); }
}

@keyframes score-float {
  from { opacity: 0; transform: translate(-50%,5px) scale(.6); }
  20% { opacity: 1; transform: translate(-50%,-8px) scale(1.18); }
  to { opacity: 0; transform: translate(-50%,-70px) scale(1); }
}

#tetris-play-area {
  max-width: 900px;
  margin: 12px auto 0;
  padding: 14px;
  border-radius: 18px;
  color: #edf4ff;
  background: radial-gradient(circle at 50% 15%, #29345c, #111827 58%, #090e1b);
  box-shadow: inset 0 0 0 1px #ffffff12, 0 15px 40px #17203335;
}

.tetris-stage {
  display: grid;
  grid-template-columns: 112px minmax(220px, 300px) 112px;
  justify-content: center;
  align-items: start;
  gap: 12px;
}

.tetris-main {
  position: relative;
  transform-origin: center center;
}

#tetris-line-effects, #tetris-combat-effects {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

#tetris-combat-effects { z-index: 8; overflow: visible; }

.tetris-line-flash {
  position: absolute;
  left: 0;
  width: 100%;
  height: 5%;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, #ffffffee 35%, #a6f4ff 50%, #ffffffee 65%, transparent);
  box-shadow: 0 0 14px #8cecff, inset 0 0 8px white;
  animation: tetris-line-flash .58s ease-out forwards;
}

.tetris-line-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 35%, white 50%, transparent 65%);
  animation: tetris-line-sweep .42s ease-out forwards;
}

.tetris-line-flash i {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 8px #86ecff;
  animation: tetris-spark .42s var(--spark-delay) ease-out forwards;
}

.tetris-combat-text {
  position: relative;
  width: max-content;
  max-width: 95%;
  margin: 8px auto;
  padding: 7px 12px;
  border: 1px solid #ffffff88;
  border-radius: 999px;
  color: white;
  background: #172033e8;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 4px #0008;
  box-shadow: 0 7px 20px #0006;
  animation: tetris-combat-pop .95s ease-out forwards;
}

.tetris-combat-text.attack { color:#a8ffef; border-color:#4ef0c0; background:#075746eb; }
.tetris-combat-text.clear { color:#c7f5ff; border-color:#7be3ff; }
.tetris-combat-text.warning { color:#fff0b3; border-color:#ffbd3d; background:#8a481deb; }
.tetris-combat-text.danger { color:#fff; border-color:#ff5364; background:#aa1735ed; font-size:22px; }

.garbage-impact { animation: tetris-garbage-shake .4s cubic-bezier(.36,.07,.19,.97); }
.gameover-impact { animation: tetris-gameover-shake .72s cubic-bezier(.36,.07,.19,.97); }
.opponent-line-pop { animation: opponent-line-pop .38s ease-out; }
.opponent-garbage-impact { animation: tetris-garbage-shake .4s ease-out; }
.opponent-gameover-impact { animation: tetris-gameover-shake .62s ease-out; }

#tetris-board {
  width: min(300px, 100%);
  margin: 0 auto;
  border: 2px solid #7888b7;
  border-radius: 5px;
  background: #111827;
  box-shadow: 0 0 28px #5d72ff25;
}

.tetris-box {
  width: auto;
  padding: 10px 8px;
  border: 1px solid #ffffff18;
  border-radius: 10px;
  background: #0b1122bb;
  text-align: center;
}

.tetris-box b {
  display: block;
  margin-bottom: 7px;
  color: #9fb1ff;
  font-size: 11px;
  letter-spacing: .12em;
}

.tetris-box canvas {
  width: 96px;
  margin: 0 auto 8px;
  border-radius: 4px;
  background: #111827;
}

#tetris-status, #tetris-stats {
  color: #dce5ff;
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-line;
}

.tetris-garbage-meter {
  position: absolute;
  right: -10px;
  bottom: 2px;
  width: 7px;
  height: calc(100% - 4px);
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff14;
}

#tetris-garbage-fill {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0;
  background: linear-gradient(#ffd43b, #ff3b55 65%);
  transition: height .16s ease;
}

#tetris-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

#tetris-controls button {
  min-width: 48px;
  padding: 8px 11px;
  border-color: #ffffff24;
  color: #eef3ff;
  background: #26304e;
  touch-action: manipulation;
}

#tetris-controls button.primary {
  background: #6256e8;
}

.tetris-help {
  margin: 9px 0 0;
  color: #aab5d2;
  font-size: 12px;
  text-align: center;
}

#tetris-opponents {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  overflow-x: auto;
  border-top: 1px solid #ffffff12;
}

.tetris-opponent {
  flex: 0 0 132px;
  padding: 7px;
  border: 1px solid #ffffff16;
  border-radius: 9px;
  background: #0b1122a8;
  text-align: center;
}

.tetris-opponent b, .tetris-opponent small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tetris-opponent canvas {
  width: 100px;
  margin: 6px auto;
  border-radius: 3px;
}

.tetris-opponent small {
  color: #aeb9d7;
  font-size: 10px;
}

@keyframes tetris-line-flash {
  0% { opacity:0; transform:scaleX(.1); filter:brightness(2.4); }
  28% { opacity:1; transform:scaleX(1); }
  100% { opacity:0; transform:scaleX(1.08); filter:brightness(1); }
}

@keyframes tetris-line-sweep {
  from { transform:translateX(-100%); }
  to { transform:translateX(100%); }
}

@keyframes tetris-spark {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.2); }
  30% { opacity:1; transform:translate(-50%,-50%) scale(1.8); }
  100% { opacity:0; transform:translate(-50%,-140%) scale(.4); }
}

@keyframes tetris-combat-pop {
  0% { opacity:0; transform:translateY(18px) scale(.72); }
  18% { opacity:1; transform:translateY(8px) scale(1.08); }
  68% { opacity:1; transform:translateY(0) scale(1); }
  100% { opacity:0; transform:translateY(-20px) scale(.92); }
}

@keyframes tetris-garbage-shake {
  0%,100% { transform:translate(0,0); }
  16% { transform:translate(-4px,2px) rotate(-.35deg); }
  32% { transform:translate(4px,-2px) rotate(.35deg); }
  48% { transform:translate(-3px,1px); }
  64% { transform:translate(3px,-1px); }
  80% { transform:translate(-1px,1px); }
}

@keyframes tetris-gameover-shake {
  0%,100% { transform:translate(0,0) rotate(0); filter:brightness(1); }
  10% { transform:translate(-13px,5px) rotate(-1deg); filter:brightness(1.7) saturate(1.4); }
  20% { transform:translate(13px,-6px) rotate(1deg); }
  32% { transform:translate(-10px,4px) rotate(-.7deg); }
  44% { transform:translate(9px,-4px) rotate(.7deg); }
  58% { transform:translate(-6px,2px); }
  72% { transform:translate(5px,-2px); }
  86% { transform:translate(-2px,1px); }
}

@keyframes opponent-line-pop {
  0%,100% { transform:scale(1); filter:brightness(1); }
  45% { transform:scale(1.06); filter:brightness(1.8); box-shadow:0 0 18px #79e9ff; }
}

@media (max-width: 620px) {
  .tetris-stage { grid-template-columns: 68px minmax(180px, 1fr) 68px; gap: 5px; }
  .tetris-box { padding: 7px 3px; }
  .tetris-box canvas { width: 58px; height: auto; }
  #tetris-controls button { flex: 1 0 42px; min-width: 42px; padding: 8px 5px; }
  .tetris-help { font-size: 10px; }
}

@media (max-width: 620px) {
  .keybind-grid { grid-template-columns:1fr; min-width:0; }
  #tetris-keys-dialog { min-width:min(360px,calc(100vw - 24px)); }
}

/* Unified dark arcade surfaces */
.ranking-tabs button { border-color:#34435a; color:#9ba7b9; background:#111a29; }
.ranking-tabs button.active { color:white; border-color:#776bff; background:linear-gradient(135deg,#776bff,#5548d8); box-shadow:0 5px 16px #5548d844; }
.ranking-panel #ranking { color:#cbd4e3; scrollbar-color:#3d4b63 transparent; }
.ranking-panel #ranking li::marker { color:#8d83ff; font-weight:800; }
.keybind-guide { color:#95a2b5; }
.keybind-grid input { color:#e8edf7; border-color:#34435a; background:#101a29; }
.keybind-grid input:focus { border-color:#8176ff; outline:3px solid #7568ff26; background:#162135; }
#lobby-chat { border-color:#ffffff0b; background:#09111de0; }
#recovery-code { border:1px solid #8fffb030; background:#070c15; color:#8fffb0; box-shadow:inset 0 0 22px #2cff6b0b; }

.game-head {
  min-height:38px;
  margin-bottom:8px;
  padding:6px 10px;
  border:1px solid #ffffff10;
  border-radius:10px;
  color:#b8c3d5;
  background:#09111dbd;
}
.game-head #timer { color:#a79fff; font-family:Consolas,"Courier New",monospace; letter-spacing:.04em; }
.game-head #scores { overflow:hidden; color:#aeb9cb; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.spectator-help { color:#73d9ee; }

/* Classic-modern Minesweeper cabinet */
#mine-play-area {
  display:flex;
  flex:1;
  min-height:0;
  padding:8px 4px 4px;
  align-items:flex-start;
  justify-content:center;
  overflow:auto;
}

.mine-console {
  width:fit-content;
  max-width:100%;
  padding:12px;
  border:1px solid #536273;
  border-radius:14px;
  background:linear-gradient(145deg,#46515e,#2a333e 48%,#1d252f);
  box-shadow:0 18px 36px #0008,inset 1px 1px #ffffff36,inset -1px -1px #080b0f99;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.mine-hud {
  display:grid;
  min-height:62px;
  margin-bottom:10px;
  padding:7px 9px;
  grid-template-columns:1fr 56px 1fr;
  align-items:center;
  gap:12px;
  border:3px solid;
  border-color:#1a2028 #65717e #65717e #1a2028;
  background:#303944;
  box-shadow:inset 0 0 0 1px #111820;
}

.mine-led {
  display:flex;
  min-width:86px;
  padding:5px 8px 4px;
  flex-direction:column;
  border:1px solid #050608;
  border-radius:3px;
  background:radial-gradient(circle at 50% 20%,#21090d,#090607 70%);
  box-shadow:inset 0 0 12px #000,0 1px #ffffff1b;
}
.mine-led:last-child { align-items:flex-end; }
.mine-led span { color:#7b6267; font:700 8px/1.1 "Segoe UI",sans-serif; letter-spacing:.16em; }
.mine-led strong { color:#ff4e5c; font:900 25px/1 Consolas,"Courier New",monospace; letter-spacing:.07em; text-shadow:0 0 9px #ff203a80; }

.mine-face {
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border:3px solid;
  border-color:#e8edf1 #626c76 #626c76 #e8edf1;
  color:#15191e;
  background:#b8c0c7;
  font-size:23px;
  box-shadow:0 2px 4px #0007;
  user-select:none;
}

.mine-board-frame {
  display:flex;
  max-width:100%;
  padding:5px;
  overflow:hidden;
  border:4px solid;
  border-color:#161c23 #6d7883 #6d7883 #161c23;
  background:#8f99a3;
  box-shadow:inset 0 0 0 1px #111820;
}

#mine-board {
  width:auto;
  height:auto;
  max-width:100%;
  margin:0;
  border:0;
  border-radius:0;
  background:#aeb7c1;
  box-shadow:none;
  image-rendering:auto;
}

.mine-legend {
  display:flex;
  margin-top:9px;
  justify-content:center;
  gap:14px;
  color:#c0cad4;
  font-size:10px;
  letter-spacing:.02em;
}
.mine-legend span::before { content:"·"; margin-right:5px; color:#ff5968; }
.mine-legend span:first-child::before { color:#68d4eb; }

#mine-play-area.cleared .mine-console { border-color:#65d6a0; box-shadow:0 18px 36px #0008,0 0 25px #43d49130,inset 1px 1px #ffffff36; }
#mine-play-area.failed .mine-console { border-color:#d65b67; box-shadow:0 18px 36px #0008,0 0 25px #ff405530,inset 1px 1px #ffffff36; }
#mine-play-area.spectating .mine-console { border-color:#57bdd8; box-shadow:0 18px 36px #0008,0 0 25px #4bc7e825,inset 1px 1px #ffffff36; }

@media (min-width:851px) {
  body.mines-active #mine-play-area { padding-top:4px; overflow:hidden; }
  body.mines-active #mine-board { max-height:calc(100dvh - 230px); }
  body.mines-active .mine-console { max-height:100%; }
  body.mines-active .game-head #timer { display:none; }
}

@media (max-width:620px) {
  .mine-console { padding:8px; }
  .mine-hud { min-height:52px; grid-template-columns:1fr 44px 1fr; gap:7px; padding:5px; }
  .mine-face { width:38px; height:38px; font-size:19px; }
  .mine-led { min-width:68px; }
  .mine-led strong { font-size:20px; }
  .mine-legend { flex-wrap:wrap; gap:4px 10px; }
}

/* Readability and play-space pass */
.apple-board { gap:3px; }
.apple {
  color:#28141a;
  background:radial-gradient(circle at 34% 27%,#ffc080 0,#ff965b 38%,#f27342 72%,#d84c35 100%);
  font-size:clamp(15px,1.3vw,20px);
  font-weight:950;
  text-shadow:0 1px 0 #ffd1a6,0 0 2px #fff3;
  box-shadow:inset -6px -8px 11px #a92e2f66,inset 4px 4px 8px #fff8,0 4px 9px #0005;
}
.apple::before { background:#3fbe62; box-shadow:0 1px 2px #0c5628aa; }
.apple.selected { color:white; background:#ec543a; text-shadow:0 1px 3px #6b1717; }

@media (min-width:851px) {
  body.game-active header { display:none; }

  body.game-active .shell {
    padding:6px 10px;
  }

  body.game-active #room { gap:10px; }

  body.game-active #room > .panel.grow {
    padding:7px 10px;
  }

  body.game-active #room > .panel.grow > .section-title {
    flex:0 0 32px;
    min-height:32px;
    padding:0 7px;
    border:1px solid #ffffff0d;
    border-radius:9px;
    background:#09111d9c;
  }

  body.game-active #room .section-title > div {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }

  body.game-active #room .section-title .eyebrow {
    flex:0 0 auto;
    font-size:9px;
  }

  body.game-active #room .section-title h2 {
    overflow:hidden;
    margin:0;
    font-size:14px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.game-active #room .section-title button {
    min-height:27px;
    padding:4px 8px;
    font-size:12px;
  }

  body.game-active #game > .game-head {
    flex:0 0 24px;
    min-height:24px;
    margin-bottom:3px;
    padding:2px 8px;
    font-size:12px;
  }

  body.game-active #room > aside {
    flex:0 0 290px;
    width:290px;
  }

  body.game-active #room > aside > .panel { padding:9px; }
  body.game-active #room > aside h3 { margin:2px 0 7px; font-size:15px; }

  body.apple-active #apple-play-area {
    padding:0 4px 3px;
  }

  body.apple-active #apple-drag-info {
    margin:0 auto 4px;
    padding:4px 14px;
    font-size:12px;
  }

  body.tetris-active #tetris-play-area {
    max-width:1040px;
    margin:0 auto;
    padding:3px 8px;
  }

  body.tetris-active .tetris-stage {
    grid-template-columns:96px minmax(180px,320px) 96px;
    gap:7px;
  }

  body.tetris-active #tetris-board {
    height:min(640px,calc(100dvh - 175px));
  }

  body.tetris-active #tetris-controls { margin-top:3px; }
  body.tetris-active #tetris-controls button { min-height:32px; padding:5px 8px; }
  body.tetris-active .tetris-help { margin-top:2px; }
}

/* Modern Minesweeper and stable Apple drag layout */
.mine-console {
  padding:10px;
  border:1px solid #34465e;
  border-radius:16px;
  background:linear-gradient(145deg,#182536,#101a28);
  box-shadow:0 18px 40px #0007,inset 0 1px #ffffff12;
}

.mine-hud {
  min-height:58px;
  margin-bottom:9px;
  padding:7px;
  border:1px solid #2f4157;
  border-radius:11px;
  background:linear-gradient(180deg,#111d2c,#0c1521);
  box-shadow:inset 0 1px #ffffff0d;
}

.mine-led {
  padding:6px 9px 5px;
  border:1px solid #25364a;
  border-radius:8px;
  background:#09111c;
  box-shadow:inset 0 0 14px #0008;
}
.mine-led span { color:#65758b; }
.mine-led strong { color:#73d7ff; text-shadow:0 0 10px #45c8ff55; }

.mine-face {
  border:1px solid #41546c;
  border-radius:10px;
  background:linear-gradient(145deg,#31425a,#202e41);
  box-shadow:0 6px 14px #0005,inset 0 1px #ffffff1a;
}

.mine-board-frame {
  padding:6px;
  border:1px solid #31445b;
  border-radius:11px;
  background:#263548;
  box-shadow:inset 0 0 0 1px #07101b,0 8px 24px #0004;
}

#mine-board { cursor:pointer; background:#d9e1e7; }
.mine-legend { color:#8796aa; }
.mine-legend span::before { color:#70829a; }
.mine-legend span:first-child::before { color:#69d4ff; }

#apple-drag-info {
  display:flex;
  width:min(370px,calc(100% - 16px));
  min-width:0;
  height:34px;
  min-height:34px;
  padding:0 16px;
  align-items:center;
  justify-content:center;
  line-height:1;
  white-space:nowrap;
  transition:color .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease;
}

#apple-drag-info.active { transform:none; box-shadow:0 5px 18px #ff7b3035; }

@media (min-width:851px) {
  body.apple-active #apple-drag-info {
    flex:0 0 30px;
    width:min(370px,calc(100% - 16px));
    height:30px;
    min-height:30px;
    margin:0 auto 4px;
    padding:0 14px;
  }
}

/* Refined Minesweeper typography and mobile controls */
.mine-console {
  font-family:"Bahnschrift","Segoe UI Variable","Pretendard",system-ui,sans-serif;
}

.mine-led span {
  font-family:"Bahnschrift SemiCondensed","Segoe UI Variable","Pretendard",sans-serif;
  font-size:8px;
  font-weight:600;
  letter-spacing:.18em;
}

.mine-led strong {
  font-family:"Bahnschrift SemiCondensed","Segoe UI Variable","Pretendard",sans-serif;
  font-variant-numeric:tabular-nums;
  font-weight:650;
  letter-spacing:.09em;
}

.mine-legend {
  font-family:"Segoe UI Variable","Pretendard",system-ui,sans-serif;
  font-weight:500;
  letter-spacing:.01em;
}

#mine-board {
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}

.mine-mobile-tip { display:none; }

@media (max-width:850px) {
  .mine-desktop-tip { display:none; }
  .mine-mobile-tip { display:inline; }
  .mine-legend { font-size:11px; }
}

/* Mobile play layouts: keep controls reachable without shrinking the games to dots. */
#apple-board-viewport { width:100%; min-width:0; overflow:visible; }
#apple-mobile-scroll { display:none; }

/* Keyboard is the desktop control surface; touch buttons are mobile-only. */
#tetris-controls { display:none; }

@media (max-width:850px) {
  body.game-active { overflow-x:hidden; }
  body.game-active header { display:none; }
  body.game-active .shell { width:100%; padding:6px; overflow-x:hidden; }
  body.game-active #room > .panel.grow { margin-bottom:10px; padding:8px; overflow:hidden; }
  body.game-active #room > .panel.grow > .section-title { min-height:40px; gap:6px; }
  body.game-active #room .section-title > div { min-width:0; }
  body.game-active #room .section-title .eyebrow { font-size:9px; }
  body.game-active #room .section-title h2 { overflow:hidden; margin:2px 0 0; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
  body.game-active #room .section-title button { min-height:34px; padding:6px 9px; font-size:12px; }
  body.game-active #game > .game-head { min-height:32px; margin:5px 0 7px; padding:4px 8px; }
  body.game-active #room > aside > .panel { margin-bottom:8px; }

  body.apple-active #apple-play-area { padding:2px 0 6px; overflow:hidden; }
  body.apple-active #apple-drag-info { width:calc(100% - 12px); height:32px; min-height:32px; margin:2px auto 5px; padding:0 8px; font-size:12px; }
  body.apple-active #apple-mobile-scroll { display:grid; width:min(300px,calc(100% - 16px)); min-height:32px; margin:0 auto 4px; grid-template-columns:42px 1fr 42px; align-items:center; gap:5px; }
  body.apple-active #apple-mobile-scroll button { min-height:30px; padding:2px 8px; color:#ffd1b1; border-color:#874b37; background:#3b211d; font-size:24px; line-height:1; }
  body.apple-active #apple-mobile-scroll span { color:#b9c5d7; font-size:11px; font-weight:700; text-align:center; }
  body.apple-active #apple-board-viewport { width:100%; padding:7px 2px 11px; overflow-x:auto; overflow-y:visible; overscroll-behavior-x:contain; scrollbar-color:#735e57 #0a121e; scrollbar-width:thin; }
  body.apple-active .apple-board { max-width:none; margin:0; }
  body.apple-active .apple { min-width:34px; font-size:16px; }

  body.tetris-active #tetris-play-area { width:100%; max-width:430px; margin:4px auto 0; padding:8px; overflow:visible; }
  body.tetris-active .tetris-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"hold next" "board board"; align-items:stretch; gap:7px; }
  body.tetris-active .tetris-stage > .tetris-box:first-child { grid-area:hold; }
  body.tetris-active .tetris-stage > .tetris-box:last-child { grid-area:next; }
  body.tetris-active .tetris-main { grid-area:board; width:min(76vw,280px); max-width:100%; margin:0 auto; }
  body.tetris-active #tetris-board { width:100%; height:auto; max-width:none; }
  body.tetris-active .tetris-box { display:flex; min-width:0; min-height:106px; padding:6px; flex-direction:column; align-items:center; justify-content:flex-start; }
  body.tetris-active .tetris-box b { margin-bottom:3px; }
  body.tetris-active .tetris-box canvas { width:auto; max-width:100%; height:64px; margin:0 auto 3px; object-fit:contain; }
  body.tetris-active #tetris-next { width:100%; }
  body.tetris-active #tetris-status, body.tetris-active #tetris-stats { overflow:hidden; font-size:9px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
  body.tetris-active .tetris-garbage-meter { right:-9px; }
  body.tetris-active .tetris-help { display:none; }
  body.tetris-active #tetris-opponents { margin-top:8px; padding-top:8px; }
}

@media (max-width:850px) and (pointer:coarse), (max-width:850px) and (hover:none) {
  body.tetris-active #tetris-controls { display:grid; margin-top:8px; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-areas:"hold ccw r180 cw" "left down right drop"; gap:6px; }
  body.tetris-active #tetris-controls button { min-width:0; min-height:46px; padding:7px 3px; font-size:16px; }
  body.tetris-active #tetris-controls [data-tetris-action="hold"] { grid-area:hold; }
  body.tetris-active #tetris-controls [data-tetris-action="rotateCCW"] { grid-area:ccw; }
  body.tetris-active #tetris-controls [data-tetris-action="rotate180"] { grid-area:r180; }
  body.tetris-active #tetris-controls [data-tetris-action="rotateCW"] { grid-area:cw; }
  body.tetris-active #tetris-controls [data-tetris-action="left"] { grid-area:left; }
  body.tetris-active #tetris-controls [data-tetris-action="softDrop"] { grid-area:down; }
  body.tetris-active #tetris-controls [data-tetris-action="right"] { grid-area:right; }
  body.tetris-active #tetris-controls [data-tetris-action="hardDrop"] { grid-area:drop; }
}