:root {
  color-scheme: light;
  --ink: #183d2d;
  --green: #23523c;
  --muted: #586757;
  --paper: #f8f5eb;
  --cream: #fff8e9;
  --tomato: #cd422d;
  --line: #a7ac95;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:20px}
body {margin:0;background:radial-gradient(ellipse at 80% 22%,#f2efdf38,transparent 52%),var(--paper)}
button,input,select {font:inherit;color:inherit}
a {color:inherit}
button,select {cursor:pointer}
:focus-visible {outline:3px solid #ae311b;outline-offset:4px}
[hidden] {display:none !important}
.wrap {width:min(1140px,calc(100% - 96px));margin-inline:auto}
.skip {position:fixed;z-index:5;top:-6rem;left:1rem;background:var(--ink);color:white;padding:.8em}
.skip:focus {top:1rem}
.site-head {border-bottom:1px solid #b6b8a8}
.head-inner {height:66px;display:flex;align-items:center;gap:48px}
.brand {display:flex;align-items:center;gap:10px;text-decoration:none;font-size:21px;font-weight:900;letter-spacing:-.045em;white-space:nowrap}
.brand-mark {width:34px;height:34px;border-radius:50%;background:var(--ink);display:grid;place-items:center;transform:rotate(-8deg)}
.brand-mark i {position:relative;width:20px;height:10px;background:var(--cream);border-radius:2px 2px 13px 13px;transform:translateY(3px)}
.brand-mark i::before,.brand-mark i::after {content:"";position:absolute;top:-5px;left:6px;width:17px;height:2px;border-radius:2px;background:#f3c359;transform:rotate(-28deg)}
.brand-mark i::after {top:-8px;left:5px;transform:rotate(-38deg)}
nav {display:flex;align-items:center;gap:30px}
nav a {text-decoration:none;font-weight:650;font-size:14px}
nav a:hover,.restaurant:hover strong,#result-link:hover {text-decoration:underline;text-underline-offset:4px}
.location {margin-left:auto;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:650;white-space:nowrap;color:#435a48}
.pin {position:relative;width:12px;height:12px;border:1.8px solid currentColor;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:inline-block}
.pin::after {content:"";position:absolute;width:3px;height:3px;background:currentColor;border-radius:50%;top:3px;left:3px}
.intro {display:flex;align-items:center;justify-content:space-between;gap:24px;padding:31px 0 25px}
h1,h2,p {margin:0}
h1 {font-size:clamp(43px,4.7vw,68px);font-weight:950;letter-spacing:-.08em;line-height:1.13}
h1 span {color:var(--tomato);display:inline-block;transform:rotate(9deg);transform-origin:30% 80%}
.intro p {font-size:14px;letter-spacing:.025em;color:var(--muted);margin:10px 0 0}
.intro-pattern {width:82px;height:21px;flex:none;background:conic-gradient(#376449 0 25%,transparent 0 50%,#376449 0 75%,transparent 0);background-size:21px 21px}
.game-layout {display:grid;grid-template-columns:minmax(0,1.27fr) minmax(345px,1fr);gap:24px;align-items:stretch}
.machine {position:relative;display:grid;place-items:center;min-width:0;border:2px solid var(--ink);border-radius:18px;background-color:#dce9d0;background-image:linear-gradient(#71946e26 1px,transparent 1px),linear-gradient(90deg,#71946e26 1px,transparent 1px);background-size:19px 19px;box-shadow:0 4px 0 var(--ink);overflow:hidden;padding:12px 16px}
.machine::after {content:"";position:absolute;inset:7px;border:1px solid #3e695585;border-radius:11px;pointer-events:none}
.wheel-frame {position:relative;z-index:1;width:min(100%,440px);aspect-ratio:1}
#wheel {display:block;width:100%;height:auto;aspect-ratio:1}
.screw {position:absolute;width:8px;height:8px;border:1px solid #476d52;border-radius:50%;background:#dbe4c8;z-index:2}
.screw::after {content:"";position:absolute;width:5px;height:1px;background:#476d52;left:.5px;top:2.5px;transform:rotate(-43deg)}
.tl,.bl {left:14px}.tr,.br {right:14px}.tl,.tr {top:14px}.bl,.br {bottom:14px}
.machine-seal {position:absolute;bottom:27px;left:26px;display:grid;place-items:center;transform:rotate(-10deg);width:32px;height:32px;border:2px solid #63846b;border-radius:4px;outline:1px solid #63846b;outline-offset:2px;font:700 23px/1 "STKaiti","KaiTi",serif;color:#63846b}
.machine-grille {position:absolute;bottom:27px;right:24px;width:33px;height:10px;background:repeating-linear-gradient(115deg,transparent 0 3px,#6a896b 3px 5px,transparent 5px 7px)}
.side {display:flex;flex-direction:column;gap:16px;min-width:0}
.controls {background:#fdfbf1;border:1.5px solid var(--ink);border-radius:13px;padding:20px 24px 16px;flex:1}
.controls-top {display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}
.controls-top h2 {font-size:23px;letter-spacing:-.05em;font-weight:850;line-height:1.2}
.trim {width:30px;height:8px;background:repeating-linear-gradient(115deg,transparent 0 3px,#79927f 3px 5px,transparent 5px 7px)}
fieldset {padding:0;margin:0;border:0;min-width:0}
legend,.type-row label {font-size:13px;color:#425846;font-weight:700}
legend {padding:0;margin:0 0 8px}
.mall-options {display:grid;grid-template-columns:.88fr 1fr 1.16fr;gap:6px}
.mall-options button {background:transparent;border:1px solid #a3ab96;border-radius:6px;min-height:35px;padding:4px 3px;font-size:13px;font-weight:650;white-space:nowrap}
.mall-options button:hover {border-color:var(--ink);background:#edf1e2}
.mall-options button[aria-pressed="true"],.mall-options button.active,.mall-options button.selected,.mall-options button.is-active {background:var(--green);border-color:var(--green);color:#fff7dd}
.type-row {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:13px 0}
#type {padding:3px 5px 3px 9px;min-width:84px;height:30px;background:var(--cream);border:1px solid #a3ab96;border-radius:5px;font-size:13px;font-weight:600}
.rules {display:grid;gap:5px;border-top:1px dashed #a7ad92;padding:10px 0 13px}
.rules p {display:grid;grid-template-columns:3.5em 1fr;align-items:baseline;font-size:12px;line-height:1.55;color:#425846}
.rules b {color:var(--ink)}
.play-row {text-align:center}
#spin {display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:47px;background:var(--tomato);border:1.5px solid var(--ink);border-radius:7px;color:#fff4d8;box-shadow:0 3px 0 var(--ink);font-size:20px;font-weight:850;line-height:1.15;transition:background .12s,transform .12s,box-shadow .12s}
#spin:not(:disabled):hover {background:#bb3726;transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
#spin:not(:disabled):active {transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
#spin:disabled {cursor:default;opacity:.73}
.spin-icon,.play-arrow {line-height:1;font-family:system-ui,sans-serif}
.spin-icon {font-size:25px}
.play-arrow {font-weight:500;font-size:17px}
#count {margin:9px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.ticket {position:relative;display:flex;align-items:stretch;min-height:122px;border:1.5px solid #887546;border-radius:8px;background:#f8eac4;box-shadow:0 2px 0 #c9bd97}
.ticket-main {flex:1;min-width:0;margin:12px 0 12px 13px;border:1px dashed #ad9866;border-right:0;border-radius:3px 0 0 3px;padding:8px 10px 9px 11px}
.ticket-head {display:flex;align-items:center;gap:7px;color:#655736;font-size:10px;line-height:1.2;letter-spacing:.06em;font-weight:700}
.ticket-head i {flex:1;height:1px;background:#bba778}
#ticket-no {font:600 10px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.04em}
#result-name {margin:9px 0 4px;font-size:clamp(20px,2.3vw,30px);letter-spacing:-.04em;line-height:1.18;font-weight:900;overflow-wrap:anywhere}
#result-meta {font-size:12px;line-height:1.65;color:#685c40;overflow-wrap:anywhere}
#result-link {display:inline-block;margin-top:5px;color:#7e311c;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:2px}
#result-details {background:transparent;border:0;margin:5px 12px 0 0;padding:3px 0;color:var(--green);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:2px}
#winner-dialog {width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:2px solid var(--ink);border-radius:16px;background:var(--cream);color:var(--ink);box-shadow:0 6px 0 var(--ink),0 20px 70px #132c2480;overscroll-behavior:contain}
#winner-dialog::backdrop {background:#102e25a6}
body:has(#winner-dialog[open]) {overflow:hidden}
.winner-paper {padding:20px 25px 25px}
.winner-top {display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px dashed #aca17e;font-size:13px;font-weight:750;letter-spacing:.05em}
#winner-no {color:#72674a;font:12px/1.3 Consolas,monospace}
#winner-close {margin-left:auto;display:grid;place-items:center;width:32px;height:32px;border:1px solid #b4b79e;border-radius:50%;background:transparent;font:22px/1 system-ui}
.winner-heading {display:flex;align-items:center;justify-content:space-between;gap:15px;margin:16px 0 12px}
.winner-heading img {width:76px;height:auto;max-height:78px;object-fit:contain;flex:none;transform:rotate(5deg)}
#winner-cuisine {font-size:13px;color:#a03f29;font-weight:750;margin-bottom:5px}
#winner-name {font-size:clamp(25px,5.5vw,34px);line-height:1.23;letter-spacing:-.04em;overflow-wrap:anywhere}
#winner-description {color:#374f40;font-size:15px;line-height:1.8}
.winner-facts {display:grid;grid-template-columns:1fr 1fr;margin:20px 0 13px;padding:14px 0;border-block:1px dashed #afa98b}
.winner-facts div+div {padding-left:20px;border-left:1px solid #d4cdb1}
.winner-facts dt {font-size:12px;color:var(--muted)}
.winner-facts dd {margin:4px 0 0;font-size:21px;font-weight:800}
.winner-location {display:flex;align-items:baseline;gap:9px;font-size:14px;line-height:1.6}
.winner-location .pin {flex:none;align-self:flex-start;margin-top:5px}
.winner-actions {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.winner-actions>* {display:grid;place-items:center;border-radius:6px;border:1px solid var(--ink);min-height:42px;text-decoration:none;font-weight:700;font-size:14px}
#winner-done {background:var(--green);color:var(--cream)}
#winner-link {background:#fffaf0}
.ticket-stub {position:relative;flex:0 0 27%;display:grid;place-items:center;margin:11px 0;border-left:1px dashed #a19065;padding:8px 12px 8px 8px}
.ticket-stub::before,.ticket-stub::after {content:"";position:absolute;left:-5px;width:8px;height:4px;background:var(--paper);border:1px solid #887546}
.ticket-stub::before {top:-12px;border-top:0;border-radius:0 0 8px 8px}
.ticket-stub::after {bottom:-12px;border-bottom:0;border-radius:8px 8px 0 0}
.ticket-stub img {display:block;width:100%;height:auto;max-width:95px;transform:rotate(6deg)}
#catalog {margin:40px 0 36px;padding-top:20px;border-top:2px solid var(--ink)}
.list-heading,.list-title {display:flex;align-items:center;gap:11px}
.list-heading {justify-content:space-between;margin-bottom:16px}
.list-title h2 {font-size:clamp(23px,2.4vw,32px);letter-spacing:-.05em;font-weight:900}
#list-count {color:var(--muted);font-size:13px;line-height:1.5}
.search-wrap {display:flex;align-items:center;gap:9px;border:1px solid #aab09a;border-radius:6px;padding:8px 11px;background:#fffaf0}
.magnify {position:relative;width:13px;height:13px;flex:none;border:1.6px solid #677764;border-radius:50%}
.magnify::after {content:"";position:absolute;left:9px;top:10px;width:6px;height:1.6px;background:#677764;transform:rotate(48deg);transform-origin:left center}
#search {width:154px;border:0;background:transparent;font-size:13px;outline:none}
.search-wrap:focus-within {outline:2px solid var(--tomato);outline-offset:2px}
#rows {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px}
.restaurant {display:flex;align-items:center;gap:13px;padding:13px 16px;border:1px solid #b1b69e;border-radius:8px;background:#fffaf0;text-decoration:none;min-width:0}
.restaurant:hover {border-color:var(--green);background:#fffdf3}
.food-mark {display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid #a7b69b;border-radius:7px;background:#e1ead6;color:#365b43;font-size:15px;font-weight:800}
.restaurant:nth-child(3n+2) .food-mark {background:#f6e0c5;color:#8d4b23;border-color:#c6a785}
.restaurant:nth-child(3n+3) .food-mark {background:#f1ddd2;color:#904432;border-color:#cbb3a5}
.r-body {display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.r-body strong {font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.r-body small {font-size:12px;color:var(--muted)}
.r-score,.r-price {font-size:13px;font-weight:750;white-space:nowrap}
.r-score {color:#964329}
.r-price {padding-left:11px;border-left:1px solid #c8ccba}
#coverage,.empty,.empty-state {font-size:13px;line-height:1.75;color:var(--muted)}
#coverage {margin:18px 0 0}
#rows>p:only-child,#rows>.empty,#rows>.empty-state {grid-column:1 / -1}
@media (min-width:1400px) {
  .intro {padding:39px 0 30px}
  .controls {padding:23px 26px 18px}
  .wheel-frame {width:min(100%,460px)}
}
@media (max-width:980px) {
  .wrap {width:calc(100% - 48px)}
  .game-layout {grid-template-columns:minmax(0,1.1fr) minmax(320px,1fr);gap:16px}
  .controls {padding:17px}
  .machine {padding:8px}
  .machine-seal {width:24px;height:24px;font-size:18px;left:19px;bottom:19px}
  .machine-grille {right:19px;bottom:19px;width:24px}
}
@media (max-width:730px) {
  .wrap {width:min(540px,calc(100% - 34px))}
  .head-inner {height:57px;gap:0;justify-content:space-between}
  .brand {font-size:17px;gap:7px}
  .brand-mark {width:29px;height:29px}
  nav {gap:14px}
  nav a {font-size:12px}
  .location {margin-left:0;font-size:11px;gap:6px}
  .intro {padding:24px 0 18px}
  h1 {font-size:44px}
  .intro p {font-size:13px;margin-top:8px}
  .intro-pattern {width:51px;height:17px;background-size:17px 17px}
  .game-layout {grid-template-columns:1fr;gap:17px}
  .machine {padding:8px 15px 10px;border-radius:13px}
  .wheel-frame {width:min(100%,340px)}
  .side {gap:13px}
  .controls {padding:18px}
  .controls-top {margin-bottom:14px}
  .controls-top h2 {font-size:21px}
  .ticket-stub {flex-basis:24%}
  .ticket {min-height:111px}
  #catalog {margin-top:29px;padding-top:17px}
  #rows {grid-template-columns:1fr}
  #search {width:103px}
  .restaurant {padding:12px}
}
@media (max-width:370px) {
  .wrap {width:calc(100% - 24px)}
  .location .pin {display:none}
  nav {gap:10px}
  .machine-seal,.machine-grille {display:none}
  .search-wrap {padding:7px}
  #search {width:76px}
  .restaurant {gap:8px}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {transition-duration:0s !important}
}