@font-face {
  font-family: "BoldPixels";
  src: url("../assets/fonts/BoldPixels.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: block;
}
:root {
  --panel-border: #1a3043; --panel-bg: rgba(7, 17, 27, .95); --text: #edf5fb; --text-muted: #7890a6;
  --pixel-font: "BoldPixels", "Lucida Console", monospace; --gold: #efb43f; --gold-light: #ffd36a; --gold-dark: #9c6719;
  --green: #2bd276; --green-light: #64e99d; --green-dark: #117d49;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-width: 0; min-height: 100%; overflow-x: hidden; }
button, input { font-family: var(--pixel-font); }
button { appearance: none; -webkit-appearance: none; }
body {
  min-height: 100dvh; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); color: var(--text); font-family: var(--pixel-font);
  background-color: #06101a; background-image: linear-gradient(rgba(3, 9, 15, .2), rgba(3, 9, 15, .3)), url("../assets/design/desktop-background.png");
  background-position: center top; background-repeat: no-repeat; background-size: auto 100%; overflow-y: auto; touch-action: pan-y;
}
#left-chrome { display: none; }
#mobile-header { width: 100%; max-width: 480px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#mobile-brand { display: grid; width: max-content; color: var(--text); font-size: clamp(25px, 7.4vw, 36px); font-weight: 900; line-height: .82; letter-spacing: 1.2px; text-shadow: 0 2px #334b60; }
#mobile-header-actions { display: flex; align-items: center; gap: 6px; }
#balance-panel { min-width: 88px; padding: 5px 8px; display: flex; flex-direction: column; gap: 3px; border: 2px solid var(--panel-border); border-radius: 4px; background: rgba(7, 17, 27, .9); box-shadow: inset 0 2px rgba(95, 132, 161, .08), 0 3px 0 rgba(0, 5, 10, .35); }
#balance-panel .stat-label { font-size: 10px; }
#balance-panel .stat-value { font-size: clamp(18px, 5.4vw, 24px); }
#mobile-icon-cluster { display: grid; grid-template-columns: repeat(2, 38px); grid-template-rows: repeat(2, 38px); gap: 3px; }
#mobile-icon-cluster button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 2px solid var(--panel-border); border-radius: 3px; outline: none; background: rgba(7, 17, 27, .82); color: #b8cada; cursor: pointer; }
#mobile-icon-cluster svg { width: 25px; height: 25px; display: block; fill: currentColor; }
#mobile-icon-cluster button:hover { color: #edf5fb; background: rgba(24, 45, 63, .8); }
#mobile-icon-cluster button:active { transform: translateY(1px); color: #c8ddeb; }
#mobile-icon-cluster button:focus-visible { outline: 2px solid #9fc2da; outline-offset: 2px; }
#game-container { width: 100%; max-width: 480px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 6px; }
.shell-panel { width: 100%; min-width: 0; position: relative; border: 2px solid var(--panel-border); border-radius: 6px; background: var(--panel-bg); box-shadow: 0 8px 20px rgba(0, 5, 10, .3), inset 0 2px rgba(95, 132, 161, .08), inset 0 -2px rgba(0, 5, 10, .24); }
#hud-panel { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: stretch; gap: 5px; padding: 6px 6px; }
#economy-panel { grid-column: 1; min-width: 0; display: flex; align-items: stretch; }
#round-ui { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.stat { min-width: 0; min-height: 43px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 1px 6px 0; }
.stat:first-child { padding-left: 2px; }
.stat + .stat { border-left: 2px solid rgba(65, 91, 113, .4); }
.stat-label { color: #7897b1; font-size: clamp(10px, 2.9vw, 15px); line-height: 1; font-weight: 500; letter-spacing: .035em; white-space: nowrap; }
.stat-value { color: var(--text); font-size: clamp(22px, 6vw, 32px); line-height: .92; font-weight: 650; letter-spacing: .02em; }
.stat-current-x .stat-value { font-size: clamp(28px, 8vw, 40px); }
#canvas-stage { position: relative; width: 100%; max-width: 100%; margin: 0 auto; line-height: 0; }
#game-panel { display: block; padding: 3px; overflow: hidden; }
#game-canvas { display: block; width: 100%; height: 100%; max-width: 100%; background: transparent; border-radius: 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
#game-canvas[data-interactive="true"] { cursor: grab; }
#game-canvas[data-dragging="true"] { cursor: grabbing; }
#pre-round-ui { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: 4px; align-items: center; padding: 6px 6px 7px; }
#stake-label { grid-column: 1; grid-row: 1; justify-self: start; color: #88a7c1; font-size: 13px; line-height: 1; letter-spacing: .08em; }
#stake-row { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 5px; }
#stake-selector { width: 100%; display: grid; grid-template-columns: .9fr .75fr 1.55fr .75fr .9fr; align-items: center; gap: 5px; }
.stake-adjust, #start-btn, #cashout-btn { display: grid; place-items: center; min-width: 0; height: 46px; padding: 4px 3px 6px; border: 2px solid #2c4052; border-radius: 4px; background: #0d1a27; color: var(--text); font: inherit; font-size: clamp(13px, 3.8vw, 18px); line-height: 1; font-weight: 600; cursor: pointer; outline: none; user-select: none; -webkit-user-select: none; }
.stake-adjust { box-shadow: inset 0 3px rgba(90, 123, 149, .14), inset 0 -4px #07101a, 0 3px 0 #050c13; }
.stake-adjust:not(:disabled):hover { border-color: #52708b; background: #132435; filter: brightness(1.06); }
.stake-adjust:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px rgba(90, 123, 149, .1), inset 0 -2px #07101a, 0 1px 0 #050c13; }
.stake-adjust:disabled, #stake-input:disabled, #start-btn:disabled, #cashout-btn:disabled { opacity: .42; cursor: not-allowed; filter: saturate(.48); }
#stake-input { width: 100%; height: 46px; min-width: 0; padding: 4px; border: 2px solid #334b60; border-radius: 4px; outline: none; background: #0a1520; color: var(--text); font: 650 clamp(19px, 6.2vw, 27px)/1 var(--pixel-font); text-align: center; appearance: textfield; -moz-appearance: textfield; cursor: text; box-shadow: inset 0 3px #06101a, inset 0 -2px rgba(74, 104, 128, .12); }
#stake-input::-webkit-inner-spin-button, #stake-input::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
#stake-input:focus { border-color: #8bb4d3; box-shadow: inset 0 3px #06101a, 0 0 0 2px rgba(139, 180, 211, .2); }
#start-btn { width: 100%; height: 52px; border-color: var(--green-light); background: var(--green); color: #07110c; font-size: clamp(22px, 6.6vw, 29px); font-weight: 700; box-shadow: inset 0 3px var(--green-light), inset 0 -5px var(--green-dark), 0 4px 0 #0b542f; }
#start-btn:not(:disabled):hover { filter: brightness(1.06); }
#start-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px rgba(255,255,255,.28), inset 0 -3px rgba(0,0,0,.3), 0 2px 0 rgba(0,0,0,.5); }
#cashout-btn { width: 100%; height: 52px; align-self: center; border-color: var(--gold-light); background: var(--gold); color: #090d12; font-size: clamp(13px, 4vw, 20px); font-weight: 700; box-shadow: inset 0 3px var(--gold-light), inset 0 -5px var(--gold-dark), 0 4px 0 #68420f; }
#cashout-btn:not(:disabled):hover { filter: brightness(1.06); }
#cashout-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px rgba(255,255,255,.28), inset 0 -3px rgba(0,0,0,.3), 0 2px 0 rgba(0,0,0,.5); }
.stake-adjust:focus-visible, #start-btn:focus-visible, #cashout-btn:focus-visible { outline: 2px solid #9fc2da; outline-offset: 2px; }
#stake-limits { grid-column: 1; grid-row: 3; justify-self: center; color: #66829b; font-size: 11px; line-height: 1; letter-spacing: .065em; transform: translateY(3px); }
#start-error { grid-column: 1; grid-row: 4; justify-self: center; min-height: 12px; color: #e06b6b; font-size: 10px; line-height: 1; }
#round-actions { display: none !important; }
#round-feedback { --feedback-color:#47d98a; position:absolute; left:var(--board-overlay-left,0px); top:var(--board-overlay-top,0px); z-index:20; width:var(--board-overlay-width,100%); height:var(--board-overlay-height,100%); display:grid; place-content:center; justify-items:center; gap:clamp(14px,4vw,28px); border:4px solid var(--feedback-color); border-radius:0; color:var(--feedback-color); text-align:center; line-height:1; pointer-events:all; background:rgba(4,13,20,.88); box-shadow:inset 0 0 0 4px rgba(5,18,27,.92),inset 0 0 0 7px rgba(71,217,138,.22); }
#round-feedback[hidden] { display:none; }
#round-feedback[data-outcome="LOSS"] { --feedback-color:#ed4d59; background:rgba(28,7,12,.9); box-shadow:inset 0 0 0 4px rgba(28,7,12,.94),inset 0 0 0 7px rgba(237,77,89,.22); }
#round-feedback strong { font-size:clamp(64px,22vw,112px); line-height:.84; font-weight:900; letter-spacing:.045em; text-shadow:0 6px #123322; }
#round-feedback[data-outcome="LOSS"] strong { text-shadow:0 6px #4b1118; }
#round-feedback span { font-size:clamp(30px,11vw,52px); line-height:.9; font-weight:700; letter-spacing:.035em; }
#game-canvas[data-feedback="LOSS"] { background:rgba(72,27,32,.72); }
@media (max-width:350px) {
  body { padding-left:8px; padding-right:8px; }
  #mobile-header-actions { gap:3px; }
  #balance-panel { min-width:78px; padding-left:6px; padding-right:6px; }
  #mobile-icon-cluster { grid-template-columns:repeat(2,32px); grid-template-rows:repeat(2,32px); gap:2px; }
  #mobile-icon-cluster button { width:32px; height:32px; }
  #mobile-icon-cluster svg { width:22px; height:22px; }
  #hud-panel { grid-template-columns:minmax(0,1fr) 96px; padding-left:4px; padding-right:4px; }
  .stat { padding-left:3px; padding-right:3px; }
  .stat-label { font-size:9px; letter-spacing:0; }
  .stat-value { font-size:19px; }
  .stat-current-x .stat-value { font-size:24px; }
  #cashout-btn { font-size:11px; }
}

@media (max-height:740px) {
  body { padding-top:max(5px, env(safe-area-inset-top)); padding-bottom:max(5px, env(safe-area-inset-bottom)); }
  #mobile-brand { font-size:clamp(23px, 6.8vw, 31px); }
  #game-container { margin-top:5px; gap:4px; }
  #hud-panel { padding-top:4px; padding-bottom:4px; }
  .stat { min-height:38px; gap:2px; }
  #cashout-btn { height:46px; }
  #pre-round-ui { gap:3px; padding-top:4px; padding-bottom:4px; }
  #stake-row { gap:4px; }
  .stake-adjust, #stake-input { height:42px; }
  #start-btn { height:48px; }
  #stake-label { font-size:12px; }
  #stake-limits { font-size:10px; }
  #start-error { min-height:10px; font-size:9px; }
}

/* Phase 15.2: presentation-only desktop feedback, mobile sizing. */
#effects-canvas {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}
#cashout-btn[data-feel-ready="true"] { animation: cashout-ready-breathe 2.4s steps(4, end) infinite; }
#start-btn.feel-start { animation: start-confirm .26s steps(3, end); }
#sound-btn .sound-muted-mark { display: none; }
#sound-btn[aria-pressed="true"] .sound-speaker { opacity: .48; }
#sound-btn[aria-pressed="true"] .sound-muted-mark { display: block; }
#current-x-value { position: relative; display: inline-block; transform-origin: 45% 55%; }
#current-x-value[data-delta]::after {
  content: attr(data-delta);
  position: absolute;
  left: 100%;
  top: -12px;
  margin-left: 7px;
  color: #65e7a0;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
#current-x-value.feel-x-down[data-delta]::after { color: #ef6872; }
#current-x-value.feel-x-up { animation: x-pop-up .48s steps(4, end); }
#current-x-value.feel-x-down { animation: x-pop-down .48s steps(4, end); }

@keyframes cashout-ready-breathe {
  0%, 100% { filter: brightness(1); box-shadow: inset 0 3px var(--gold-light), inset 0 -6px var(--gold-dark), 0 4px 0 #68420f; }
  50% { filter: brightness(1.08); box-shadow: inset 0 3px #ffe39a, inset 0 -6px var(--gold-dark), 0 4px 0 #68420f, 0 0 0 2px rgba(255, 211, 106, .18); }
}
@keyframes start-confirm {
  0% { transform: scale(1); }
  45% { transform: translateY(1px) scale(.975); }
  100% { transform: scale(1); }
}
@keyframes x-pop-up {
  0% { transform: scale(1); color: var(--text); }
  45% { transform: scale(1.16); color: #65e7a0; text-shadow: 0 0 12px rgba(101, 231, 160, .38); }
  100% { transform: scale(1); color: var(--text); }
}
@keyframes x-pop-down {
  0% { transform: translateX(0); color: var(--text); }
  30% { transform: translateX(-2px); color: #ef6872; }
  60% { transform: translateX(2px); color: #ef6872; }
  100% { transform: translateX(0); color: var(--text); }
}

@media (prefers-reduced-motion: reduce) {
  #cashout-btn[data-feel-ready="true"], #start-btn.feel-start,
  #current-x-value.feel-x-up, #current-x-value.feel-x-down { animation: none; }
}


#current-x-value[data-delta]::after { left: 0; top: 100%; margin: 2px 0 0; font-size: 10px; }
#effects-canvas { z-index: 21; }

/* Phase 16 panels: mobile-sized overlay; the accepted game layout stays unchanged. */
#mobile-icon-cluster button[aria-expanded="true"] { color:#edf5fb; border-color:#668ba8; background:#162e42; }
#desktop-panel-layer { position:fixed; inset:0; height:100dvh; z-index:40; display:grid; place-items:center; padding:max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
#desktop-panel-layer[hidden], .desktop-dialog[hidden] { display:none; }
.desktop-panel-backdrop { position:absolute; inset:0; border:0; background:rgba(2,7,12,.82); }
.desktop-dialog { position:relative; width:min(100%,480px); min-width:0; min-height:0; max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display:flex; flex-direction:column; border:2px solid #486783; border-radius:5px; background:#0b1a28; box-shadow:0 12px 0 rgba(0,5,10,.4),inset 0 3px rgba(149,190,218,.12); color:#e7f2fb; }
.desktop-dialog header { flex:none; display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:7px 12px; border-bottom:2px solid #263e52; background:#112538; }
.desktop-dialog h2 { font:700 clamp(21px,6vw,27px)/1 var(--pixel-font); letter-spacing:.06em; }
.panel-close { flex:none; width:44px; height:44px; border:2px solid #456179; border-radius:3px; background:#10202e; color:#d9e9f5; font:30px/1 var(--pixel-font); cursor:pointer; }
.panel-close:hover, .panel-link:hover, .account-actions button:hover, .account-signout:hover, #account-retry:hover { filter:brightness(1.15); }
.panel-close:active, .account-actions button:active, .account-signout:active, #account-retry:active { transform:translateY(1px); }
.desktop-dialog button:focus-visible, .desktop-dialog a:focus-visible, .desktop-dialog input:focus-visible { outline:2px solid #9fc2da; outline-offset:2px; }
.panel-content { overflow:auto; min-height:0; padding:18px clamp(14px,4vw,24px) 22px; overscroll-behavior:contain; touch-action:pan-y; scrollbar-color:#42647e #0a1825; }
.desktop-dialog [lang="ru"] { font-family:Arial,sans-serif; }
.rules-copy { font:16px/1.5 Arial,sans-serif; color:#cfdeea; overflow-wrap:anywhere; }
.rules-copy h3, .panel-content h3 { margin:18px 0 8px; color:#9fc2da; font:700 18px/1.2 var(--pixel-font); }
.rules-copy h3 { font-family:Arial,sans-serif; }
.rules-copy h3:first-child { margin-top:0; }
.rules-copy p + p { margin-top:9px; }
.setting-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:20px; font-size:16px; }
.setting-row output { color:#a9c9df; font-size:15px; }
.setting-row input[type="range"] { grid-column:1/-1; width:100%; min-height:32px; accent-color:#68afd5; cursor:pointer; touch-action:auto; }
.setting-row small, .currency-setting small { display:block; margin-top:5px; color:#819bb0; font:13px/1.4 Arial,sans-serif; }
.setting-toggle { position:relative; grid-template-columns:minmax(0,1fr) 52px; min-height:48px; cursor:pointer; }
.setting-toggle input { position:absolute; right:0; width:52px; height:44px; opacity:0; cursor:pointer; }
.toggle-indicator { width:52px; height:30px; border:2px solid #486783; background:#182839; box-shadow:inset 0 2px #07111c; }
.toggle-indicator::before { content:""; display:block; width:18px; height:20px; margin:3px; background:#819bb0; }
.setting-toggle input:checked + .toggle-indicator { border-color:#50a679; background:#145c3c; }
.setting-toggle input:checked + .toggle-indicator::before { transform:translateX(22px); background:#78e2a8; }
.setting-toggle input:focus-visible + .toggle-indicator { outline:2px solid #9fc2da; outline-offset:2px; }
.currency-setting { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:2px 0 18px; padding:10px 12px 12px; border:2px solid #2c465a; }
.currency-setting legend { padding:0 5px; color:#c7deee; font-size:15px; }
.currency-setting label { min-height:38px; display:flex; align-items:center; cursor:pointer; }
.currency-setting input { accent-color:#69bde6; }
.currency-setting small { width:100%; margin:0; }
.panel-link { display:flex; justify-content:space-between; align-items:center; min-height:44px; margin-top:8px; padding:10px 12px; border:2px solid #314b60; background:#102538; color:#cde7f7; text-decoration:none; font-size:15px; }
.panel-link svg { flex:none; width:16px; height:16px; fill:currentColor; }
.account-balance { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px; border:2px solid #314b60; background:#102538; }
.account-balance strong { font-size:clamp(20px,6vw,26px); }
.account-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0 20px; }
.account-actions button, .account-signout, #account-retry { min-height:46px; min-width:0; padding:7px; border:2px solid #486783; background:#173149; color:#e7f2fb; font:15px/1.2 Arial,sans-serif; cursor:pointer; }
#account-retry { width:100%; margin-bottom:10px; }
.account-empty { padding:14px; border:2px dashed #30495c; color:#819bb0; font:15px/1.4 Arial,sans-serif; }
.account-signout { margin-top:20px; width:100%; background:#142536; }
#account-notice { min-height:22px; margin-top:10px; color:#a9c9df; font-size:14px; }
body.recording-mode #round-feedback-title { filter:blur(6px); }