@font-face {
  font-family: "NekstMono";
  src: url("../nekstmono-bold.otf") format("opentype");
  font-display: swap;
  font-weight: 700;
}

:root {
  --paper: #faf7ed;
  --ink: #050505;
  --grid: #e4ddc5;
  --shadow: #d2c69b;
  --safe-top: max(0px, env(safe-area-inset-top));
  --safe-bottom: max(0px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--paper); }
body {
  font-family: "NekstMono", "Courier New", monospace;
  font-weight: 700;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
#app { position: fixed; inset: 0; overflow: hidden; background: var(--paper); }

.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.008);
  transition: opacity .30s ease, transform .42s cubic-bezier(.2,.8,.2,1), visibility 0s linear .42s;
}
.screen.screen-active { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); transition-delay: 0s; }
.screen.screen-leaving { opacity: 0; transform: scale(.994); }

/* ---------- common buttons ---------- */
.ui-button, .ui-icon-button, .hud-icon-button, .control-button, .segmented button, .pause-play {
  border: 5px solid var(--ink);
  background: rgba(250,247,237,.96);
  color: var(--ink);
  border-radius: 24px;
  cursor: pointer;
  outline: 0;
  font-weight: 700;
  transition: background-color .09s linear, color .09s linear, transform .06s ease;
}
.ui-button:hover, .ui-icon-button:hover, .hud-icon-button:hover, .control-button:hover, .segmented button:hover,
.ui-button.hovered { background: var(--ink); color: var(--paper); }
.ui-button:active, .ui-icon-button:active, .hud-icon-button:active, .control-button:active, .segmented button:active { transform: scale(.965); }

.chev {
  display: block;
  width: 24px;
  height: 24px;
  border-left: 5px solid currentColor;
  border-bottom: 5px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- loading ---------- */
.loading-screen { z-index: 30; }
.loading-pieces { position: absolute; inset: 0; overflow: hidden; }
.loading-piece {
  position: absolute;
  height: auto;
  will-change: transform, opacity;
  animation: driftDown var(--fall-dur, 14s) linear infinite;
  animation-delay: var(--fall-delay, 0s);
}
@keyframes driftDown {
  0% { transform: translate3d(0,-30vh,0) rotate(var(--fall-r0,0deg)); opacity: 0; }
  8% { opacity: .95; }
  90% { opacity: .95; }
  100% { transform: translate3d(var(--fall-drift,0),175vh,0) rotate(var(--fall-r1,0deg)); opacity: 0; }
}

/* ---------- footer ---------- */
.brand-footer {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 984px;
  display: grid;
  grid-template-columns: 87px 1fr 50px;
  align-items: center;
  column-gap: 26px;
}
.rh-logo { display: block; width: 87px; height: 39px; object-fit: contain; }
.age-logo { display: block; width: 50px; height: 50px; object-fit: contain; }
.copyright { text-align: center; font-size: 9px; line-height: 1.26; letter-spacing: -.02em; white-space: nowrap; }

/* ---------- decorative pages ---------- */
.decor-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.decor { position: absolute; height: auto; object-fit: contain; }
/* Exact 1920x1080 concept starting positions. */
.menu-screen .decor-a { width: 264px; left: 59px; top: 173px; }
.menu-screen .decor-b { width: 331px; left: 393px; top: 32px; }
.menu-screen .decor-c { width: 260px; right: 169px; top: -101px; }
.menu-screen .decor-d { width: 331px; left: 42px; bottom: -98px; }
.menu-screen .decor-e { width: 388px; right: -111px; top: 185px; }
.menu-screen .decor-f { width: 335px; right: 28px; bottom: -129px; }

.info-decor .info-a { width: 264px; left: 59px; top: -87px; }
.info-decor .info-b { width: 335px; right: 22px; top: -142px; }
.info-decor .info-c { width: 331px; left: 42px; bottom: -99px; }
.info-decor .info-d { width: 388px; right: -145px; bottom: 89px; }
.info-decor .info-e { width: 331px; left: 551px; bottom: -219px; }
.info-decor .info-f { width: 260px; right: 217px; bottom: -229px; }

/* Other pages drift after opening, but start exactly at the supplied layout. */
.menu-screen.screen-active .decor, .info-screen.screen-active .decor { animation: conceptDrift 22s linear 2.2s infinite; }
.menu-screen.screen-active .decor:nth-child(2), .info-screen.screen-active .decor:nth-child(2) { animation-delay: 4s; animation-duration: 25s; }
.menu-screen.screen-active .decor:nth-child(3), .info-screen.screen-active .decor:nth-child(3) { animation-delay: 5.5s; animation-duration: 23s; }
.menu-screen.screen-active .decor:nth-child(4), .info-screen.screen-active .decor:nth-child(4) { animation-delay: 3.2s; animation-duration: 26s; }
.menu-screen.screen-active .decor:nth-child(5), .info-screen.screen-active .decor:nth-child(5) { animation-delay: 6s; animation-duration: 24s; }
.menu-screen.screen-active .decor:nth-child(6), .info-screen.screen-active .decor:nth-child(6) { animation-delay: 4.7s; animation-duration: 27s; }
@keyframes conceptDrift { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(0,122vh,0); } }
.screen:not(.screen-active) .decor, .screen:not(.screen-active) .loading-piece { animation-play-state: paused !important; }

/* ---------- home / concept-01 ---------- */
.home-center { position: absolute; inset: 0; z-index: 4; }
.main-logo { position: absolute; left: 617px; top: 443px; width: 685px; height: 194px; object-fit: contain; }
.home-center .ui-button { position: absolute; height: 89px; padding: 0 20px; line-height: 1; font-size: 42px; white-space: nowrap; display: grid; place-items: center; }
.primary-button { left: 720px; top: 713px; width: 480px; }
.home-row { position: absolute; inset: 0; }
.home-row .ui-button:nth-child(1) { left: 578px; top: 833px; width: 243px; }
.home-row .ui-button:nth-child(2) { left: 837px; top: 833px; width: 299px; }
.home-row .ui-button:nth-child(3) { left: 1151px; top: 833px; width: 191px; }

/* ---------- game / concept-02 ---------- */
.game-screen { isolation: isolate; }
.game-decor-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.game-decor { position: absolute; height: auto; object-fit: contain; pointer-events: none; }
/* Game decorations never animate. */
.game-decor-orange { width: 264px; left: 294px; top: 249px; }
.game-decor-yellow { width: 331px; left: 330px; top: 858px; }
.game-decor-green  { width: 260px; left: 1341px; top: -104px; }
.game-decor-blue   { width: 331px; left: -185px; top: 492px; }
.game-decor-purple { width: 388px; left: 1737px; top: 191px; }
.game-decor-pink   { width: 335px; left: 1564px; top: 824px; }

.game-brand { position: absolute; z-index: 4; left: 156px; top: 69px; width: 362px; height: 103px; }
.game-logo { display: block; width: 100%; height: 100%; object-fit: contain; }

.board-wrap {
  position: absolute;
  z-index: 5;
  left: 698px;
  top: 6px;
  width: 524px;
  height: 1071px;
  overflow: hidden;
  border: 5px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
}
.static-game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; background: transparent; }
.game-fx-layer, .modal-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.game-fx-layer { z-index: 15; }
.modal-layer { z-index: 20; display: grid; place-items: center; padding: 0; }

