:root{
  --bg:#0f1020;
  --panel:#17182b;
  --card:#1e1f33;
  --ink:#e9ecf1;
  --muted:#aab0c0;
  --accent:#ff7a18;
  --accent-2:#7c4dff;
  --win:#33d17a;
  --lose:#ff5d5d;
  --shadow:0 6px 24px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.24);
}

*{box-sizing:border-box}
html{height:100%; min-width:560px}
body{height:100%}
body{
  margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  background: radial-gradient(1200px 1200px at 10% -10%, #22234a, var(--bg) 60%);
  color:var(--ink);
}

.app-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.1) blur(8px);
  background:linear-gradient(180deg, rgba(15,16,32,0.85), rgba(15,16,32,0.4));
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{font-size:28px}
.title h1{margin:0; font-size:18px; letter-spacing:1px}
.subtitle{margin:0; font-size:12px; color:var(--muted)}

.denoms{display:flex; gap:8px; flex-wrap:wrap}
.denom-btn{
  background:var(--card); color:var(--ink); border:1px solid rgba(255,255,255,0.08);
  padding:8px 12px; border-radius:10px; cursor:pointer; transition:.2s transform,.2s background,.2s border;
}
.denom-btn.active{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent}
.denom-btn:active{transform:scale(0.98)}

.app-main{max-width:1100px; margin:0 auto; padding:16px}

.controls{display:flex; flex-direction:column; gap:10px; margin:12px 0}
.controls .row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.controls .hint{color:var(--muted); font-size:12px}
.skin-switch{display:flex; align-items:center; gap:6px; background:var(--panel); border:1px solid rgba(255,255,255,0.08); padding:6px 10px; border-radius:12px}
.segmented{display:flex; gap:6px; background:rgba(255,255,255,0.04); padding:4px; border-radius:999px; border:1px solid rgba(255,255,255,0.08)}
.seg-btn{background:transparent; color:var(--ink); border:0; padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:700; font-size:12px; transition:.2s background,.2s color,.2s transform}
.seg-btn:hover{background:rgba(255,255,255,0.08)}
.seg-btn.active{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; box-shadow:0 6px 18px rgba(124,77,255,0.35)}
.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}
.wallet{justify-content:space-between}
.topups button{padding:8px 10px}
.redeem{gap:8px}
.input{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:10px; color:var(--ink); padding:10px 12px; outline:none; min-width:260px}
.input:focus{border-color: rgba(124,77,255,0.65); box-shadow:0 0 0 3px rgba(124,77,255,0.25)}
.muted{color:var(--muted)}

button{font-weight:600}
.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; border:0; padding:10px 16px; border-radius:12px; box-shadow:var(--shadow); cursor:pointer}
.ghost{background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,0.14); padding:10px 14px; border-radius:12px; cursor:pointer}

.stats{display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:12px; margin:12px 0}
.stat{background:var(--panel); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:12px}
.stat .label{display:block; color:var(--muted); font-size:12px; margin-bottom:6px}
.stat span:last-child{font-size:18px; font-weight:700}

.ticket{
  display:grid; gap:14px; grid-template-columns: 1fr;
}

