:root {
  color-scheme: dark;
  --bg: #0d0c12; --surface: #17151f; --surface-2: #211e2b; --surface-3: #2b2738;
  --text: #fbf9ff; --muted: #aaa5b7; --accent: #a778ff; --accent-2: #ff7d57;
  --success: #45d483; --danger: #ff6577; --warning: #ffcc66; --line: rgba(255,255,255,.1);
  --radius: 22px; --radius-sm: 14px; --shadow: 0 20px 50px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overflow-x: hidden; }
button,input,select,textarea { font: inherit; }
button { color: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline: 3px solid rgba(167,120,255,.5); outline-offset: 2px; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; background: white; color: black; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.ambient { position: fixed; border-radius: 50%; filter: blur(90px); opacity: .17; pointer-events: none; }
.ambient-one { width: 320px; height: 320px; background: var(--accent); top: -120px; right: -100px; }
.ambient-two { width: 300px; height: 300px; background: var(--accent-2); bottom: -150px; left: -130px; }
.app-shell { width: min(100%, 1140px); min-height: 100vh; margin: auto; position: relative; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.topbar { height: 66px; padding: max(10px,env(safe-area-inset-top)) 18px 8px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; background: rgba(13,12,18,.84); backdrop-filter: blur(18px); }
.brand { border: 0; background: none; display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; cursor: pointer; padding: 4px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(145deg,var(--accent),#7042ce); box-shadow: 0 8px 20px rgba(167,120,255,.3); }
.status-pill { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 7px; }
.status-pill span { width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 9px var(--success); }
.status-pill.offline span { background: var(--danger); box-shadow: none; }
main { padding: 18px; }
.view { animation: enter .28s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
.loading-view { min-height: 60vh; display: grid; place-content: center; text-align: center; color: var(--muted); }
.logo-pulse { width: 70px; height: 70px; margin: auto; display: grid; place-items: center; border-radius: 24px; background: var(--accent); color: white; font-size: 34px; font-weight: 900; animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { transform: scale(.92); opacity: .8; } }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .13em; font-size: 12px; font-weight: 800; }
h1 { font-size: clamp(34px,10vw,64px); line-height: .98; letter-spacing: -.045em; margin: 10px 0 14px; }
h2 { font-size: clamp(25px,7vw,38px); line-height: 1.08; letter-spacing: -.03em; margin: 4px 0 9px; }
h3 { margin: 0 0 7px; font-size: 18px; }
p { margin: 0; }
.muted { color: var(--muted); }
.hero { padding: 24px 2px 20px; }
.hero p { color: var(--muted); font-size: 17px; max-width: 540px; }
.hero-highlight { color: var(--accent-2); }
.game-grid,.card-grid { display: grid; gap: 14px; }
.game-card { position: relative; border: 1px solid var(--line); border-radius: 28px; padding: 22px; min-height: 205px; overflow: hidden; text-align: left; cursor: pointer; background: linear-gradient(145deg,var(--surface-2),var(--surface)); box-shadow: var(--shadow); }
.game-card:active,.button:active,.icon-button:active { transform: scale(.97); }
.game-card:first-child::after { content:""; position:absolute; width:180px; height:180px; border:28px dashed rgba(167,120,255,.2); border-radius:50%; right:-55px; bottom:-70px; transform:rotate(10deg); }
.game-card.slot::after { content:"777"; position:absolute; right:-8px; bottom:-35px; color:rgba(255,125,87,.1); font-size:110px; font-weight:900; letter-spacing:-18px; }
.game-icon { font-size: 35px; display: block; margin-bottom: 28px; }
.game-card p { color: var(--muted); max-width: 230px; }
.game-card strong { display: block; margin-top: 12px; color: var(--accent); }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.quick-action,.panel,.restaurant-card,.history-card { border: 1px solid var(--line); background: rgba(23,21,31,.88); border-radius: var(--radius); }
.quick-action { padding: 15px; min-height: 75px; text-align: left; cursor: pointer; }
.quick-action span { display:block; color:var(--muted); font-size:13px; margin-top:4px; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin: 12px 0 16px; }
.button { min-height: 48px; padding: 12px 18px; border: 0; border-radius: 15px; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; transition: transform .15s,opacity .15s; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.button.secondary { background: var(--surface-3); }
.button.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.button.danger { background: rgba(255,101,119,.12); color: var(--danger); }
.button.full { width: 100%; }
.button:disabled { opacity: .5; cursor: wait; }
.icon-button { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); cursor:pointer; display:grid; place-items:center; }
.panel { padding: 17px; margin: 12px 0; }
.field { display:grid; gap:7px; margin: 14px 0; }
.field label,.field-label { font-size:13px; color:var(--muted); font-weight:700; }
.field input,.field select,.field textarea,.search-input { width:100%; border:1px solid var(--line); border-radius:14px; min-height:48px; background:var(--surface-2); color:var(--text); padding:11px 13px; }
.field textarea { min-height: 88px; resize: vertical; }
.form-grid { display:grid; gap:0 14px; }
.toggle-line { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.toggle-line:last-child { border:0; }
.toggle { appearance:none; width:48px; height:28px; border-radius:20px; background:var(--surface-3); position:relative; cursor:pointer; flex:0 0 auto; }
.toggle::after { content:""; position:absolute; width:22px; height:22px; top:3px; left:3px; border-radius:50%; background:white; transition:.2s; }
.toggle:checked { background:var(--accent); }
.toggle:checked::after { transform:translateX(20px); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { position:relative; }
.chip input { position:absolute; opacity:0; pointer-events:none; }
.chip span { display:block; border:1px solid var(--line); background:var(--surface-2); padding:10px 13px; border-radius:999px; cursor:pointer; min-height:44px; }
.chip input:checked + span { color:white; background:rgba(167,120,255,.18); border-color:var(--accent); }
.chip.exclude input:checked + span { background:rgba(255,101,119,.14); border-color:var(--danger); }
.toolbar { display:grid; grid-template-columns:1fr auto; gap:8px; margin-bottom:14px; }
.filters-row { display:flex; gap:8px; overflow:auto; padding-bottom:4px; }
.restaurant-card { overflow:hidden; display:grid; grid-template-columns:92px 1fr auto; min-height:112px; margin:10px 0; }
.restaurant-image { width:100%; height:100%; min-height:112px; object-fit:cover; background:linear-gradient(145deg,#352b47,#231e2c); }
.image-placeholder { display:grid; place-items:center; font-size:31px; color:var(--muted); }
.restaurant-body { padding:14px; min-width:0; }
.restaurant-body h3 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.restaurant-meta { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.restaurant-actions { padding:10px 10px 10px 0; display:flex; flex-direction:column; gap:6px; }
.favorite.active { color:var(--warning); }
.badge { display:inline-flex; align-items:center; min-height:25px; padding:3px 8px; border-radius:999px; background:var(--surface-3); color:var(--muted); font-size:12px; }
.rating { color:var(--warning); }
.empty-state { min-height:44vh; display:grid; place-content:center; text-align:center; gap:12px; padding:30px; }
.empty-state .empty-icon { font-size:48px; }
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.68); backdrop-filter:blur(6px); display:flex; align-items:flex-end; animation:fade .2s; }
.modal { width:100%; max-height:92vh; overflow:auto; border-radius:28px 28px 0 0; background:var(--surface); border:1px solid var(--line); padding:22px 18px calc(24px + env(safe-area-inset-bottom)); animation:sheet .28s cubic-bezier(.2,.8,.2,1); }
.modal-handle { width:42px; height:5px; border-radius:4px; background:var(--surface-3); margin:-9px auto 18px; }
.modal-head { display:flex; justify-content:space-between; gap:12px; align-items:start; }
@keyframes fade { from { opacity:0; } } @keyframes sheet { from { transform:translateY(50px); opacity:0; } }
.toast { position:fixed; z-index:200; left:16px; right:16px; bottom:calc(94px + env(safe-area-inset-bottom)); max-width:470px; margin:auto; background:#f7f3ff; color:#17121f; border-radius:15px; padding:13px 16px; font-weight:700; box-shadow:var(--shadow); animation:sheet .25s; }
.toast.error { background:#ffe9ec; color:#741c2a; }
.bottom-nav { position:fixed; z-index:50; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(5,1fr); background:rgba(18,16,24,.92); border-top:1px solid var(--line); backdrop-filter:blur(20px); padding:7px 7px calc(7px + env(safe-area-inset-bottom)); }
.bottom-nav button { min-height:58px; border:0; background:none; color:var(--muted); font-size:10px; display:grid; place-content:center; gap:1px; cursor:pointer; }
.bottom-nav span { font-size:21px; line-height:1.1; }
.bottom-nav button.active { color:var(--accent); }
.steps { display:flex; gap:6px; margin:14px 0 20px; }
.steps span { height:5px; flex:1; border-radius:4px; background:var(--surface-3); }
.steps span.active { background:var(--accent); }
.wheel-wrap { position:relative; width:min(86vw,440px); aspect-ratio:1; margin:22px auto; }
.wheel { width:100%; height:100%; border-radius:50%; border:9px solid var(--surface-3); box-shadow:0 0 0 4px var(--accent),0 25px 60px #0008; transition:transform 5.8s cubic-bezier(.12,.62,.04,1); position:relative; overflow:hidden; background:conic-gradient(var(--accent),var(--accent-2),var(--warning),var(--success),var(--accent)); }
.wheel::after { content:""; position:absolute; inset:18%; border-radius:50%; background:var(--surface); border:5px solid rgba(255,255,255,.08); }
.wheel-label { position:absolute; left:50%; top:50%; width:46%; transform-origin:0 0; padding-left:24%; font-size:12px; font-weight:900; color:white; text-shadow:0 1px 4px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:1; }
.wheel-pointer { position:absolute; z-index:3; top:-12px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:17px solid transparent; border-right:17px solid transparent; border-top:35px solid white; filter:drop-shadow(0 6px 5px #0008); }
.filter-summary { display:flex; gap:6px; overflow:auto; }
.result-card { text-align:center; }
.result-card .result-image { width:100%; aspect-ratio:16/9; border-radius:20px; object-fit:cover; margin:14px 0; background:var(--surface-2); }
.result-card h2 { margin-top:12px; }
.result-actions { display:grid; gap:9px; margin-top:18px; }
.slot-board { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:24px 0; perspective:800px; }
.slot-reel { position:relative; min-height:220px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(var(--surface-3),var(--surface)); overflow:hidden; padding:10px; display:grid; align-content:center; text-align:center; cursor:pointer; transition:.22s; }
.slot-reel.spinning .slot-content { animation:reel .14s linear infinite; filter:blur(1px); }
@keyframes reel { 50% { transform:translateY(14px); opacity:.35; } }
.slot-reel.locked { border-color:var(--success); box-shadow:inset 0 0 25px rgba(69,212,131,.11); }
.slot-reel.selectable:hover,.slot-reel.selectable:focus { border-color:var(--accent); transform:translateY(-3px); }
.slot-emoji { display:block; font-size:36px; margin-bottom:9px; }
.slot-name { font-weight:900; line-height:1.05; word-break:break-word; }
.slot-category { color:var(--muted); font-size:11px; margin-top:7px; }
.lock-badge { position:absolute; right:7px; top:7px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--success); color:#072514; }
.round-copy { text-align:center; }
.finalists { display:grid; gap:11px; }
.finalist { padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--surface-2); text-align:left; cursor:pointer; }
.winner-celebration { animation:winner .6s ease; box-shadow:0 0 40px rgba(167,120,255,.35); }
@keyframes winner { 50% { transform:scale(1.04) rotate(-1deg); } }
#confetti { position:fixed; inset:0; z-index:180; pointer-events:none; width:100%; height:100%; }
.history-date { color:var(--muted); font-size:13px; margin:22px 0 8px; text-transform:capitalize; }
.history-card { padding:14px; margin:9px 0; display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; }
.history-thumb { width:52px; height:52px; object-fit:cover; border-radius:14px; background:var(--surface-2); }
.history-card time { color:var(--muted); font-size:12px; }
.schedule-row { display:grid; grid-template-columns:76px auto 1fr 1fr; align-items:center; gap:7px; padding:7px 0; }
.schedule-row input[type=time] { min-width:0; width:100%; background:var(--surface-2); color:var(--text); border:1px solid var(--line); padding:8px 5px; border-radius:9px; }
.detail-hero { height:240px; border-radius:24px; overflow:hidden; position:relative; background:var(--surface-2); }
.detail-hero img { width:100%; height:100%; object-fit:cover; }
.detail-hero::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.85)); }
.detail-title { margin-top:-62px; position:relative; z-index:1; padding:0 18px 12px; }
.offline-banner { padding:12px; background:rgba(255,101,119,.12); border:1px solid rgba(255,101,119,.28); color:#ffbdc6; border-radius:14px; margin-bottom:12px; }
@media (min-width:700px) {
  main { padding:28px 36px; }
  .game-grid { grid-template-columns:1fr 1fr; }
  .card-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .form-grid { grid-template-columns:1fr 1fr; }
  .modal-backdrop { align-items:center; justify-content:center; padding:30px; }
  .modal { max-width:680px; border-radius:28px; padding:24px; }
  .bottom-nav { left:50%; right:auto; transform:translateX(-50%); width:min(650px,calc(100% - 30px)); bottom:14px; border:1px solid var(--line); border-radius:22px; padding:7px; }
  .restaurant-card { grid-template-columns:110px 1fr auto; }
  .finalists { grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1000px) {
  .topbar { padding-inline:36px; }
  .quick-actions { grid-template-columns:repeat(4,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}