.game-controls { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.control-button { position: absolute; width: 121px; height: 89px; padding: 0; display: grid; place-items: center; pointer-events: auto; }
.control-up    { left: 280px; top: 645px; }
.control-left  { left: 157px; top: 737px; }
.control-down  { left: 281px; top: 737px; }
.control-right { left: 405px; top: 737px; }
.control-drop  { left: 224px; top: 877px; }
.control-rotate{ left: 355px; top: 877px; }
.arrow-icon { width: 28px; height: 28px; border-left: 5px solid currentColor; border-bottom: 5px solid currentColor; }
.arrow-left  { transform: rotate(45deg); }
.arrow-right { transform: rotate(225deg); }
.arrow-up    { transform: rotate(135deg); }
.arrow-down  { transform: rotate(-45deg); }
.double-down { width: 42px; height: 48px; display: grid; place-items: center; position: relative; }
.double-down i { position: absolute; width: 27px; height: 27px; border-right: 5px solid currentColor; border-bottom: 5px solid currentColor; transform: rotate(45deg); }
.double-down i:first-child { top: 2px; }
.double-down i:last-child { top: 17px; }
.rotate-circle { width: 54px; height: 54px; border: 5px solid currentColor; border-radius: 50%; display: block; }

.hud { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.hud-row, .hud-actions { position: absolute; }
.hud-row { display: block; }
.hud-caption, .next-caption { position: absolute; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 16px; line-height: 1; text-transform: none; }
.hud-box, .next-box, .hud-icon-button { border: 5px solid var(--ink); border-radius: 24px; background: rgba(250,247,237,.96); }
.hud-box { display: grid; place-items: center; white-space: nowrap; }
.level-row { left: 1460px; top: 300px; width: 153px; height: 89px; }
.level-caption { left: 0; top: 19px; }
.level-box { position: absolute; right: 0; top: 0; width: 121px; height: 89px; font-size: 46px; }
.next-row { left: 1333px; top: 422px; width: 409px; height: 89px; }
.next-caption { left: 0; top: 18px; }
.next-box { position: absolute; right: 0; top: 0; width: 378px; height: 89px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 10px; padding: 11px 16px; overflow: hidden; }
.next-piece { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.next-canvas { display: block; width: 100%; height: 100%; }
.score-row { left: 1280px; top: 562px; width: 511px; height: 89px; }
.score-caption { left: 0; top: 18px; }
.score-box { position: absolute; right: 0; top: 0; width: 479px; height: 89px; padding: 0 10px; font-size: 39px; letter-spacing: -.045em; }
.hud-actions { left: 1414px; top: 691px; display: flex; gap: 11px; pointer-events: auto; }
.hud-icon-button { width: 120px; height: 89px; padding: 0; display: grid; place-items: center; }
.pause-icon { grid-template-columns: 7px 7px; gap: 11px; justify-content: center; }
.pause-icon span { width: 5px; height: 38px; border-radius: 3px; background: currentColor; display: block; }
.back-icon .chev { width: 25px; height: 25px; }

/* ---------- mini cards: centered in the grid itself ---------- */
.mini-card {
  pointer-events: auto;
  width: 71.56%;
  min-height: 19.33%;
  max-height: 90%;
  background: rgba(250,247,237,.985);
  border: 5px solid var(--ink);
  border-radius: 26px;
  box-shadow: -10px 10px 0 var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 22px;
  opacity: 0;
  transform: scale(.94);
  animation: cardIn .18s cubic-bezier(.2,.9,.25,1.1) forwards;
}
.mini-card.vanish { animation: cardOut .18s ease forwards; }
@keyframes cardIn { to { opacity: 1; transform: scale(1); } }
@keyframes cardOut { to { opacity: 0; transform: scale(.97); } }
.mini-card-logo { width: 86%; max-height: 50%; object-fit: contain; margin: 0 auto 4px; }
.super-label { font-size: 26px; line-height: .9; margin-bottom: -6px; }
.mini-score { font-size: 42px; line-height: 1; }
.mini-title { font-size: 55px; line-height: .9; }
.mini-level-label { font-size: 35px; line-height: 1; }
.mini-level-number { font-size: 92px; line-height: .78; }
.pause-play { width: 90px; height: 72px; margin-top: 18px; padding: 0; display: grid; place-items: center; font-size: 0; }
.pause-play::after { content: ""; width: 24px; height: 24px; border-right: 5px solid currentColor; border-top: 5px solid currentColor; transform: rotate(45deg); margin-left: -7px; }
.bye-card .mini-title { font-size: 62px; }
.fx-pop { position: absolute; border-radius: 50%; transform: scale(.2); animation: fxPop .34s ease-out forwards; }
@keyframes fxPop { to { transform: scale(3.2); opacity: 0; } }

.gameover-card { width: 88%; min-height: 0; padding: 25px 24px; }
.gameover-title { font-size: 47px; line-height: .95; margin-bottom: 9px; }
.gameover-sub { font-size: 21px; }
.gameover-score { font-size: 31px; margin: 2px 0 12px; }
.nickname-input { width: 86%; height: 54px; border: 4px solid var(--ink); border-radius: 19px; background: transparent; color: var(--ink); text-align: center; font-size: 24px; outline: 0; user-select: text; }
.save-status { min-height: 15px; font-size: 10px; margin-top: 4px; }
.gameover-actions { width: 66%; display: flex; flex-direction: column; gap: 7px; margin-top: 5px; }
.gameover-actions .ui-button { height: 39px; border-width: 4px; border-radius: 18px; padding: 0 10px; font-size: 19px; }

/* ---------- info pages / concept-05..07 ---------- */
.info-header { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.info-header > * { pointer-events: auto; }
.header-logo { position: absolute; left: 617px; top: 39px; width: 685px; height: 194px; object-fit: contain; }
.ui-icon-button { position: absolute; left: 448px; top: 132px; width: 121px; height: 89px; padding: 0; display: grid; place-items: center; }
.ui-icon-button .chev { width: 25px; height: 25px; }
.section-tag { position: absolute; left: 1358px; top: 126px; height: 89px; border: 5px solid var(--ink); border-radius: 24px; background: rgba(250,247,237,.96); padding: 0 28px; display: grid; place-items: center; font-size: 42px; line-height: 1; white-space: nowrap; }

.scores-content, .settings-content, .help-content { position: absolute; z-index: 5; }
.scores-content { left: 523px; top: 323px; width: 875px; height: 555px; overflow-y: scroll; overflow-x: hidden; padding-right: 28px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.scores-content::-webkit-scrollbar { width: 15px; }
.scores-content::-webkit-scrollbar-track { background: transparent; }
.scores-content::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 999px; }
.scores-list { font-size: 31px; }
.score-row { display: grid; grid-template-columns: 64px 285px 120px 1fr; column-gap: 18px; line-height: 1.47; align-items: baseline; }
.score-row .rank, .score-row .lvl, .score-row .pts { font-variant-numeric: tabular-nums; }
.score-row .nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-loading, .empty-scores { margin-top: 130px; text-align: center; }

.settings-content { left: 50%; top: 404px; transform: translateX(-50%); width: 598px; height: 360px; display: flex; flex-direction: column; align-items: center; }
.toggle-group { display: flex; gap: 66px; }
.setting-block { width: 258px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.setting-title { width: 258px; height: 70px; border: 5px solid var(--ink); border-radius: 24px; background: rgba(250,247,237,.96); display: grid; place-items: center; font-size: 31px; white-space: nowrap; }
.segmented { display: flex; gap: 11px; }
.segmented button { height: 70px; min-width: 124px; padding: 0 20px; font-size: 31px; }
.segmented button.active { background: var(--ink); color: var(--paper); }
.difficulty-wrap { margin-top: 49px; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.difficulty { gap: 11px; }
.difficulty button { min-width: 192px; }

.help-content { left: 50%; top: 364px; transform: translateX(-50%); width: 760px; height: 460px; display: flex; flex-direction: column; align-items: center; gap: 86px; text-align: center; }
.help-section { width: 100%; }
.help-section h2 { margin: 0; font-size: 28px; line-height: 1; }
.help-rule { width: 344px; height: 5px; background: var(--ink); margin: 11px auto 17px; }
.help-section p { margin: 3px 0; font-size: 25px; line-height: 1.16; }
.info-footer { bottom: 14px; }

/* ---------- scale 1920x1080 concept proportionally on standard landscape ---------- */
@media (min-width: 721px) and (min-aspect-ratio: 4/3) {
  .home-center, .game-screen, .info-screen { --sx: calc(100vw / 1920); --sy: calc(100vh / 1080); }
  /* Home */
  .main-logo { left: 32.1354vw; top: 41.0185vh; width: 35.6771vw; height: auto; }
  .home-center .ui-button { height: 8.2407vh; border-width: max(3px,.2604vw); border-radius: 2.2222vh; font-size: 3.8889vh; }
  .primary-button { left: 37.5vw; top: 66.0185vh; width: 25vw; }
  .home-row .ui-button:nth-child(1) { left: 30.1042vw; top: 77.1296vh; width: 12.6563vw; }
  .home-row .ui-button:nth-child(2) { left: 43.5938vw; top: 77.1296vh; width: 15.5729vw; }
  .home-row .ui-button:nth-child(3) { left: 59.9479vw; top: 77.1296vh; width: 9.9479vw; }
  .brand-footer { width: 51.25vw; grid-template-columns: 4.5313vw 1fr 2.6042vw; column-gap: 1.3542vw; bottom: 1.2963vh; }
  .rh-logo { width: 4.5313vw; height: auto; } .age-logo { width: 2.6042vw; height: auto; } .copyright { font-size: .46875vw; }
  .menu-screen .decor-a, .info-decor .info-a { width: 13.75vw; }
  .menu-screen .decor-b, .info-decor .info-e { width: 17.2396vw; }
  .menu-screen .decor-c, .info-decor .info-f { width: 13.5417vw; }
  .menu-screen .decor-d, .info-decor .info-c { width: 17.2396vw; }
  .menu-screen .decor-e, .info-decor .info-d { width: 20.2083vw; }
  .menu-screen .decor-f, .info-decor .info-b { width: 17.4479vw; }

  /* Game */
  .game-brand { left: 8.125vw; top: 6.3889vh; width: 18.8542vw; height: auto; }
  .board-wrap { left: 36.3542vw; top: .5556vh; width: 27.2917vw; height: 99.1667vh; border-width: max(3px,.2604vw); border-radius: 2.2222vh; }
  .game-decor-orange { width: 13.75vw; left: 15.3125vw; top: 23.0556vh; }
  .game-decor-yellow { width: 17.2396vw; left: 17.1875vw; top: 79.4444vh; }
  .game-decor-green { width: 13.5417vw; left: 69.8438vw; top: -9.6296vh; }
  .game-decor-blue { width: 17.2396vw; left: -9.6354vw; top: 45.5556vh; }
  .game-decor-purple { width: 20.2083vw; left: 90.4688vw; top: 17.6852vh; }
  .game-decor-pink { width: 17.4479vw; left: 81.4583vw; top: 76.2963vh; }
  .control-button { width: 6.3021vw; height: 8.2407vh; border-width: max(3px,.2604vw); border-radius: 2.2222vh; }
  .control-up { left:14.5833vw; top:59.7222vh; } .control-left{left:8.1771vw;top:68.2407vh;} .control-down{left:14.6354vw;top:68.2407vh;} .control-right{left:21.0938vw;top:68.2407vh;} .control-drop{left:11.6667vw;top:81.2037vh;} .control-rotate{left:18.4896vw;top:81.2037vh;}
  .arrow-icon { width: 2.5926vh; height: 2.5926vh; border-width: 0 0 max(3px,.2604vw) max(3px,.2604vw); border-style: solid; }
  .rotate-circle { width: 5vh; height: 5vh; border-width: max(3px,.2604vw); }
  .level-row { left:76.0417vw; top:27.7778vh; width:8.0208vw; height:8.2407vh; } .level-box{width:6.3021vw;height:8.2407vh;font-size:4.2593vh;} .hud-caption,.next-caption{font-size:1.4815vh;}
  .next-row{left:69.4271vw;top:39.0741vh;width:21.3542vw;height:8.2407vh;} .next-box{width:19.6875vw;height:8.2407vh;border-width:max(3px,.2604vw);border-radius:2.2222vh;padding:1.0185vh .8333vw;}
  .score-row{left:66.6667vw;top:52.037vh;width:26.6146vw;height:8.2407vh;} .score-box{width:24.9479vw;height:8.2407vh;font-size:3.6111vh;border-width:max(3px,.2604vw);border-radius:2.2222vh;}
  .hud-actions{left:73.6458vw;top:63.9815vh;gap:.5729vw;} .hud-icon-button{width:6.25vw;height:8.2407vh;border-width:max(3px,.2604vw);border-radius:2.2222vh;}

  /* Info */
  .header-logo{left:32.1354vw;top:3.6111vh;width:35.6771vw;height:auto;} .ui-icon-button{left:23.3333vw;top:12.2222vh;width:6.3021vw;height:8.2407vh;border-width:max(3px,.2604vw);border-radius:2.2222vh;} .section-tag{left:70.7292vw;top:11.6667vh;height:8.2407vh;border-width:max(3px,.2604vw);border-radius:2.2222vh;font-size:3.8889vh;padding:0 1.4583vw;}
  .scores-content{left:27.2396vw;top:29.9074vh;width:45.5729vw;height:51.3889vh;} .scores-list{font-size:2.8704vh;} .score-row{grid-template-columns:3.3333vw 14.8438vw 6.25vw 1fr;column-gap:.9375vw;}
  .settings-content{top:37.4074vh;width:31.1458vw;height:33.3333vh;} .toggle-group{gap:3.4375vw;} .setting-block,.setting-title{width:13.4375vw;} .setting-title{height:6.4815vh;font-size:2.8704vh;border-width:max(3px,.2604vw);border-radius:2.2222vh;} .segmented button{height:6.4815vh;min-width:6.4583vw;font-size:2.8704vh;border-width:max(3px,.2604vw);border-radius:2.2222vh;} .difficulty-wrap{margin-top:4.537vh;} .difficulty button{min-width:10vw;}
  .help-content{top:33.7037vh;width:39.5833vw;height:42.5926vh;gap:7.963vh;} .help-section h2{font-size:2.5926vh;} .help-rule{width:17.9167vw;height:.463vh;margin:1.0185vh auto 1.5741vh;} .help-section p{font-size:2.3148vh;}
}

/* ---------- portrait / compact ---------- */
@media (max-width: 720px), (max-aspect-ratio: 4/3) {
  .brand-footer { width: 94vw; bottom: calc(8px + var(--safe-bottom)); grid-template-columns: 48px 1fr 34px; gap: 7px; }
  .rh-logo { width: 48px; height: auto; } .age-logo { width: 34px; height: auto; } .copyright { font-size: 4.7px; white-space: normal; }
  .menu-screen .decor, .info-screen .decor { opacity: .72; }
  .home-center { transform: none; }
  .main-logo { left: 50%; top: 31%; width: 78vw; height: auto; transform: translateX(-50%); }
  .home-center .ui-button { height: 54px; border-width: 3px; border-radius: 15px; font-size: clamp(18px,5vw,26px); }
  .primary-button { left: 50%; top: 54%; width: 68vw; transform: translateX(-50%); }
  .home-row .ui-button:nth-child(1) { left: 6vw; top: 64%; width: 28vw; }
  .home-row .ui-button:nth-child(2) { left: 36vw; top: 64%; width: 36vw; }
  .home-row .ui-button:nth-child(3) { left: 74vw; top: 64%; width: 20vw; }

  .game-brand { left: 50%; top: 2.2%; width: min(46vw,185px); height: auto; transform: translateX(-50%); }
  .board-wrap { left: 50%; top: 13%; width: auto; height: 60vh; max-width: 68vw; transform: translateX(-50%); border-width: 3px; border-radius: 15px; aspect-ratio: 524/1071; }
  .game-decor { opacity: .45; }
  .game-controls { top: auto; bottom: 2%; height: 160px; transform: scale(.55); transform-origin: left bottom; }
  .control-up{left:130px;top:0}.control-left{left:5px;top:92px}.control-down{left:130px;top:92px}.control-right{left:255px;top:92px}.control-drop{left:390px;top:0}.control-rotate{left:515px;top:0}
  .hud { top: auto; left: 0; bottom: 2%; width: 100%; height: 145px; }
  .level-row { left: 57vw; top: 0; width: 38vw; height: 42px; } .level-caption,.next-caption,.score-caption{font-size:9px;} .level-box{width:32vw;height:42px;font-size:24px;border-width:3px;border-radius:12px;}
  .next-row { left: 55vw; top: 48px; width: 40vw; height: 42px; } .next-box{width:34vw;height:42px;border-width:3px;border-radius:12px;padding:3px 5px;gap:3px;}
  .score-row { left: 52vw; top: 96px; width: 43vw; height: 42px; } .score-box{width:37vw;height:42px;border-width:3px;border-radius:12px;font-size:15px;}
  .hud-actions { display:none; }
  .mini-card { border-width: 3px; border-radius: 15px; box-shadow: -6px 6px 0 var(--shadow); }

  .header-logo { left:50%; top:3%; width:54vw; height:auto; transform:translateX(-50%); }
  .ui-icon-button { left:4vw; top:5%; width:58px; height:48px; border-width:3px; border-radius:14px; }
  .section-tag { right:4vw; left:auto; top:5%; height:48px; border-width:3px; border-radius:14px; font-size:19px; padding:0 12px; }
  .scores-content { left:7vw; top:19%; width:86vw; height:65%; padding-right:8px; } .scores-list{font-size:14px;} .score-row{grid-template-columns:32px 1fr 44px 76px;gap:5px;}
  .settings-content { top:26%; width:92vw; height:auto; } .toggle-group{gap:15px;} .setting-block,.setting-title{width:42vw;} .setting-title{height:48px;border-width:3px;border-radius:14px;font-size:18px;} .segmented button{height:44px;min-width:19vw;border-width:3px;border-radius:13px;font-size:17px;padding:0 8px;} .difficulty-wrap{margin-top:34px;} .difficulty{gap:5px}.difficulty button{min-width:28vw;}
  .help-content { top:23%; width:90vw; height:auto; gap:48px; } .help-section h2{font-size:18px}.help-rule{width:50vw;height:3px;margin:8px auto 12px}.help-section p{font-size:12px;line-height:1.2}
}

/* Exact thin score rail from concept-05. */
.scores-content::-webkit-scrollbar-track {
  background: linear-gradient(90deg, transparent 0 6px, rgba(5,5,5,.65) 6px 7px, transparent 7px 100%);
}
.scores-content::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 999px; }

@media (min-width: 721px) and (min-aspect-ratio: 4/3) {
  .menu-screen .decor-a { left: 3.0729vw; top: 16.0185vh; }
  .menu-screen .decor-b { left: 20.4688vw; top: 2.963vh; }
  .menu-screen .decor-c { right: 8.8021vw; top: -9.3519vh; }
  .menu-screen .decor-d { left: 2.1875vw; bottom: -9.0741vh; }
  .menu-screen .decor-e { right: -5.7813vw; top: 17.1296vh; }
  .menu-screen .decor-f { right: 1.4583vw; bottom: -11.9444vh; }
  .info-decor .info-a { left: 3.0729vw; top: -8.0556vh; }
  .info-decor .info-b { right: 1.1458vw; top: -13.1481vh; }
  .info-decor .info-c { left: 2.1875vw; bottom: -9.1667vh; }
  .info-decor .info-d { right: -7.5521vw; bottom: 8.2407vh; }
  .info-decor .info-e { left: 28.6979vw; bottom: -20.2778vh; }
  .info-decor .info-f { right: 11.3021vw; bottom: -21.2037vh; }
}

/* Score table is independent from the game HUD's .score-row class. */
.scores-list .score-row {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  display: grid;
  grid-template-columns: 80px 280px 174px 1fr;
  column-gap: 20px;
  line-height: 1.47;
  align-items: baseline;
}
@media (min-width:721px) and (min-aspect-ratio:4/3) {
  .scores-list .score-row {
    grid-template-columns: 4.1667vw 14.5833vw 9.0625vw 1fr;
    column-gap: 1.0417vw;
  }
}
@media (max-width:720px), (max-aspect-ratio:4/3) {
  .scores-list .score-row { grid-template-columns: 32px 1fr 44px 76px; column-gap: 5px; }
}

/* v6.1 interaction fix: the full-screen home-row layout container must never
   intercept clicks intended for START THE GAME. Only its actual buttons click. */
.home-row { pointer-events: none; }
.home-row .ui-button { pointer-events: auto; }
.primary-button { pointer-events: auto; position: absolute; z-index: 2; }

/* v7 performance pass: keep the supplied layouts, but remove costly full-page
   transforms and button transition work. */
body { text-rendering: optimizeSpeed; }
.screen {
  transform: none;
  transition: opacity .12s linear, visibility 0s linear .12s;
  contain: layout paint;
}
.screen.screen-active { transform: none; transition-delay: 0s; }
.screen.screen-leaving { transform: none; }
.ui-button, .ui-icon-button, .hud-icon-button, .control-button, .segmented button, .pause-play {
  transition: none;
  -webkit-font-smoothing: antialiased;
}
.ui-button:active, .ui-icon-button:active, .hud-icon-button:active, .control-button:active, .segmented button:active {
  transform: scale(.985);
}
.screen-active .decor, .screen-active .loading-piece {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
#gameCanvas { contain: strict; }
.game-fx-layer, .modal-layer { contain: layout paint; }
.fx-pop { will-change: transform, opacity; animation-duration: .24s; }
.mini-card { animation-duration: .12s; }
.mini-card.vanish { animation-duration: .12s; }

/* v10 zero-lag core: visual feedback never competes with gameplay input. */
.screen { transition: none !important; }
.screen.screen-active, .screen.screen-leaving { transition: none !important; }
.ui-button, .ui-icon-button, .hud-icon-button, .control-button, .segmented button, .pause-play,
.ui-button:active, .ui-icon-button:active, .hud-icon-button:active, .control-button:active, .segmented button:active {
  transition: none !important;
}
.control-button:active, .hud-icon-button:active { transform: none !important; }
.game-screen .game-decor { will-change: auto; transform: translateZ(0); backface-visibility: hidden; }
.menu-screen .decor, .info-screen .decor { backface-visibility: hidden; }
.board-wrap { contain: layout paint size; }
#gameCanvas { image-rendering: auto; }
.ui-button:active, .ui-icon-button:active, .hud-icon-button:active, .control-button:active, .segmented button:active, .pause-play:active {
  transform: none !important;
}

/* v12 single-clock performance core ---------------------------------------
   Inactive screens are removed from layout/compositing entirely. The old
   visibility-only setup kept five full 1920x1080 scenes and their image layers
   alive while the game was running. */
.screen:not(.screen-active) { display: none !important; }
.screen.screen-active { display: block !important; }

/* Fixed game decorations do not need promoted GPU layers. */
.game-screen .game-decor {
  transform: none !important;
  backface-visibility: visible !important;
  will-change: auto !important;
}
#gameCanvas, .static-game-canvas {
  transform: none !important;
  will-change: auto !important;
}

/* v12.1 cinematic continuity -------------------------------------------------
   Keep animation continuity between loading and the site while retaining the
   single-clock game performance work. Only opacity is animated at scene level. */
:root { --scene-fade: 420ms; --scene-ease: cubic-bezier(.22,.61,.36,1); }

/* The loading pieces now live once at app level. They never get recreated when
   HOME / SCORES / SETTINGS / HELP change, so their motion continues mid-flight. */
.ambient-pieces {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 520ms var(--scene-ease) !important;
  contain: layout paint;
}
.ambient-pieces.ambient-hidden { opacity: 0; }
.ambient-pieces.ambient-paused .loading-piece { animation-play-state: paused !important; }

/* Non-game scenes share that one continuous ambient layer. Their duplicated
   decorative image layers are hidden so no different pieces suddenly replace it. */
.loading-screen, .menu-screen, .info-screen { background: transparent !important; }
.menu-screen > .decor-layer, .info-screen > .decor-layer { display: none !important; }
.loading-screen { z-index: 2 !important; }
.game-screen { background: var(--paper) !important; }

/* v12 removed inactive scenes for performance. Keep that rule, but allow only
   the outgoing + incoming pair to coexist for the 420ms crossfade. */
.screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none !important;
  transition: opacity var(--scene-fade) var(--scene-ease), visibility 0s linear var(--scene-fade) !important;
}
.screen.screen-active,
.screen.screen-entering,
.screen.screen-leaving,
.screen.screen-transition-in,
.screen.screen-transition-out { display: block !important; }
.screen.screen-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s !important;
}
.screen.screen-active.screen-entering {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}
.screen.screen-active.screen-leaving {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}
.screen.screen-transition-in { z-index: 40 !important; }
.screen.screen-transition-out { z-index: 39 !important; pointer-events: none !important; }
.screen:not(.screen-active):not(.screen-leaving):not(.screen-entering):not(.screen-transition-in):not(.screen-transition-out) {
  display: none !important;
}

/* Keep rollover responsive but remove the harsh binary flash. Color-only
   transitions are cheap and do not trigger layout or game-canvas work. */
.ui-button, .ui-icon-button, .hud-icon-button, .control-button, .segmented button, .pause-play {
  transition: background-color 90ms linear, color 90ms linear !important;
}
.control-button:active, .hud-icon-button:active,
.ui-button:active, .ui-icon-button:active, .segmented button:active, .pause-play:active {
  transform: none !important;
}

/* Mini game notices should arrive softly rather than pop on/off. They are tiny,
   isolated layers, so this does not touch the gameplay canvas/input path. */
.mini-card { animation-duration: 220ms !important; animation-timing-function: cubic-bezier(.22,.75,.3,1) !important; }
.mini-card.vanish { animation-duration: 190ms !important; animation-timing-function: ease-out !important; }

@media (prefers-reduced-motion: reduce) {
  .screen, .ambient-pieces { transition-duration: 1ms !important; }
  .mini-card, .mini-card.vanish { animation-duration: 1ms !important; }
}

/* v13 cinematic page choreography -------------------------------------------
   All site pages now share the same top logo position. Page content moves as a
   lightweight compositor layer (opacity + translate only); the falling pieces
   remain on one persistent layer behind every non-game page. */
:root {
  --scene-fade: 620ms;
  --scene-content: 560ms;
  --scene-ease: cubic-bezier(.22,.72,.22,1);
}

/* Ambient pieces are a true background layer and never restart between pages. */
.ambient-pieces {
  z-index: 0 !important;
  opacity: .86;
}
.screen { z-index: 2; }
.screen.screen-transition-in { z-index: 40 !important; }
.screen.screen-transition-out { z-index: 39 !important; }

/* Keep the shared logo visually anchored while the content below it changes. */
.main-logo,
.header-logo {
  left: 50% !important;
  top: 3.6111vh !important;
  width: 35.6771vw !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  object-fit: contain;
}

/* HOME becomes one centered menu stack below the persistent top logo. */
.home-menu-stack {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 43.5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  pointer-events: none;
}
.home-menu-stack .ui-button { pointer-events: auto; }
.home-menu-stack .primary-button {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 25vw;
  min-width: 420px;
  max-width: 500px;
  transform: none !important;
}
.home-menu-stack .home-row {
  position: static !important;
  inset: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: auto;
  transform: none !important;
}
.home-menu-stack .home-row .ui-button {
  position: static !important;
  left: auto !important;
  top: auto !important;
}
.home-menu-stack .home-row .ui-button:nth-child(1) { width: 243px; }
.home-menu-stack .home-row .ui-button:nth-child(2) { width: 299px; }
.home-menu-stack .home-row .ui-button:nth-child(3) { width: 191px; }

/* Content choreography. No filters, blur or scale: only compositor-friendly
   opacity and a tiny translate. will-change exists only during transition. */
.page-motion {
  opacity: 1;
  transform: translate3d(0,0,0);
  transition:
    opacity var(--scene-content) var(--scene-ease),
    transform var(--scene-content) var(--scene-ease);
}
.screen.screen-transition-in .page-motion,
.screen.screen-transition-out .page-motion { will-change: opacity, transform; }

.screen.screen-entering.scene-forward-in .page-motion {
  opacity: 0;
  transform: translate3d(0,22px,0);
}
.screen.screen-leaving.scene-forward-out .page-motion {
  opacity: 0;
  transform: translate3d(0,-14px,0);
}
.screen.screen-entering.scene-back-in .page-motion {
  opacity: 0;
  transform: translate3d(0,-16px,0);
}
.screen.screen-leaving.scene-back-out .page-motion {
  opacity: 0;
  transform: translate3d(0,18px,0);
}

/* The scene itself performs a gentle crossfade. The logo is at the same exact
   coordinates on HOME / SCORES / SETTINGS / HELP, so it reads as one fixed logo. */
.screen {
  transition:
    opacity var(--scene-fade) var(--scene-ease),
    visibility 0s linear var(--scene-fade) !important;
}

/* Keep information page content optically centered under the common header. */
.scores-content { left: 50% !important; transform: translateX(-50%); }
.settings-content { left: 50% !important; transform: translateX(-50%); }
.help-content { left: 50% !important; transform: translateX(-50%); }
/* page-motion owns vertical transition; preserve the horizontal centering via
   CSS translate property so transform remains free for animation. */
.scores-content.page-motion,
.settings-content.page-motion,
.help-content.page-motion { translate: -50% 0; transform: translate3d(0,0,0); }
.screen.screen-entering.scene-forward-in :is(.scores-content,.settings-content,.help-content).page-motion {
  transform: translate3d(0,22px,0);
}
.screen.screen-leaving.scene-forward-out :is(.scores-content,.settings-content,.help-content).page-motion {
  transform: translate3d(0,-14px,0);
}
.screen.screen-entering.scene-back-in :is(.scores-content,.settings-content,.help-content).page-motion {
  transform: translate3d(0,-16px,0);
}
.screen.screen-leaving.scene-back-out :is(.scores-content,.settings-content,.help-content).page-motion {
  transform: translate3d(0,18px,0);
}

@media (max-width: 720px), (max-aspect-ratio: 4/3) {
  .main-logo,
  .header-logo {
    top: 3% !important;
    width: 54vw !important;
  }
  .home-menu-stack {
    top: 39%;
    gap: 18px;
  }
  .home-menu-stack .primary-button {
    width: 68vw;
    min-width: 0;
    max-width: none;
  }
  .home-menu-stack .home-row {
    width: 92vw;
    gap: 6px;
  }
  .home-menu-stack .home-row .ui-button:nth-child(1) { width: 28vw; }
  .home-menu-stack .home-row .ui-button:nth-child(2) { width: 36vw; }
  .home-menu-stack .home-row .ui-button:nth-child(3) { width: 20vw; }
}

@media (prefers-reduced-motion: reduce) {
  .page-motion { transition-duration: 1ms !important; }
}


/* ---------- SETRIS v14.1: centered bonus play HUD ---------- */
.bonus-panel {
  position: absolute;
  z-index: 8;
  left: 1348px;
  top: 816px;
  width: 444px;
  min-height: 128px;
  display: grid;
  grid-template-rows: auto 50px;
  gap: 8px;
  pointer-events: auto;
  text-align: center;
}
.bonus-challenge {
  min-height: 70px;
  border: 4px solid var(--ink);
  border-radius: 22px;
  background: rgba(250,247,237,.965);
  padding: 9px 18px 8px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
}
.bonus-kicker {
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .46;
}
.challenge-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.challenge-text {
  min-width: 0;
  max-width: 320px;
  font-size: 19px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.challenge-progress { font-size: 16px; line-height: 1; opacity: .58; white-space: nowrap; }
.bonus-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 50px;
}
.streak-badge, .shuffle-button {
  min-width: 0;
  height: 50px;
  border: 4px solid var(--ink);
  border-radius: 17px;
  background: rgba(250,247,237,.965);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  box-sizing: border-box;
}
.streak-badge {
  width: 136px;
  display: grid;
  place-items: center;
  opacity: .44;
  transition: opacity 120ms linear;
}
.streak-badge.is-live { opacity: 1; }
.shuffle-button {
  appearance: none;
  -webkit-appearance: none;
  width: 180px;
  display: grid;
  grid-template-columns: 1fr 27px;
  align-items: center;
  padding: 0 9px 0 14px;
  cursor: pointer;
  text-align: center;
}
.shuffle-button b {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: inherit;
}
.shuffle-button:hover:not(:disabled), .shuffle-button:focus-visible { background: var(--ink); color: var(--paper); }
.shuffle-button:hover:not(:disabled) b, .shuffle-button:focus-visible b { background: var(--paper); color: var(--ink); }
.shuffle-button:disabled { cursor: default; opacity: .38; }

.moment-toast {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 62%;
  transform: translate(-50%,-50%);
  opacity: 0;
  pointer-events: none;
  max-width: 88%;
  padding: 8px 14px 7px;
  border: 4px solid var(--ink);
  border-radius: 16px;
  background: rgba(250,247,237,.97);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}
.gameover-stats { font-size: 13px; line-height: 1; margin: -3px 0 10px; opacity: .62; }

@media (min-width: 721px) and (min-aspect-ratio: 4/3) {
  .bonus-panel { left: 70.2083vw; top: 75.5556vh; width: 23.125vw; min-height: 11.8519vh; grid-template-rows: auto 4.6296vh; gap: .7407vh; }
  .bonus-challenge { min-height: 6.4815vh; border-width: max(3px,.2083vw); border-radius: 2.037vh; padding: .8333vh .9375vw .7407vh; gap: .463vh; }
  .bonus-kicker { font-size: 1.1111vh; }
  .challenge-text { max-width: 16.6667vw; font-size: 1.7593vh; }
  .challenge-progress { font-size: 1.4815vh; }
  .bonus-actions { min-height: 4.6296vh; gap: .4167vw; }
  .streak-badge, .shuffle-button { height: 4.6296vh; border-width: max(3px,.2083vw); border-radius: 1.5741vh; font-size: 1.5741vh; }
  .streak-badge { width: 7.0833vw; }
  .shuffle-button { width: 9.375vw; grid-template-columns: 1fr 2.5vh; padding: 0 .4688vw 0 .7292vw; }
  .shuffle-button b { width: 2.5vh; height: 2.5vh; font-size: 1.2037vh; }
  .moment-toast { border-width: max(3px,.2083vw); border-radius: 1.4815vh; padding: .7407vh .7292vw .6481vh; font-size: 1.8519vh; }
}

@media (max-width: 720px), (max-aspect-ratio: 4/3) {
  .bonus-panel {
    left: 50%; top: 7.2%; transform: translateX(-50%);
    width: min(92vw, 390px); min-height: 42px;
    grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 42px; gap: 5px;
  }
  .bonus-challenge { min-height: 42px; height: 42px; border-width: 3px; border-radius: 12px; padding: 4px 8px; gap: 1px; }
  .bonus-kicker { font-size: 7px; }
  .challenge-line { gap: 5px; }
  .challenge-text { max-width: 170px; font-size: 10px; }
  .challenge-progress { font-size: 9px; }
  .bonus-actions { display: grid; grid-template-columns: 62px 86px; gap: 5px; min-height: 42px; }
  .streak-badge, .shuffle-button { width: auto; height: 42px; border-width: 3px; border-radius: 12px; font-size: 10px; }
  .shuffle-button { width: 86px; grid-template-columns: 1fr 20px; padding: 0 5px 0 7px; }
  .shuffle-button b { width: 20px; height: 20px; font-size: 9px; }
  .moment-toast { top: 58%; border-width: 3px; border-radius: 12px; padding: 6px 9px; font-size: 12px; }
}


/* ---------- SETRIS v15: centered score table + lightweight skill moments ---------- */
@media (min-width: 721px) and (min-aspect-ratio: 4/3) {
  .scores-list {
    width: min(39.5833vw, 760px);
    margin-inline: auto;
  }
  .scores-list .score-row {
    width: 100%;
    grid-template-columns: 8% 40% 17% 27%;
    column-gap: 2.6667%;
  }
  .scores-list .score-row .lvl { text-align: center; }
  .scores-list .score-row .pts { text-align: right; font-variant-numeric: tabular-nums; }
}
.moment-toast[data-kind="b2b"],
.moment-toast[data-kind="rescue"] {
  letter-spacing: .01em;
}
.gameover-stats { line-height: 1.28; }


/* ---------- SETRIS v16: Matryoshka special object ---------- */
.matruska-ambient { opacity: .92; }
.moment-toast[data-kind="matruska"] { letter-spacing: .012em; }


/* ---------- SETRIS v17: unified soft-corner pieces ---------- */
.moment-toast { will-change: opacity, transform; }


/* ---------- SETRIS v22: mobile layout repair; desktop geometry stays intact ---------- */
.matruska-guide {
  position:absolute; z-index:6; left:50%; top:78.2%; translate:-50% 0;
  width:760px; min-height:96px; display:grid; grid-template-columns:54px minmax(0,1fr);
  align-items:center; gap:18px; padding:10px 18px; border:4px solid var(--ink);
  border-radius:20px; background:rgba(250,247,237,.965); text-align:left;
}
.matruska-guide img { display:block; width:42px; height:auto; max-height:82px; object-fit:contain; justify-self:center; }
.matruska-guide h2 { margin:0 0 4px; font-size:20px; line-height:1; }
.matruska-guide p { margin:0; font-size:13px; line-height:1.18; }
.matruska-ambient { width:min(256px,32vw) !important; height:auto !important; }

@media (max-width:720px), (max-aspect-ratio:4/3) {
  :root {
    --m-board-left:max(8px,2.5vw);
    --m-board-top:13%;
    --m-board-height:60vh;
    --m-board-width:29.356vh; /* exact 524/1071 width at the existing 60vh height */
    --m-side-gap:10px;
    --m-side-left:calc(var(--m-board-left) + var(--m-board-width) + var(--m-side-gap));
    --m-side-right:max(8px,2.5vw);
    --m-side-width:calc(100vw - var(--m-side-left) - var(--m-side-right));
  }

  /* GAME */
  .game-brand { left:50% !important; top:calc(2.2% + var(--safe-top)) !important; width:min(46vw,185px) !important; transform:translateX(-50%) !important; }
  .board-wrap { left:var(--m-board-left) !important; top:var(--m-board-top) !important; width:auto !important; height:var(--m-board-height) !important; max-width:none !important; transform:none !important; aspect-ratio:524/1071 !important; border-width:3px !important; border-radius:15px !important; }

  .hud { inset:0 !important; width:100% !important; height:100% !important; pointer-events:none; }
  .hud-row { left:var(--m-side-left) !important; width:var(--m-side-width) !important; height:auto !important; }
  .level-row { top:17% !important; }
  .next-row { top:27% !important; }
  .score-row { top:39% !important; }
  .hud-caption, .next-caption { position:static !important; display:block !important; writing-mode:horizontal-tb !important; transform:none !important; margin:0 0 4px !important; font-size:8px !important; line-height:1 !important; text-align:center !important; text-transform:uppercase !important; letter-spacing:.04em; }
  .level-box, .next-box, .score-box { position:static !important; right:auto !important; top:auto !important; width:100% !important; border-width:3px !important; border-radius:12px !important; }
  .level-box { height:40px !important; font-size:clamp(17px,5vw,23px) !important; }
  .next-box { height:55px !important; padding:4px 5px !important; gap:3px !important; }
  .score-box { height:43px !important; font-size:clamp(10px,3vw,14px) !important; padding:0 4px !important; }

  .bonus-panel { left:var(--m-side-left) !important; top:50.5% !important; transform:none !important; width:var(--m-side-width) !important; min-height:0 !important; display:grid !important; grid-template-columns:1fr !important; grid-template-rows:auto 38px !important; gap:5px !important; }
  .bonus-challenge { min-height:58px !important; height:auto !important; padding:5px 6px !important; border-width:3px !important; border-radius:12px !important; gap:3px !important; }
  .bonus-kicker { font-size:7px !important; }
  .challenge-line { gap:4px !important; flex-wrap:wrap; }
  .challenge-text { max-width:100% !important; font-size:8px !important; line-height:1.08 !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
  .challenge-progress { font-size:8px !important; }
  .bonus-actions { min-height:38px !important; display:grid !important; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr) !important; gap:4px !important; }
  .streak-badge, .shuffle-button { width:100% !important; height:38px !important; border-width:3px !important; border-radius:11px !important; font-size:8px !important; }
  .shuffle-button { grid-template-columns:1fr 18px !important; padding:0 4px 0 5px !important; }
  .shuffle-button b { width:18px !important; height:18px !important; font-size:8px !important; }

  .hud-actions { display:flex !important; left:var(--m-side-left) !important; top:66% !important; width:var(--m-side-width) !important; gap:5px !important; pointer-events:auto !important; }
  .hud-icon-button { flex:1 1 0 !important; width:auto !important; min-width:0 !important; height:42px !important; border-width:3px !important; border-radius:12px !important; }
  .pause-icon span { width:4px !important; height:22px !important; }
  .hud-icon-button .chev { width:16px !important; height:16px !important; border-left-width:4px !important; border-bottom-width:4px !important; }

  .game-controls { inset:auto 0 max(12px,var(--safe-bottom)) 0 !important; width:100% !important; height:122px !important; transform:none !important; transform-origin:initial !important; pointer-events:none; }
  .control-button { width:54px !important; height:48px !important; border-width:3px !important; border-radius:14px !important; pointer-events:auto !important; }
  .control-up { left:20vw !important; top:0 !important; }
  .control-left { left:4vw !important; top:56px !important; }
  .control-down { left:20vw !important; top:56px !important; }
  .control-right { left:36vw !important; top:56px !important; }
  .control-drop { left:61vw !important; top:20px !important; }
  .control-rotate { left:79vw !important; top:20px !important; }
  .arrow-icon { width:20px !important; height:20px !important; border-left-width:4px !important; border-bottom-width:4px !important; }
  .double-down { width:32px !important; height:34px !important; }
  .double-down i { width:20px !important; height:20px !important; border-right-width:4px !important; border-bottom-width:4px !important; }
  .double-down i:first-child { top:0 !important; }
  .double-down i:last-child { top:11px !important; }
  .rotate-circle { width:32px !important; height:32px !important; border-width:4px !important; }

  /* INFO PAGES */
  .header-logo { left:50% !important; top:calc(3% + var(--safe-top)) !important; width:54vw !important; transform:translateX(-50%) !important; }
  .ui-icon-button { left:4vw !important; top:calc(5% + var(--safe-top)) !important; width:58px !important; height:48px !important; border-width:3px !important; border-radius:14px !important; }
  .section-tag { left:50% !important; right:auto !important; top:calc(14.8% + var(--safe-top)) !important; transform:translateX(-50%) !important; height:40px !important; min-width:118px; padding:0 18px !important; border-width:3px !important; border-radius:13px !important; font-size:18px !important; text-align:center; }
  .scores-content { left:50% !important; top:calc(22.5% + var(--safe-top)) !important; width:88vw !important; height:58% !important; translate:-50% 0 !important; padding-right:8px !important; }
  .scores-list { width:100% !important; font-size:14px !important; }
  .scores-list .score-row { width:100% !important; grid-template-columns:32px minmax(0,1fr) 44px 82px !important; column-gap:5px !important; }
  .scores-list .lvl { text-align:center; }
  .scores-list .pts { text-align:right; font-variant-numeric:tabular-nums; }
  .settings-content { top:calc(25.5% + var(--safe-top)) !important; width:92vw !important; }
  .help-content { top:calc(23.5% + var(--safe-top)) !important; width:90vw !important; gap:30px !important; }
  .help-section h2 { font-size:17px !important; }
  .help-rule { width:50vw !important; height:3px !important; margin:7px auto 10px !important; }
  .help-section p { margin:2px 0 !important; font-size:11px !important; line-height:1.18 !important; }

  .matruska-guide { top:calc(62.5% + var(--safe-top)) !important; width:88vw !important; min-height:104px !important; grid-template-columns:44px minmax(0,1fr) !important; gap:12px !important; padding:9px 12px !important; border-width:3px !important; border-radius:15px !important; }
  .matruska-guide img { width:38px !important; max-height:92px !important; }
  .matruska-guide h2 { font-size:15px !important; margin-bottom:4px !important; }
  .matruska-guide p { font-size:9px !important; line-height:1.18 !important; }
  .brand-footer.info-footer { bottom:calc(8px + var(--safe-bottom)) !important; }
  .matruska-ambient { width:min(256px,32vw) !important; }
}


/* ---------- SETRIS v23: zero-sticky, frame-synchronised controls ----------
   Geometry is intentionally untouched. This layer only hardens interaction. */
html, body, #app, #gameScreen, #gameControls, #gameCanvas,
button, .control-button, .hud-icon-button, .shuffle-button {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
#gameScreen img, #gameScreen canvas, #gameControls * {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
#gameCanvas, #gameControls, #gameControls .control-button,
#pauseButton, #backButton, #shuffleButton {
  touch-action: none !important;
}
.control-button, .hud-icon-button, .shuffle-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  cursor: pointer;
  transform: none !important;
  transition: none !important;
}
.control-button.is-pressed,
.hud-icon-button.is-pressed,
.shuffle-button.is-pressed:not(:disabled) {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

/* iOS/Safari can keep :hover after a tap. Never let a coarse pointer leave a
   gameplay control looking selected; only our short-lived .is-pressed class
   may invert it. */
@media (hover: none), (pointer: coarse) {
  .control-button:hover,
  .hud-icon-button:hover,
  .shuffle-button:hover:not(:disabled) {
    background: rgba(250,247,237,.96) !important;
    color: var(--ink) !important;
  }
  .control-button.is-pressed,
  .hud-icon-button.is-pressed,
  .shuffle-button.is-pressed:not(:disabled) {
    background: var(--ink) !important;
    color: var(--paper) !important;
  }
}


/* ---------- SETRIS v24: iOS anti-zoom hardening ----------
   Mobile gameplay is a fixed app surface. Keep all taps as game input and
   never let Safari reinterpret a rapid second tap as Smart Zoom. */
html, body, #app {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  touch-action: none !important;
}
#app, #app *, #gameScreen, #gameScreen *, #gameCanvas, #gameControls, #gameControls * {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}

/* ---------- SETRIS v25: concept-08 mobile game layout ----------
   Desktop geometry is untouched. On portrait/mobile the board remains the hero;
   only SCORE + LEVEL and NEXT + PAUSE/BACK remain visible beneath it. */
@media (max-width: 720px), (max-aspect-ratio: 4/3) {
  #gameScreen {
    --v25-top: max(5px, var(--safe-top));
    --v25-bottom: max(5px, var(--safe-bottom));
    --v25-hud-row: 44px;
    --v25-hud-gap: 6px;
    --v25-hud-total: calc((var(--v25-hud-row) * 2) + var(--v25-hud-gap) + 13px + var(--v25-bottom));
  }

  /* Concept-08 deliberately removes all non-essential game-screen decoration. */
  #gameScreen .game-brand,
  #gameScreen .game-decor-layer,
  #gameScreen .game-controls,
  #gameScreen .bonus-panel {
    display: none !important;
  }

  /* Preserve the 524:1071 playfield ratio and use all available vertical room. */
  #gameScreen .board-wrap {
    top: var(--v25-top) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: min(86.8dvh, calc(100dvh - var(--v25-top) - var(--v25-hud-total))) !important;
    max-height: none !important;
    max-width: 92vw !important;
    aspect-ratio: 524 / 1071 !important;
    transform: translateX(-50%) !important;
    border-width: 3px !important;
    border-radius: 15px !important;
  }

  #gameScreen .hud {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
  }

  /* Two clean rows directly under the board. */
  #gameScreen .score-row,
  #gameScreen .level-row,
  #gameScreen .next-row,
  #gameScreen .hud-actions {
    height: var(--v25-hud-row) !important;
  }

  #gameScreen .score-row {
    left: 7.5vw !important;
    top: calc(100dvh - var(--v25-bottom) - (var(--v25-hud-row) * 2) - var(--v25-hud-gap) - 7px) !important;
    width: 61.5vw !important;
  }
  #gameScreen .level-row {
    left: auto !important;
    right: 8.2vw !important;
    top: calc(100dvh - var(--v25-bottom) - (var(--v25-hud-row) * 2) - var(--v25-hud-gap) - 7px) !important;
    width: 19.4vw !important;
  }
  #gameScreen .next-row {
    left: 7.5vw !important;
    top: calc(100dvh - var(--v25-bottom) - var(--v25-hud-row) - 7px) !important;
    width: 49.5vw !important;
  }
  #gameScreen .hud-actions {
    left: auto !important;
    right: 8.2vw !important;
    top: calc(100dvh - var(--v25-bottom) - var(--v25-hud-row) - 7px) !important;
    width: 32.2vw !important;
    display: flex !important;
    gap: 1.5vw !important;
    pointer-events: auto !important;
  }

  /* Bring back the compact vertical captions from the supplied mobile concept. */
  #gameScreen .hud-caption,
  #gameScreen .next-caption {
    position: absolute !important;
    display: block !important;
    left: 0 !important;
    top: 11px !important;
    margin: 0 !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    font-size: 8px !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  #gameScreen .score-box,
  #gameScreen .level-box,
  #gameScreen .next-box {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    height: var(--v25-hud-row) !important;
    border-width: 3px !important;
    border-radius: 13px !important;
    background: rgba(250,247,237,.97) !important;
  }
  #gameScreen .score-box {
    width: calc(100% - 15px) !important;
    padding: 0 5px !important;
    font-size: clamp(16px, 5.2vw, 22px) !important;
    letter-spacing: -.05em !important;
  }
  #gameScreen .level-box {
    width: calc(100% - 15px) !important;
    font-size: clamp(18px, 5.4vw, 23px) !important;
  }
  #gameScreen .next-box {
    width: calc(100% - 15px) !important;
    padding: 4px 9px !important;
    gap: 5px !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }

  #gameScreen .hud-icon-button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--v25-hud-row) !important;
    padding: 0 !important;
    border-width: 3px !important;
    border-radius: 13px !important;
  }
  #gameScreen .pause-icon {
    grid-template-columns: 4px 4px !important;
    gap: 7px !important;
  }
  #gameScreen .pause-icon span {
    width: 3px !important;
    height: 22px !important;
    border-radius: 2px !important;
  }
  #gameScreen .back-icon .chev,
  #gameScreen .hud-icon-button .chev {
    width: 16px !important;
    height: 16px !important;
    border-left-width: 4px !important;
    border-bottom-width: 4px !important;
  }
}