.panel{
  position:relative; background:linear-gradient(180deg, #2a2b44, #1c1d34);
  border-radius:18px; padding:14px; border:1px solid rgba(255,255,255,0.12); box-shadow:0 12px 40px rgba(0,0,0,0.35);
  overflow:hidden; min-height:220px; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.panel.mode-arming{ box-shadow:0 14px 44px rgba(124,77,255,0.28); }
.panel.mode-scratch{
  box-shadow:0 18px 48px rgba(124,77,255,0.32);
  transform:translateY(-2px);
  transition:transform .3s ease;
}
.panel .header{display:flex; align-items:center; justify-content:space-between; gap:8px}
.badge{font-size:12px; color:white; background:linear-gradient(135deg, #f7b733, #fc4a1a); padding:4px 8px; border-radius:999px}
.panel .name{font-weight:800; letter-spacing:1px}

.stage-indicator{
  display:flex; align-items:center; gap:10px;
  background:rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.1);
  padding:10px 12px; border-radius:14px; transition:.25s border-color,.25s box-shadow;
  position:relative; z-index:2; justify-content:space-between;
}
.stage-indicator::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--muted);
  box-shadow:0 0 0 4px rgba(255,255,255,0.04);
}
.stage-indicator[data-stage="arming"]{ border-color:rgba(124,77,255,0.45); box-shadow:0 0 0 2px rgba(124,77,255,0.15); }
.stage-indicator[data-stage="arming"]::before{ background:var(--accent-2); animation:pulse 1s ease-in-out infinite; }
.stage-indicator[data-stage="scratch"]{ border-color:rgba(124,77,255,0.6); box-shadow:0 0 0 2px rgba(124,77,255,0.25); }
.stage-indicator[data-stage="scratch"]::before{ background:var(--accent); box-shadow:0 0 0 6px rgba(255,122,24,0.25); }
.stage-indicator.holding{ box-shadow:0 0 0 2px rgba(124,77,255,0.35); border-color:rgba(124,77,255,0.45); }
.stage-text{ font-size:12px; color:var(--muted); line-height:1.4; flex:1; min-width:0; }
.stage-indicator[data-stage="scratch"] .stage-text{ color:#fff; font-weight:600; }
.stage-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.stage-btn{ font-size:13px; padding:8px 14px; border-radius:999px; cursor:pointer; }
.stage-btn.primary{ padding:9px 16px; }
.plays.scroll-lock{ overflow:hidden; touch-action:none; }

@keyframes pulse{
  0%{ box-shadow:0 0 0 6px rgba(124,77,255,0.25); }
  70%{ box-shadow:0 0 0 14px rgba(124,77,255,0); }
  100%{ box-shadow:0 0 0 6px rgba(124,77,255,0); }
}

/* ticket head + progress */
.ticket-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0; font-size:12px; color:var(--muted)}
.progress{position:relative; height:8px; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; flex:1}
.progress > .bar{position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow:0 0 18px rgba(124,77,255,0.45)}

.grid{ display:none }
.cell{ display:none }
.cell.win{ }
.cell.lose{ }
.cell .small{ }
.cell.bounce{ }

@keyframes bounce{
  0%{transform:scale(1)} 35%{transform:scale(1.15)} 100%{transform:scale(1)}
}

.bounce{animation:bounce .45s ease}

.scratch{
  position:absolute; inset:0; border-radius:12px; overflow:hidden; pointer-events:auto; touch-action:none; z-index:20;
}
.scratch canvas{ display:block; width:100%; height:100%; z-index:1 }
.scratch::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, #c9ccd3, #9da3b0, #c9ccd3); box-shadow:inset 0 0 20px rgba(0,0,0,0.25); }
.scratch.ready::before{ display:none }

.panel-footer{display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px}
.pill{background:rgba(255,255,255,0.08); color:var(--ink); padding:4px 8px; border-radius:999px}

.bonus{
  display:flex; align-items:center; justify-content:center; height:88px; font-size:28px; font-weight:900;
  background: radial-gradient(180px 100px at 30% 10%, rgba(255,255,255,0.08), rgba(0,0,0,0.18));
  border-radius:12px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.08);
}
.bonus .label{position:absolute; top:6px; left:8px; font-size:12px; color:var(--muted)}
.bonus .value{z-index:1}

.app-footer{opacity:.8; text-align:center; font-size:12px; color:var(--muted); padding:24px}
.app-footer a{color:var(--ink)}

@media (max-width: 720px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .ticket{grid-template-columns:1fr}
}

@media (max-width: 420px){
  .winset{ --tile-size:56px; gap:8px; }
  .winset.count-4{ --tile-size:52px; gap:6px; }
  .winset.count-5{ --tile-size:48px; gap:5px; }
}

