.game-tabs { display: flex; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #e9ecdf; }
.game-tabs a { padding: 11px 13px; min-height: 42px; color: #69745f; text-decoration: none; font-size: 12px; font-weight: bold; white-space: nowrap; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.game-tabs a:hover { background: #f8faef; }
.game-tabs a[aria-current] { background: var(--lime); color: #27331b; box-shadow: 0 1px 3px #0001; }
[data-theme=dark] .game-tabs { background: #202b19; }
[data-theme=dark] .game-tabs a { color: #c0cdae; }
[data-theme=dark] .game-tabs a:hover { background: #344526; }
[data-theme=dark] .game-tabs a[aria-current] { color: #27331b; }
.arcade-intro { padding: 38px 0 30px; }
.arcade-intro h1 { font-size: 57px; letter-spacing: -3px; }
.arcade-intro p { max-width: 590px; font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; }
.arcade-layout { display: grid; grid-template-columns: minmax(0,1fr) 285px; gap: 24px; align-items: start; }
.arcade-card { border: 1px solid #46583a; border-radius: 13px; overflow: hidden; background: #ebeee2; box-shadow: 0 4px 0 #d8ddce; scroll-margin-block: 12px; }
.arcade-hud { display: flex; align-items: center; gap: 25px; padding: 15px 18px 10px; min-height: 64px; }
.arcade-hud .score-item strong { font-size: 26px; }
.arcade-hud .status { font-size: 8px; }
.arcade-stats { display: flex; justify-content: space-around; gap: 6px; padding: 8px 12px 12px; font: 10px var(--mono); color: #6b795b; }
.arcade-stats strong { color: #34462a; }
.arcade-play-area { padding: 0 12px; }
.arcade-screen-wrap { min-width: 0; }
.tetris-game .arcade-screen-wrap { position: relative; }
.tetris-game .arcade-screen-wrap > .overlay { border-radius: 5px; }
.arcade-screen { position: relative; margin: auto; overflow: hidden; background: #182417; border: 2px solid #586e47; border-radius: 5px; touch-action: none; }
.bomber-game .arcade-screen { aspect-ratio: 13/11; }
.tetris-game .arcade-screen { aspect-ratio: 1/2; height: 510px; max-width: 100%; }
.arcade-screen canvas { width: 100%; height: 100%; display: block; }
.arcade-screen .overlay { padding: 20px; }
.arcade-screen .overlay h2 { font-size: 34px; }
.arcade-screen .overlay p { font-size: 12px; }
.arcade-screen .overlay-content { max-width: 290px; }
.arcade-screen .overlay-tag { margin-top: 0; font-size: 8px; }
.tetris-game .arcade-screen-wrap > .overlay h2 { font-size: 30px; }
.tetris-game .arcade-screen-wrap > .overlay .overlay-tag { margin-top: 0; font-size: 8px; }
.tetris-game .arcade-screen-wrap > .overlay .overlay-content { width: 100%; max-width: 290px; }
.arcade-card .game-toolbar { min-height: 48px; padding: 2px 12px; }
.arcade-card .game-toolbar button { min-height: 44px; padding: 6px; }
.arcade-touch { display: none; gap: 6px; justify-content: center; padding: 10px 0; touch-action: manipulation; user-select: none; }
.arcade-touch button { border: 1px solid #bfcab0; border-bottom: 3px solid #aab998; background: #e0e8d4; border-radius: 7px; min-width: 44px; min-height: 48px; font-size: 20px; touch-action: manipulation; }
.arcade-touch button:active { background: var(--lime); color: #27331b; }
.bomber-pad { display: grid; grid-template-columns: repeat(3,48px); grid-template-rows: repeat(2,48px); gap: 5px; }
.bomber-pad [data-action=up] { grid-area: 1/2; }.bomber-pad [data-action=left] { grid-area: 2/1; }.bomber-pad [data-action=down] { grid-area: 2/2; }.bomber-pad [data-action=right] { grid-area: 2/3; }
.arcade-touch .bomb-action { min-width: 80px; align-self: center; min-height: 72px; background: #e9c18a; color: #5e3c20; font-weight: bold; font-size: 13px; }
.tetris-touch { grid-template-columns: repeat(3,minmax(44px,75px)); }
.tetris-touch button { font-size: 13px; }
.tetris-mobile-preview { grid-column: 1/-1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; }
.tetris-mobile-preview > span { font: 8px var(--mono); color: var(--muted); }
.tetris-mobile-preview .piece-preview { min-width: 34px; min-height: 26px; padding: 0; gap: 1px; }
.arcade-sidebar { display: flex; flex-direction: column; gap: 18px; }
.arcade-sidebar h2 { font-size: 22px; margin-bottom: 15px; }
.arcade-sidebar p { font-size: 12px; line-height: 1.7; color: var(--muted); }
.arcade-instructions { display: grid; gap: 12px; margin: 20px 0 0; }
.arcade-instructions > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; }
.arcade-instructions kbd { min-width: 53px; font-size: 10px; }
.legend-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 11px; color: var(--muted); }
.legend-dot { width: 16px; height: 16px; border: 2px solid #718456; background: #c2d99c; border-radius: 3px; flex-shrink: 0; }
.legend-dot.danger { border-color: #ba6e38; background: #f4bb58; }.legend-dot.portal { border-color: #4d9064; background: #8ccaa1; }
.piece-preview { display: inline-grid; gap: 2px; padding: 8px; min-width: 80px; min-height: 53px; align-content: center; justify-content: center; vertical-align: middle; }
.piece-preview i { display: block; width: 15px; height: 15px; border-radius: 2px; }
.next-pieces { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.hold-row { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.hold-row > span { font: 9px var(--mono); color: var(--muted); }
.arcade-note { font: 10px/1.7 var(--mono); color: var(--muted); padding: 0 8px; }
.arcade-card .score-form { width: 250px; max-width: 100%; }
.arcade-card .skip-score { min-height: 44px; }
[data-theme=dark] .arcade-card { background: #20291c; box-shadow: 0 4px 0 #080d05; }
[data-theme=dark] .arcade-stats { color: #b7c6a3; } [data-theme=dark] .arcade-stats strong { color: #e0edce; }
[data-theme=dark] .arcade-touch button { background: #2f3f22; border-color: #526c3a; color: #e3edda; }
[data-theme=dark] .arcade-touch .bomb-action { background: #a16c34; border-color: #bf9253; color: #fff4db; }

@media (max-width: 1000px) {
  .site-header { gap: 12px; }
  .game-tabs a { padding-inline: 10px; }
  .header-actions .sound-button { width: 44px; height: 44px; justify-content: center; padding: 6px; }
  .header-actions .sound-button > span:last-child { display: none; }
}
@media (max-width:760px), (pointer:coarse) {
  .arcade-touch { display: flex; }
  .arcade-touch.tetris-touch { display: grid; }
}
@media (max-width:760px) {
  .site-header { height: auto; min-height: 120px; flex-wrap: wrap; padding-block: 10px; gap: 8px; }
  .game-tabs { order: 3; width: 100%; gap: 4px; }
  .game-tabs a { flex: 1; min-height: 44px; padding: 8px 2px; font-size: 11px; }
  .arcade-intro { padding: 24px 0; }
  .arcade-intro h1 { font-size: clamp(32px,8vw,44px); letter-spacing: -1.8px; }
  .arcade-intro p { font-size: 12px; }
  .arcade-layout { display: flex; flex-direction: column; gap: 20px; }
  .arcade-card, .arcade-sidebar { width: 100%; }
  .arcade-hud { padding: 10px 12px 6px; gap: 20px; min-height: 56px; }
  .arcade-hud .score-item strong { font-size: 23px; }
  .arcade-stats { padding: 7px 8px 10px; font-size: 9px; min-height: 32px; flex-wrap: wrap; }
  .arcade-hud .status { font-size: 7px; max-width: 65px; }
  .arcade-screen .overlay { padding: 12px; }
  .arcade-screen .overlay h2 { font-size: 28px; }
  .arcade-screen .overlay p { font-size: 11px; }
  .bomber-game .arcade-screen { max-width: max(190px,calc((100svh - 290px) * 1.1818)); }
  .tetris-game .arcade-screen { height: min(540px,max(150px,calc(100svh - 326px))); }
  .arcade-card .game-toolbar { min-height: 44px; }
  .arcade-sidebar .arcade-instructions { display: none; }
  .arcade-sidebar .panel { padding: 20px; }
}
@media (min-width:541px) and (max-height:540px) and (max-width:1000px) {
  .arcade-layout { display: flex; flex-direction: column; }
  .arcade-card { width: min(100%,580px); margin-inline: auto; }
  .arcade-hud { min-height: 44px; padding: 7px 12px; }
  .arcade-hud .score-item strong { font-size: 20px; }
  .arcade-stats { min-height: 28px; padding: 4px 12px; }
  .arcade-play-area { display: grid; grid-template-columns: minmax(0,1fr) 170px; align-items: center; gap: 8px; padding-inline: 10px; }
  .arcade-touch { display: flex; flex-wrap: wrap; width: 170px; padding: 0; }
  .arcade-touch.tetris-touch { display: grid; grid-template-columns: repeat(2,75px); }
  .arcade-touch .bomb-action { width: 100%; min-height: 44px; }
  .bomber-pad { grid-template-columns: repeat(3,44px); grid-template-rows: repeat(2,44px); gap: 4px; }
  .arcade-touch button { min-height: 44px; }
  .bomber-game .arcade-screen { width: auto; max-width: 100%; height: max(140px,calc(100svh - 145px)); }
  .tetris-game .arcade-screen { height: max(140px,calc(100svh - 145px)); }
  .arcade-screen .overlay h2 { font-size: 23px; }
  .arcade-screen .overlay-tag, .arcade-screen #overlay-hint { display: none; }
  .arcade-screen .overlay { display: flex; flex-direction: column; overflow: auto; justify-content: flex-start; }
  .arcade-screen .overlay-content { margin: auto 0; flex-shrink: 0; }
  .arcade-sidebar { width: 100%; }
}