@import url('/assets/shared/pixel-audio.css?v=8035127e7ac5');

.utility-controls {
  position: absolute;
  z-index: 8;
  top: max(10px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.utility-controls > * { pointer-events: auto; }
.quiet-button {
  border: 1px solid #9c7c655c;
  background: #312333;
  color: #ffe7a7;
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
  font-size: 10px;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
}
.quiet-button:active { background: #5a3b3e; transform: translateY(2px); }
.back-link { margin-right: auto; font-size: 8px; }
.pause-button { margin-left: auto; font-size: 20px; padding: 4px; }
.sound-button { margin-left: auto; }
.pause-button:not([hidden]) + .sound-button { margin-left: 0; }
.in-stage .back-link, .in-stage .sound-button { display: none; }
.in-stage [data-action="exit"], .in-stage .result-exit { display: none; }
.game-hud { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: min(50%, 420px); display: flex; justify-content: space-between; align-items: start; pointer-events: none; }
.game-hud[hidden] { display: none; }
.hud-label { display: block; font-size: 8px; color: #d6b99b; letter-spacing: 1px; }
.stack-count { text-align: center; }
.stack-count strong { font-size: 30px; display: block; margin-top: 7px; color: #ffdc67; }
.next-piece { text-align: center; }
.next-piece canvas { display: block; width: 72px; height: 42px; margin: 4px auto 0; }
.balance-meter { width: 72px; height: 1px; background: #d4b2864a; margin-top: 24px; position: relative; }
.balance-meter::before { content: ''; position: absolute; width: 1px; height: 9px; top: -4px; left: 50%; background: #c9ad76; }
.balance-meter span { display: block; width: 6px; height: 6px; background: #ffde64; position: absolute; top: -2px; left: calc(50% - 3px); transform: translateX(var(--balance-offset, 0px)); }
.placement-controls { position: absolute; z-index: 3; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); text-align: center; width: min(94%, 540px); }
.control-row { display: flex; justify-content: center; align-items: center; gap: 12px; }
.control-hint { font-family: 'VT323', monospace; font-size: 18px; color: #d4b998; margin: 0 0 12px; }
.place-button { min-width: 142px; padding: 12px 20px; }
.rotate-button { font-size: 10px; line-height: 1; padding: 8px 22px; display: flex; align-items: center; gap: 12px; min-width: 140px; }
.rotate-button span { font-family: monospace; font-size: 28px; }
.move-button { font-family: monospace; font-size: 24px; padding: 5px; touch-action: none; }
.launch-announcement { position: absolute; top: 37%; left: 0; width: 100%; text-align: center; color: #ffdf70; font-size: clamp(18px, 4cqw, 35px); text-shadow: 0 4px #120b18; animation: steady-in 0.9s both; }
@keyframes steady-in { 0% { opacity: 0; transform: translateY(-12px); } 25%, 78% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(5px); } }
.overlay { position: absolute; z-index: 7; inset: 0; background: #211624eb; backdrop-filter: blur(5px); }
.pause-content { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; }
.pause-content h2 { text-align: center; font-size: clamp(20px, 4.3cqw, 42px); line-height: 1.7; color: #ffda58; margin: 0 0 10px; text-shadow: 0 4px #995929; }
.game-over:not([hidden]) { display: grid; grid-template-columns: 1fr 0.85fr; gap: 6%; padding: 9% 9% 6%; align-items: center; }
.result-summary h2 { font-size: min(3.2cqw, 5.2cqh); line-height: 1.7; margin: 0 0 22px; color: #ffda58; text-shadow: 0 4px #975221, 0 8px #150d1b; }
.loss-shout { position: absolute; z-index: 6; top: 26%; left: 4%; right: 4%; text-align: center; color: #ffdf56; font-size: min(7.4cqw, 13cqh); line-height: 1.6; text-shadow: 0 5px #c76c22, 0 10px #251225, 4px 0 #251225, -4px 0 #251225; pointer-events: none; animation: waffle-shout 600ms cubic-bezier(.1,.9,.2,1) both; }
.loss-shout span { display: block; }
@keyframes waffle-shout {
  0% { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  30% { transform: scale(1.13) rotate(3deg); opacity: 1; }
  48% { transform: scale(0.97) rotate(-3deg); }
  66% { transform: scale(1.04) rotate(2deg); }
  82% { transform: scale(1) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}
.result-score { margin: 0 0 16px; }
.result-score strong { font-size: min(7cqw, 11cqh); display: block; color: #fff5df; }
.result-score span { display: block; font-size: 8px; margin-top: 12px; line-height: 1.6; color: #d9bea0; }
.new-best { font-size: 10px; color: #ffe778; margin: 0 0 20px; }
.result-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.result-actions .pixel-button { font-size: 10px; padding: 12px 16px; }
.scoreboard h3 { font-size: 12px; color: #ffe478; margin: 0 0 20px; }
.scoreboard ol { list-style: decimal-leading-zero; margin: 0 0 20px; padding-left: 28px; max-height: 130px; overflow-y: auto; scrollbar-width: thin; }
.scoreboard li { font-size: 10px; padding: 8px 0 8px 4px; color: #d2b690; line-height: 1.6; }
.scoreboard li span:last-child { float: right; padding-left: 10px; color: #fff1ce; }
.scoreboard form { display: flex; gap: 12px; }
.scoreboard input { background: #170f1d; border: 2px solid #c49c60; color: #ffdd6b; width: 104px; min-height: 48px; text-align: center; font-size: 16px; border-radius: 0; }
.scoreboard form .pixel-button { padding: 10px 16px; font-size: 10px; }
[data-score-status], .share-status { font-family: 'VT323', monospace; font-size: 18px; line-height: 1.2; color: #cfb69d; min-height: 1.2em; margin: 16px 0 0; }
.noscript { position: absolute; bottom: 0; background: #221724; padding: 24px; font-size: 12px; line-height: 2; z-index: 10; }
.noscript a { color: #ffda58; }
@media (hover: hover) and (pointer: fine) { .quiet-button:hover { border-color: #e6c16d; color: #fff2bb; } }
@media (max-width: 520px) and (min-height: 451px) {
  .game-hud { top: 77px; width: 75%; }
  .waffle-title { top: 24%; font-size: 11cqw; }
  .start-button { top: 80%; }
  .attract-best { top: 14%; }
  .game-over:not([hidden]) { grid-template-columns: 1fr; gap: 28px; padding: 72px 9% 24px; align-content: start; overflow-y: auto; }
  .result-summary { text-align: center; }
  .result-summary h2 { font-size: 5.8cqw; margin-bottom: 18px; }
  .result-score strong { font-size: 10cqw; }
  .result-actions { justify-content: center; }
  .scoreboard ol { max-height: 88px; }
  .scoreboard form { justify-content: center; }
  .scoreboard h3 { text-align: center; }
}
@media (max-height: 450px) {
  .utility-controls { top: 6px; left: 8px; right: 8px; }
  .game-hud { top: 11px; width: 43%; }
  .stack-count strong { font-size: 20px; margin-top: 5px; }
  .hud-label { font-size: 7px; }
  .next-piece canvas { width: 56px; height: 32px; }
  .placement-controls { bottom: max(12px, env(safe-area-inset-bottom)); }
  .control-hint { font-size: 15px; margin-bottom: 6px; }
  .control-row { gap: 9px; }
  .place-button { padding: 10px 16px; min-width: 132px; min-height: 44px; }
  .waffle-title { top: 10%; font-size: 12cqh; }
  .start-button { top: 81%; min-height: 40px; padding: 9px 18px; font-size: 10px; }
  .attract-best { top: 4%; text-align: right; padding-right: 74px; font-size: 7px; }
  .game-over:not([hidden]) { padding: 40px 9% 12px; gap: 7%; }
  .result-summary h2 { font-size: 5.2cqh; line-height: 1.5; margin-bottom: 12px; }
  .result-score strong { font-size: 10cqh; }
  .result-score span { font-size: 7px; margin-top: 7px; }
  .result-score { margin-bottom: 9px; }
  .new-best { margin-bottom: 8px; font-size: 8px; }
  .scoreboard h3 { font-size: 9px; margin-bottom: 8px; }
  .scoreboard ol { max-height: 70px; margin-bottom: 10px; }
  .scoreboard li { padding: 3px 0; font-size: 8px; }
  .scoreboard input { min-height: 44px; width: 90px; }
  .scoreboard form { gap: 8px; }
  .scoreboard form .pixel-button { min-height: 44px; padding: 8px 12px; }
  [data-score-status], .share-status { font-size: 14px; margin-top: 9px; }
  .pause-content { gap: 16px; }
  .pause-content h2 { font-size: 22px; margin: 0; }
}
@media (pointer: coarse) { .start-button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .launch-announcement, .loss-shout { animation: none; } }