/* Short mobile viewports still keep the same composition; only the board gives
   up vertical space so HUD controls never overlap the playfield. */
@media (max-width: 720px) and (max-height: 700px),
       (max-aspect-ratio: 4/3) and (max-height: 700px) {
  #gameScreen {
    --v25-hud-row: 40px;
    --v25-hud-gap: 5px;
  }
  #gameScreen .score-box { font-size: clamp(14px, 4.7vw, 19px) !important; }
  #gameScreen .level-box { font-size: clamp(16px, 5vw, 21px) !important; }
}


/* ---------- SETRIS v26: exact concept-08 mobile HUD ----------
   Desktop is intentionally untouched. Mobile keeps only the playfield,
   SCORE / LEVEL, NEXT / PAUSE / BACK and the vertical hard-drop control. */
@media (max-width: 720px), (max-aspect-ratio: 4/3) {
  #gameScreen {
    --v26-row: 4.82dvh;
    --v26-gap: .82dvh;
    --v26-bottom: max(.72dvh, var(--safe-bottom));
  }

  #gameScreen .game-brand,
  #gameScreen .game-decor-layer,
  #gameScreen .bonus-panel {
    display: none !important;
  }

  #gameScreen .board-wrap {
    top: max(.72dvh, var(--safe-top)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(91.7vw, 42.55dvh) !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 524 / 1071 !important;
    transform: translateX(-50%) !important;
    border-width: 3px !important;
    border-radius: 15px !important;
  }

  #gameScreen .score-row {
    left: 4.0vw !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(var(--v26-bottom) + var(--v26-row) + var(--v26-gap)) !important;
    width: 58.4vw !important;
    height: var(--v26-row) !important;
  }
  #gameScreen .level-row {
    left: 67.25vw !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(var(--v26-bottom) + var(--v26-row) + var(--v26-gap)) !important;
    width: 14.55vw !important;
    height: var(--v26-row) !important;
  }
  #gameScreen .next-row {
    left: 4.0vw !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--v26-bottom) !important;
    width: 45.8vw !important;
    height: var(--v26-row) !important;
  }
  #gameScreen .hud-actions {
    left: 51.75vw !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--v26-bottom) !important;
    width: 30.05vw !important;
    height: var(--v26-row) !important;
    display: flex !important;
    gap: 1.35vw !important;
    pointer-events: auto !important;
  }

  #gameScreen .hud-caption,
  #gameScreen .next-caption {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    margin: 0 !important;
    writing-mode: vertical-rl !important;
    transform: translateY(-50%) rotate(180deg) !important;
    font-size: clamp(7px, 2.15vw, 10px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  #gameScreen .score-box,
  #gameScreen .level-box,
  #gameScreen .next-box {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    border-width: 3px !important;
    border-radius: 13px !important;
    background: rgba(250,247,237,.98) !important;
  }
  #gameScreen .score-box {
    width: calc(100% - 15px) !important;
    padding: 0 5px !important;
    font-size: clamp(16px, 5.05vw, 22px) !important;
    letter-spacing: -.05em !important;
  }
  #gameScreen .level-box {
    width: calc(100% - 15px) !important;
    font-size: clamp(18px, 5.25vw, 23px) !important;
  }
  #gameScreen .next-box {
    width: calc(100% - 15px) !important;
    padding: 4px 8px !important;
    gap: 4px !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }

  #gameScreen .hud-icon-button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    border-width: 3px !important;
    border-radius: 13px !important;
  }

  /* Only the hard-drop control remains visible from the desktop control set. */
  #gameScreen .game-controls {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    pointer-events: none !important;
  }
  #gameScreen .game-controls .control-button { display: none !important; }
  #gameScreen .game-controls .control-drop {
    display: grid !important;
    left: 83.25vw !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--v26-bottom) !important;
    width: 13.35vw !important;
    height: calc((var(--v26-row) * 2) + var(--v26-gap)) !important;
    border-width: 3px !important;
    border-radius: 13px !important;
    pointer-events: auto !important;
  }
  #gameScreen .control-drop .double-down {
    width: 34px !important;
    height: 42px !important;
  }
  #gameScreen .control-drop .double-down i {
    width: 23px !important;
    height: 23px !important;
    border-right-width: 4px !important;
    border-bottom-width: 4px !important;
  }
  #gameScreen .control-drop .double-down i:first-child { top: 0 !important; }
  #gameScreen .control-drop .double-down i:last-child { top: 13px !important; }
}