:root { --front-gap: clamp(6px, 1vmin, 10px); --front-pad: clamp(8px, 1.2vmin, 14px); }
body.page-index, body.page-spin, body.page-balance { height:100dvh; max-height:100dvh; overflow:hidden; }
body.page-index .app-shell, body.page-spin .app-shell, body.page-balance .app-shell { width:min(1180px,100%); height:100dvh; max-height:100dvh; margin:0 auto; padding:var(--front-pad); gap:var(--front-gap); }
body.page-index .topbar, body.page-spin .topbar, body.page-balance .topbar { min-height:0; gap:10px; }
body.page-index .brand, body.page-spin .brand, body.page-balance .brand { font-size:clamp(20px,2.2vw,30px); }
body.page-index .subbrand, body.page-spin .subbrand, body.page-balance .subbrand { font-size:clamp(11px,.95vw,13px); margin-top:2px; }
body.page-index .timer-pill, body.page-spin .timer-pill, body.page-balance .timer-pill { padding:7px 10px; font-size:12px; }
body.page-index .main-card, body.page-spin .main-card, body.page-balance .main-card { min-height:0; height:100%; padding:clamp(10px,1.2vmin,14px); border-radius:20px; overflow:hidden; }
.fit-box { width:100%; height:100%; min-height:0; overflow:hidden; display:grid; place-items:start center; }
.fit-inner { width:100%; max-width:100%; transform-origin:top center; will-change:transform; }
.fit-inner-narrow { max-width:780px; } .fit-inner-spin { max-width:980px; } .fit-inner-balance { max-width:980px; }
body.page-index .screen, body.page-index .screen.active { min-height:0; }
body.page-index .hero-panel { max-width:860px; width:100%; margin:0 auto; display:grid; align-content:center; justify-items:center; gap:clamp(8px,1.1vmin,12px); padding:clamp(16px,1.8vmin,22px); }
body.page-index .hero-title { font-size:clamp(34px,5vw,60px); letter-spacing:.02em; }
body.page-index .hero-copy { max-width:28ch; font-size:clamp(15px,1.7vw,20px); line-height:1.18; }
body.page-index .pill-row { gap:8px; } body.page-index .feature-pill { padding:7px 11px; font-size:clamp(11px,.95vw,13px); }
body.page-index .btn, body.page-spin .btn, body.page-balance .btn { min-height:clamp(38px,5.1vh,48px); padding:0 14px; border-radius:14px; font-size:clamp(13px,1.2vw,16px); }
body.page-index .btn-cta, body.page-spin .btn-cta, body.page-balance .btn-cta { min-height:clamp(42px,5.6vh,52px); padding-inline:18px; font-size:clamp(16px,1.6vw,20px); }
body.page-index .button-row, body.page-spin .button-row, body.page-balance .button-row { gap:8px; }
body.page-index .flow-card, body.page-spin .slot-card, body.page-spin .spin-form-card, body.page-balance .lookup-card, body.page-balance .info-card { min-height:0; }
body.page-index .flow-card { display:grid; gap:8px; height:100%; }
body.page-index .flow-card-phone, body.page-index .flow-card-info { grid-template-rows:auto auto minmax(0,1fr) auto; } body.page-index .flow-card-final { grid-template-rows:auto minmax(0,1fr) auto; }
body.page-index .flow-head { gap:3px; } body.page-index .flow-head h1, body.page-spin .slot-header h1, body.page-balance .lookup-card h1 { font-size:clamp(20px,2vw,28px); }
body.page-index .phone-display-wrap, body.page-index .active-field-card, body.page-balance .lookup-card, body.page-spin .slot-card, body.page-spin .spin-form-card, body.page-index .status-panel, body.page-index .info-card, body.page-balance .info-card, body.page-spin .result-card { padding:10px; }
body.page-index .phone-display, body.page-balance .phone-display, body.page-spin .phone-display { font-size:clamp(24px,4vw,40px); line-height:1.05; }
body.page-spin .phone-display-compact, body.page-balance .phone-display-compact { font-size:clamp(22px,3.5vw,34px); }
body.page-index .active-field-input, body.page-spin .field input, body.page-balance .field input { font-size:clamp(15px,1.5vw,19px); }
body.page-index .selector-row { gap:6px; } body.page-index .selector-btn { min-height:clamp(42px,5vh,56px); padding:8px 10px; gap:1px; } body.page-index .selector-title { font-size:clamp(12px,1vw,14px); } body.page-index .selector-value { font-size:clamp(10px,.9vw,12px); }
body.page-index .keypad, body.page-spin .keypad, body.page-balance .keypad { gap:7px; min-height:0; } body.page-index .keypad-numeric, body.page-spin .keypad-numeric, body.page-balance .keypad-numeric { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.page-index .key, body.page-spin .key, body.page-balance .key { min-height:clamp(36px,5.2vh,50px); border-radius:12px; font-size:clamp(15px,1.8vw,20px); }
body.page-index .keypad-alpha { grid-template-columns:repeat(10,minmax(0,1fr)); } body.page-index .keypad-alpha .key { min-height:clamp(22px,3.1vh,30px); font-size:clamp(10px,.9vw,12px); border-radius:9px; }
body.page-index .status-panel { gap:6px; } body.page-index .status-line { font-size:clamp(18px,2.1vw,24px); } body.page-index .status-detail, body.page-index .muted, body.page-spin .muted, body.page-balance .muted { font-size:clamp(12px,1vw,14px); } body.page-index .summary-pair { font-size:clamp(12px,1vw,14px); }
body.page-index .final-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-content:start; } body.page-index .big-code, body.page-spin .big-code, body.page-balance .big-code { font-size:clamp(22px,3.6vw,40px); } body.page-index .big-code-small, body.page-spin .big-code-small, body.page-balance .big-code-small { font-size:clamp(18px,2.6vw,28px); }
body.page-spin .spin-shell-single, body.page-balance .balance-shell-compact { display:block; height:100%; min-height:0; } body.page-spin .slot-card-compact, body.page-spin .spin-form-card-compact, body.page-balance .lookup-card-compact, body.page-balance .compact-card-block { padding:10px; }
body.page-spin .slot-card-compact { display:grid; gap:8px; } body.page-spin .slot-machine-compact { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } body.page-spin .slot-window, body.page-spin .reel-item { min-height:clamp(54px,8.6vh,84px); height:clamp(54px,8.6vh,84px); } body.page-spin .slot-window { border-radius:14px; } body.page-spin .reel-item { font-size:clamp(15px,1.8vw,22px); } body.page-spin .spin-form-card-compact { display:grid; gap:8px; } body.page-spin .spin-actions-compact { align-items:center; flex-wrap:wrap; justify-content:space-between; }
body.page-balance .balance-grid-compact { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } body.page-balance .lookup-form { display:grid; gap:8px; }
@media (max-width:900px){ body.page-index .final-grid, body.page-balance .balance-grid-compact { grid-template-columns:1fr; } }
@media (max-width:760px){ body.page-index .app-shell, body.page-spin .app-shell, body.page-balance .app-shell { padding:8px; gap:8px; } body.page-index .timer-pill, body.page-spin .timer-pill, body.page-balance .timer-pill { display:none; } body.page-index .topbar, body.page-spin .topbar, body.page-balance .topbar { align-items:flex-start; } body.page-index .hero-title { font-size:clamp(28px,10vw,44px); } body.page-index .hero-copy { font-size:14px; } body.page-index .feature-pill { font-size:11px; } body.page-index .keypad-alpha { grid-template-columns:repeat(10,minmax(0,1fr)); } body.page-index .keypad-alpha .key { min-height:20px; font-size:9px; } body.page-index .phone-display, body.page-spin .phone-display, body.page-balance .phone-display { font-size:clamp(20px,7vw,30px); } body.page-spin .slot-window, body.page-spin .reel-item { min-height:clamp(48px,7.5vh,72px); height:clamp(48px,7.5vh,72px); } }
@media (max-height:760px){ body.page-index .subbrand, body.page-spin .subbrand, body.page-balance .subbrand { display:none; } body.page-index .hero-copy, body.page-index .pill-row { display:none; } body.page-index .btn, body.page-spin .btn, body.page-balance .btn { min-height:34px; } body.page-index .btn-cta, body.page-spin .btn-cta, body.page-balance .btn-cta { min-height:38px; font-size:15px; } body.page-index .key, body.page-spin .key, body.page-balance .key { min-height:32px; font-size:14px; } body.page-index .keypad-alpha .key { min-height:18px; font-size:9px; } body.page-spin .slot-window, body.page-spin .reel-item { min-height:44px; height:44px; } }

