/* COIN-CABIN TETRIS shell */
:root {
  --bg: #07090f;
  --line: #2a3450;
  --text: #e8eef8;
  --muted: #8a9ab0;
  --acc: #6ec8ff;
  --hot: #ff80c8;
  --gold: #ffd060;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, "Noto Sans KR", sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
#wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
}
.bar {
  width: min(720px, 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}
.brand span { color: var(--acc); font-weight: 700; letter-spacing: 0.12em; }
.hud { display: flex; flex-wrap: wrap; gap: 14px; }
.hud b { color: var(--gold); font-variant-numeric: tabular-nums; }
#stage-box {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
  width: min(720px, 100%);
  padding: 8px;
  background: #0a0e18;
  border: 2px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #000, 0 20px 50px rgba(0,0,0,.55), 0 0 28px rgba(110,200,255,.08);
}
.side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100px;
  flex-shrink: 0;
}
.panel {
  background: #0e1420;
  border: 1px solid #243044;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.panel small {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.panel canvas {
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #060a12;
  border-radius: 4px;
}
.tips p {
  margin: 3px 0;
  font-size: 0.72rem;
  color: #9ab0c8;
  text-align: left;
}
.play {
  position: relative;
  width: 200px;
  height: 400px;
  flex-shrink: 0;
  background: #000;
  border: 2px solid #1e2a40;
  box-shadow: inset 0 0 24px rgba(0,0,0,.6);
  image-rendering: pixelated;
}
#c {
  width: 100%; height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #050810;
}
#scan {
  pointer-events: none;
  /* inset 단축 속성은 Chrome 87 부터다. 구버전(실기: Android 11 · Chrome 83)은 이 선언을
       통째로 버려 절대배치 요소가 스테이지를 덮지 못하고 정적 위치로 내려앉는다.
       실측 2026-08-07: 이 때문에 6대 캐비닛 전부 START 가 화면 밖으로 밀려 누를 수 없었다. */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.22) 2px,
    rgba(0,0,0,.22) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.8;
}
#scan.off { display: none; }
#overlay {
  /* inset 단축 속성은 Chrome 87 부터다. 구버전(실기: Android 11 · Chrome 83)은 이 선언을
       통째로 버려 절대배치 요소가 스테이지를 덮지 못하고 정적 위치로 내려앉는다.
       실측 2026-08-07: 이 때문에 6대 캐비닛 전부 START 가 화면 밖으로 밀려 누를 수 없었다. */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(4,6,12,.86);
  text-align: center; padding: 12px; gap: 6px;
  z-index: 4;
}
#overlay.hidden { display: none; }
#overlay h1 {
  margin: 0; font-size: 1.6rem;
  color: var(--acc); letter-spacing: 0.16em;
  text-shadow: 0 0 18px rgba(110,200,255,.45);
}
#overlay .tag { color: var(--gold); font-size: 0.78rem; margin: 0; }
#overlay p { margin: 0; color: var(--muted); font-size: 0.78rem; max-width: 16rem; }
#overlay .hint { color: var(--hot); font-size: 0.75rem; }
#overlay .cab-go-strip, #overlay .cab-go-strip * { pointer-events: auto; }
#btn-start {
  margin-top: 6px; padding: 10px 16px;
  border: 1px solid var(--acc); border-radius: 8px;
  background: linear-gradient(180deg, #1a3a50, #0e2030);
  color: var(--acc); font-weight: 700; font-size: 0.9rem;
  cursor: pointer; letter-spacing: 0.06em;
  pointer-events: auto;
}
#btn-start:hover { filter: brightness(1.12); }
#toast {
  position: absolute; left: 50%; top: 18%;
  transform: translateX(-50%);
  background: rgba(10,12,24,.92); border: 1px solid var(--gold);
  color: var(--gold); padding: 5px 12px; border-radius: 6px;
  font-weight: 700; font-size: 0.85rem;
  pointer-events: none; z-index: 5;
}
.foot { opacity: 0.95; }
.chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
#fps { font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }
#touch {
  display: none;
  position: absolute;
  left: 0; right: 0; bottom: -58px;
  justify-content: center; gap: 6px;
  flex-wrap: wrap;
  pointer-events: none;
  z-index: 6;
}
#touch button {
  pointer-events: auto;
  min-width: 48px; height: 42px;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(16,20,36,.88); color: var(--text);
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
  touch-action: none;
}
@media (max-width: 640px) {
  .side.left .tips { display: none; }
  .side { width: 72px; }
  .panel canvas#hold { width: 56px; height: 56px; }
  .panel canvas#next { width: 56px; height: 168px; }
  #touch { display: flex; bottom: 4px; position: relative; margin-top: 8px; }
  #stage-box { flex-wrap: wrap; }
  .play { order: 0; }
  .side.left { order: 1; }
  .side.right { order: 2; }
}
@media (max-width: 420px) {
  .side { display: none; }
}

/* Landscape mobile contract
 *
 * CabinShell owns the thumb rails. TETRIS keeps its tall playfield in the
 * corridor and moves the compact status footer ahead of the board so the
 * shared fitter can account for every visible row. Physical margins precede
 * margin-inline for Android System WebView 83.
 */
@media (max-height: 430px) and (orientation: landscape) {
  body[data-cab-game="tetris"].cab-touch-active #wrap > #cabin-bar {
    order: 0;
  }
  body[data-cab-game="tetris"].cab-touch-active #wrap > header.bar {
    order: 1;
    min-height: 18px;
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 0.68rem;
    line-height: 1;
  }
  body[data-cab-game="tetris"].cab-touch-active #wrap > footer.bar.foot {
    order: 2;
    display: flex;
    min-height: 20px;
    height: 20px;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    opacity: .9;
    font-size: 0.62rem;
    line-height: 1;
  }
  body[data-cab-game="tetris"].cab-touch-active #wrap > footer.bar.foot > span:first-child {
    display: none;
  }
  body[data-cab-game="tetris"].cab-touch-active #wrap > footer.bar.foot .chk {
    gap: 3px;
    white-space: nowrap;
  }
  body[data-cab-game="tetris"].cab-touch-active #wrap > footer.bar.foot input {
    width: 14px;
    height: 14px;
    margin: 0;
  }
  body[data-cab-game="tetris"].cab-touch-active #wrap > footer.bar.foot #fps {
    min-width: 3.2rem;
  }
  body[data-cab-game="tetris"].cab-touch-active #stage-box {
    order: 3;
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
    flex-wrap: nowrap;
  }
  body[data-cab-game="tetris"].cab-touch-active #stage-box .side {
    display: none;
  }
  body[data-cab-game="tetris"].cab-touch-active #stage-box .play {
    width: var(--tetris-play-width, 145px) !important;
    height: var(--tetris-play-height, 290px) !important;
  }
  body[data-cab-game="tetris"].cab-touch-active #overlay {
    padding: 4px;
    gap: 4px;
  }
  body[data-cab-game="tetris"].cab-touch-active #overlay h1 {
    font-size: 1.05rem;
  }
  body[data-cab-game="tetris"].cab-touch-active #overlay p {
    display: none;
  }
  body[data-cab-game="tetris"].cab-touch-active #btn-start {
    width: calc(100% - 8px);
    min-height: 44px;
    margin-top: 2px;
    padding: 6px 4px;
    font-size: 0.65rem;
    line-height: 1.1;
    white-space: nowrap;
  }
}