/* Skins */
.skin-ruifu .panel{ background:linear-gradient(135deg, #9c0b16, #4c0008); border-color:rgba(255,204,102,0.45); box-shadow:0 18px 48px rgba(156,11,22,0.32); }
.skin-ruifu .winsym,.skin-ruifu .plays{ background:rgba(156,11,22,0.22); }
.skin-longfeng .panel{ background:linear-gradient(135deg, #b03c5a, #541323); border-color:rgba(255,188,214,0.5); box-shadow:0 18px 48px rgba(176,60,90,0.32); }
.skin-longfeng .winsym,.skin-longfeng .plays{ background:rgba(176,60,90,0.18); }
.skin-xile .panel{ background:linear-gradient(135deg, #d72638, #8a0518); border-color:rgba(255,181,92,0.55); box-shadow:0 18px 48px rgba(215,38,56,0.33); }
.skin-xile .winsym,.skin-xile .plays{ background:rgba(215,38,56,0.18); }
.skin-honggao .panel{ background:linear-gradient(135deg, #7a0010, #2d0006); border-color:rgba(255,224,140,0.45); box-shadow:0 18px 48px rgba(122,0,16,0.35); }
.skin-honggao .winsym,.skin-honggao .plays{ background:rgba(122,0,16,0.22); }
.skin-jinyu .panel{ background:linear-gradient(135deg, #8b5316, #2f210a); border-color:rgba(255,215,128,0.6); box-shadow:0 18px 48px rgba(139,83,22,0.32); }
.skin-jinyu .winsym,.skin-jinyu .plays{ background:rgba(139,83,22,0.2); }

/* FX canvas */
.fx-layer{position:fixed; inset:0; pointer-events:none; z-index:100}

/* Toast */
.toast{position:fixed; left:50%; top:16px; transform:translateX(-50%); background:rgba(0,0,0,0.8); color:#fff; padding:10px 14px; border-radius:999px; z-index:101; box-shadow:var(--shadow)}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:200}
.modal-card{width:100%; max-width:380px; background:var(--panel); border:1px solid rgba(255,255,255,0.08); border-radius:14px; box-shadow:var(--shadow); padding:14px}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.modal-body{display:flex; flex-direction:column; gap:10px}

/* Winning symbol panel */
.winsym{
  display:grid; grid-template-columns: 1fr; grid-template-rows: auto auto;
  gap:8px; background:rgba(0,0,0,0.12); padding:12px; border-radius:12px; position:relative;
}
.winsym .label{ color:var(--muted); font-size:12px; }
.winsym .stage-indicator{ display:none; }
.winset{
  position:relative; display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:nowrap; min-height:var(--tile-size,64px);
  margin:0 auto; padding:4px 0;
}
.winset .win-tile{
  width:var(--tile-size,64px); height:var(--tile-size,64px); border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--tile-size,64px) * 0.55);
  background:rgba(255,255,255,0.06); border:1px dashed rgba(255,255,255,0.14);
}
.winset.count-1{ --tile-size:72px; }
.winset.count-2{ --tile-size:68px; }
.winset.count-3{ --tile-size:64px; }
.winset.count-4{ --tile-size:60px; gap:8px; }
.winset.count-5{ --tile-size:56px; gap:6px; }
.winbox-outer{ display:flex; justify-content:center; align-items:center; grid-row:2; }
.winbox{ position:relative; display:inline-block }
.winsym .winbox .scratch{ inset:0; }
/* layout variants */
.winset.layout-row,
.winset.layout-grid2,
.winset.layout-stagger,
.winset.layout-ring{ display:flex; }

/* Plays grid */
.plays{ display:grid; gap:10px; padding:10px; background:rgba(0,0,0,0.08); border-radius:12px; --card-symbol-size:72px; min-width:320px }
.plays.grid-5{ grid-template-columns: repeat(5, 1fr) }
.plays.grid-6{ grid-template-columns: repeat(3, 1fr) }
.plays.grid-8{ grid-template-columns: repeat(4, 1fr) }
.plays.grid-10{ grid-template-columns: repeat(5, 1fr) }
.plays.grid-20{ grid-template-columns: repeat(5, 1fr) }
.play-card{ position:relative; display:grid; grid-template-rows: 1fr auto; align-items:center; gap:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:10px; transition:.2s transform,.2s box-shadow; min-height:calc(var(--card-symbol-size) + 36px); }
.play-card:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,0.28)}
.play-symbol{ display:flex; align-items:center; justify-content:center; height:var(--card-symbol-size); border-radius:10px; font-size:calc(var(--card-symbol-size)*0.44); background:rgba(255,255,255,0.06) }
.play-amount{ justify-self:center; font-weight:800; font-size:calc(var(--card-symbol-size)*0.28); }
.play-card.win{ outline:2px solid var(--win); background:rgba(51,209,122,0.1) }
.play-card.lose{ opacity:0.7 }
.play-card .scratch{ inset:0 }

/* Better scrolling in plays area on mobile */
.plays{ overscroll-behavior: contain; }

/* Ticket meta and paper texture */
.ticket-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); background:rgba(0,0,0,0.12); border:1px solid rgba(255,255,255,0.08); padding:8px 10px; border-radius:10px; }
.paper-layer{ position:absolute; inset:0; pointer-events:none; opacity:0.12; mix-blend-mode:overlay; }
.paper-layer::before{ content:""; position:absolute; inset:0; background:
  repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 6px),
  radial-gradient(1200px 400px at 10% 0%, rgba(255,255,255,0.03), transparent),
  radial-gradient(1200px 400px at 90% 120%, rgba(0,0,0,0.15), transparent);
}
.guilloche{ position:absolute; inset:0; pointer-events:none; opacity:0.08; background:
  repeating-conic-gradient(from 0deg, rgba(255,255,255,0.12) 0 8deg, transparent 8deg 16deg);
  mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 70%);
}