:root { --bg:#f4efe5; --card:#fffaf1; --ink:#202020; --muted:#666; --line:#d8cbb7; --accent:#19764f; --blue:#3e5f8a; --bad:#9b2424; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--ink); }
.shell { width:min(560px, 100%); margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:0 10px 28px rgba(0,0,0,.08); }
.hidden { display:none; }
h1 { font-size:2.25rem; margin:.2rem 0 .5rem; }
.title { text-align:center; letter-spacing:-.03em; }
.centered { text-align:center; }
.intro { text-align:center; max-width:430px; margin:.4rem auto 1rem; }
h2 { font-size:1.25rem; margin:1.2rem 0 .7rem; }
.muted { color:var(--muted); font-size:1.05rem; }
label { display:block; font-weight:700; margin:14px 0 6px; }
input, select { width:100%; font-size:1.4rem; padding:14px; border:2px solid var(--line); border-radius:14px; background:white; }
button { width:100%; min-height:60px; margin-top:16px; border:0; border-radius:16px; background:var(--accent); color:white; font-size:1.2rem; font-weight:800; }
button.secondary { background:var(--blue); }
button.quiet { background:transparent; color:var(--muted); border:1px solid var(--line); }
.msg { min-height:1.5rem; font-weight:700; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.chips button { width:auto; min-height:40px; padding:0 14px; margin:0; font-size:1rem; background:#ede4d4; color:var(--ink); }
.practiceRow { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:end; margin-top:22px; }
.practiceRow button { margin-top:0; }
.topline { display:flex; justify-content:space-between; font-weight:800; color:var(--muted); }
.progress { height:12px; background:#e8dfd0; border-radius:999px; overflow:hidden; margin:12px 0; }
.progress div { height:100%; width:0%; background:var(--accent); transition:.2s; }
.moneyTray { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; min-height:190px; padding:14px; background:#fff; border:2px dashed var(--line); border-radius:20px; }
.moneyTray img { max-width:86px; max-height:86px; filter: drop-shadow(0 4px 3px rgba(0,0,0,.18)); }
.moneyTray img.note { max-width:150px; max-height:78px; }
.answerLabel { margin-top:18px; }
.answer { font-size:2.4rem; font-weight:900; text-align:center; background:white; border:2px solid var(--line); padding:12px; border-radius:16px; }
.keypad { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:14px; }
.keypad .wide { grid-column:1 / -1; }
.keypad button { margin:0; background:#303030; }
#checkBtn { font-size:1.35rem; }
.ok { color:var(--accent); }
.bad { color:var(--bad); }
table { width:100%; border-collapse:collapse; font-size:1rem; }
th, td { text-align:left; border-bottom:1px solid var(--line); padding:8px 4px; }
th { font-weight:800; }
@media (max-width:420px){ .shell{padding:10px;} .card{padding:16px;border-radius:18px;} h1{font-size:2rem;} .moneyTray img{max-width:76px;max-height:76px;} }

.badge { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; background:#f3c64b; color:#202020; font-size:.75rem; font-weight:900; vertical-align:middle; }
.badge.big { font-size:1rem; padding:5px 10px; }
#dailyBtn { margin-bottom:10px; }
.landingLeaderboards { margin-top:22px; padding-top:8px; }
#loginView .chips { justify-content:center; margin:16px 0 6px; }
#loginView label { margin-top:16px; }
#loginView button { margin-top:18px; }
#playerGreeting { margin-top:-.2rem; font-size:1.1rem; font-weight:700; }


/* Reduce accidental iPhone zoom on quick keypad taps */
button, .keypad button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

#answer, .answer {
  touch-action: manipulation;
}

.gameBanner {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  margin-bottom: 10px;
}

#loginView .intro { margin-top: 8px; }
#menuView .gameBanner { margin-bottom: 8px; }

@media (max-width:420px){
  .gameBanner { border-radius:14px; margin-bottom:10px; }
}

/* Fixed 4:1 banner ratio */
.gameBanner {
  width: 100%;
  aspect-ratio: 4 / 1;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  background: #8b5a2b;
}


/* Final banner override */
.gameBanner {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: unset !important;
  display: block !important;
  border-radius: 16px !important;
  margin-bottom: 10px !important;
}