:root{
  --bg1:#a0e3ff;
  --bg2:#ffe0a6;
  --accent:#ff4d6d;
  --accent2:#2ec4b6;
  --gold:#ffcf49;
  --success:#22c55e;
  --danger:#ef4444;
  --text:#134e4a;
  --panel:#ffffffcc;
  --shadow:0 10px 30px rgba(0,0,0,0.12);
  --radius:16px;
  --radius-sm:10px;
  --gap:12px;
  --gap-lg:20px;
  --font:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  min-height:100vh;
  -webkit-tap-highlight-color: transparent;
}
.app-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:linear-gradient(90deg,#fff9,#fff4);
  backdrop-filter: blur(6px);
  position:sticky; top:0; z-index:10;
  box-shadow: var(--shadow);
}
.brand{
  font-weight:800;
  font-size:20px;
  color:#ff4d6d;
  text-shadow:0 1px 0 #fff;
}
.header-right{display:flex; gap:12px; align-items:center}
.sound-toggle input{accent-color:var(--accent)}
.btn{
  border:none;
  background:#fff;
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  font-weight:700;
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: transform .08s ease, background .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn.primary{
  background: linear-gradient(90deg, var(--accent), var(--gold));
  color:#fff;
}
.btn.ghost{
  background: #ffffffaa;
}
.btn.circle{
  border-radius:999px; width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:22px;
}
.btn.big{font-size:20px; padding:16px 22px; border-radius:999px}

.app{display:flex; align-items:stretch; justify-content:center; padding:10px}
.sky{
  width:min(100%,1200px);
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 420px auto auto auto;
  gap:var(--gap-lg);
}
.sky-bg{position:absolute; width:100%; height:100%; inset:0; z-index:-2}
.clouds{position:absolute; width:100%; height:200px; opacity:.5; z-index:-1; animation: clouds 40s linear infinite}
@keyframes clouds{
  0%{transform:translateX(0)}
  100%{transform:translateX(-25%)}
}
.hud{
  display:flex; gap:var(--gap); align-items:center; justify-content:space-between;
  background: var(--panel);
  padding:10px 14px; border-radius:var(--radius);
  box-shadow: var(--shadow); margin-top:6px;
}
.balance{font-weight:800}
.disclaimer{font-size:12px; opacity:.9}

.reel{
  overflow:hidden; background:#ffffffc7; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:8px;
}
.reel-track{
  display:flex; align-items:center; gap:26px; white-space:nowrap; will-change: transform;
}
.reel-track .cell{
  width:56px; height:56px; border-radius:14px; background:linear-gradient(180deg,#fff,#f4f4f4);
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(0,0,0,0.08);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}

.stage{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background: linear-gradient(180deg, #e6faff, #fff);
  box-shadow: var(--shadow);
}
.flight{width:100%; height:100%}
#kiteGroup{filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25)); transition: transform .15s ease}
.multiplier{
  position:absolute; left:50%; top:12px; transform:translateX(-50%);
  font-weight:900; font-size: clamp(28px, 8vw, 64px);
  background: linear-gradient(90deg, #ff4d6d, #ffaf40, #2ec4b6);
  background-clip: text; -webkit-background-clip:text; color:transparent;
  text-shadow: 0 2px 0 rgba(255,255,255,0.6);
}
.round-status{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  padding:6px 12px; border-radius:999px; font-weight:700; background:#ffffffbb; box-shadow: var(--shadow);
}
.status-win{color:var(--success)}
.status-lose{color:var(--danger)}
.win-pop{animation:pop 600ms ease}
@keyframes pop{0%{transform:translate(-50%,0) scale(1)} 50%{transform:translate(-50%, -6px) scale(1.08)} 100%{transform:translate(-50%,0) scale(1)}}
.shake{animation:shake .5s ease}
@keyframes shake{
  10%,90%{transform:translate(-50%,0) translateX(-1px)}
  20%,80%{transform:translate(-50%,0) translateX(2px)}
  30%,50%,70%{transform:translate(-50%,0) translateX(-4px)}
  40%,60%{transform:translate(-50%,0) translateX(4px)}
}

.controls{
  display:grid; grid-template-columns: 1fr 1fr; gap:var(--gap-lg);
  align-items:end; background: var(--panel); padding:14px; border-radius:var(--radius); box-shadow: var(--shadow);
}
.controls .control-row{display:flex; flex-direction:column; gap:8px}
.controls .action{grid-column:1 / -1; display:flex; justify-content:center}
.number-input{display:flex; gap:8px; align-items:center}
.number-input input{
  width:100%; min-width:0; border:none; padding:10px 12px; border-radius:14px; font-size:16px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
}

.log{
  background: var(--panel); border-radius:var(--radius); box-shadow: var(--shadow); padding:12px;
}
.log-title{font-weight:800; margin-bottom:6px}
.history{display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:0; list-style:none}
.history li{
  font-weight:800; padding:6px 10px; border-radius:999px; box-shadow: var(--shadow); background:#fff;
}
.history .h-win{background: #eafff0; color:#15803d}
.history .h-lose{background: #ffecec; color:#b91c1c}

.links{display:flex; gap:12px; justify-content:center; padding-bottom:24px}
.links a{color:#0b7285; font-weight:700; text-decoration:none}
.links a:hover{text-decoration:underline}

.cookie-banner{
  position: fixed; left:0; right:0; bottom:0; padding:12px;
}
.cookie-inner{
  margin:auto; max-width:900px; background:#fff; border-radius:14px; box-shadow:var(--shadow);
  padding:12px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cookie-title{font-weight:800}
.cookie-text{opacity:.85; flex:1 1 auto; min-width:240px}
.cookie-actions{display:flex; gap:8px}

.sound-toggle{
  background:#fff; padding:6px 10px; border-radius:999px; box-shadow: var(--shadow); font-weight:700
}

/* Mobile first */
@media (min-width: 760px){
  .sky{grid-template-rows: auto auto 520px auto auto auto}
}
:focus-visible{outline:3px solid #0ea5e9; outline-offset:3px}
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Accessibility helpers on buttons while disabled */
button[aria-pressed="true"]{filter:saturate(1.15)}