/* simpler, sturdier spin page */
body.page-spin .spin-lite-shell {
  display: grid;
  align-items: stretch;
}
body.page-spin .spin-lite-grid {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0,1fr);
  gap: 10px;
}
body.page-spin .spin-lite-head {
  text-align: center;
  display: grid;
  gap: 4px;
}
body.page-spin .spin-lite-head h1 {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1;
}
body.page-spin .spin-lite-machine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
body.page-spin .reel-lite {
  min-height: clamp(64px, 10vh, 92px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  overflow: hidden;
}
body.page-spin .reel-face {
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgb(255, 236, 186);
}
body.page-spin .spin-result-card {
  padding: 12px;
  text-align: center;
}
body.page-spin .spin-lite-form {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  gap: 8px;
}
body.page-spin .spin-lite-pad {
  align-content: start;
}
body.page-spin .spin-lite-actions {
  flex-wrap: wrap;
  justify-content: center;
}
body.page-spin .spin-lite-actions .btn {
  min-width: 140px;
}
@media (max-height: 760px) {
  body.page-spin .spin-lite-grid { gap: 8px; }
  body.page-spin .reel-lite { min-height: 52px; }
  body.page-spin .reel-face { font-size: 16px; }
  body.page-spin .spin-result-card { padding: 10px; }
  body.page-spin .spin-lite-actions .btn { min-width: 120px; }
}
@media (max-width: 760px) {
  body.page-spin .spin-lite-head h1 { font-size: clamp(24px, 7vw, 34px); }
  body.page-spin .spin-lite-actions { gap: 8px; }
  body.page-spin .spin-lite-actions .btn { flex: 1 1 100%; min-width: 0; }
}


/* rate us */
body.page-rate { height:100dvh; max-height:100dvh; overflow:hidden; }
body.page-rate .app-shell { width:min(980px,100%); height:100dvh; max-height:100dvh; margin:0 auto; padding:var(--front-pad); gap:var(--front-gap); }
body.page-rate .topbar { min-height:0; gap:10px; }
body.page-rate .brand { font-size:clamp(20px,2.2vw,30px); }
body.page-rate .subbrand { font-size:clamp(11px,.95vw,13px); margin-top:2px; }
body.page-rate .main-card { min-height:0; height:100%; padding:clamp(10px,1.2vmin,14px); border-radius:20px; overflow:hidden; }
body.page-rate .rate-screen { display:none; height:100%; }
body.page-rate .rate-screen.active { display:block; }
body.page-rate .fit-inner-rate { max-width:900px; }
body.page-rate .rate-card { display:grid; gap:10px; height:100%; align-content:start; }
body.page-rate .rate-card-center { align-content:center; justify-items:center; text-align:center; }
body.page-rate .star-row { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; }
body.page-rate .star-btn { min-height:clamp(74px,12vh,110px); border-radius:18px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:rgba(255,255,255,.45); font-size:clamp(36px,7vw,58px); font-weight:900; }
body.page-rate .star-btn.active { color:rgb(255,214,90); background:rgba(255,214,90,.12); border-color:rgba(255,214,90,.55); }
body.page-rate .rate-center { text-align:center; }
body.page-rate .rate-comment { width:100%; min-height:82px; resize:none; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#fff; padding:12px; font-size:clamp(16px,1.6vw,20px); }
body.page-rate .rate-keypad { grid-template-columns:repeat(10, minmax(0,1fr)); gap:7px; }
body.page-rate .rate-keypad .key { min-height:clamp(28px,4.2vh,40px); font-size:clamp(11px,1vw,14px); border-radius:10px; }
body.page-rate .rate-keypad .xwide { grid-column:span 3; }
body.page-rate .status-panel { max-width:680px; display:grid; gap:8px; text-align:center; }
@media (max-width:760px) {
  body.page-rate .app-shell { padding:8px; gap:8px; }
  body.page-rate .timer-pill { display:none; }
  body.page-rate .star-btn { min-height:56px; font-size:30px; }
  body.page-rate .rate-keypad { grid-template-columns:repeat(7, minmax(0,1fr)); }
}
@media (max-height:760px) {
  body.page-rate .subbrand { display:none; }
  body.page-rate .star-btn { min-height:52px; font-size:30px; }
  body.page-rate .rate-keypad .key { min-height:24px; font-size:10px; }
}

body.page-spin .spin-phone-badge { padding:10px; text-align:center; }

.keypad.keypad-rows { display:flex !important; flex-direction:column; gap:10px; }
.keypad.keypad-rows .key-row { display:grid; gap:10px; width:100%; }