:root {
  --paper: #f4efe4;
  --paper-deep: #e9e0d0;
  --ink: #20221f;
  --muted: #747168;
  --green: #1f5948;
  --green-dark: #143e33;
  --red: #c64a38;
  --yellow: #e3ad32;
  --line: rgba(32, 34, 31, 0.14);
  --shadow: 0 18px 50px rgba(48, 39, 25, 0.18);
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 5%, rgba(227, 173, 50, 0.16), transparent 28%),
    linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 100% 6px, auto;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }
button { color: inherit; }

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}

.hero { display: flex; align-items: center; gap: 17px; padding: 12px 2px 30px; }
.hero h1, .sheet-header h2 { margin: 2px 0 0; letter-spacing: -0.04em; line-height: 1.08; }
.hero h1 { font-size: clamp(30px, 9vw, 42px); }
.hero-copy { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.eyebrow { margin: 0; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: 0.22em; }

.brand-mark {
  position: relative; flex: 0 0 64px; width: 64px; height: 64px;
  border-radius: 18px; background: var(--green); box-shadow: 5px 5px 0 var(--yellow);
  transform: rotate(-3deg);
}
.brand-mark span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); }
.brand-mark span:nth-child(1) { top: 15px; left: 15px; }
.brand-mark span:nth-child(2) { top: 15px; right: 15px; }
.brand-mark span:nth-child(3) { bottom: 15px; left: 15px; }
.brand-mark span:nth-child(4) { bottom: 15px; right: 15px; }

.tool-grid { display: grid; gap: 15px; }
.tool-card {
  position: relative; display: grid; grid-template-columns: 82px 1fr; grid-template-rows: auto auto auto;
  min-height: 176px; width: 100%; padding: 24px; overflow: hidden; text-align: left;
  border: 1px solid var(--line); border-radius: 25px; background: rgba(255,255,255,0.48);
  box-shadow: 0 6px 0 rgba(67, 57, 39, 0.08); cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.tool-card:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(67, 57, 39, 0.08); }
.tool-card--starter { color: #fff; border: 0; background: var(--green); }
.tool-card--dice { color: #fff; border: 0; background: var(--red); }
.card-number { position: absolute; top: 19px; right: 22px; opacity: 0.55; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; }
.tool-icon { grid-row: 1 / 4; align-self: center; position: relative; width: 62px; height: 62px; }
.starter-icon i { position: absolute; display: block; width: 38px; height: 38px; border: 2px solid rgba(255,255,255,0.95); border-radius: 50%; }
.starter-icon i:nth-child(1) { top: 0; left: 12px; background: var(--yellow); border-color: var(--yellow); }
.starter-icon i:nth-child(2) { bottom: 0; left: 0; background: var(--green-dark); }
.starter-icon i:nth-child(3) { bottom: 0; right: 0; background: #f7e8c6; }
.dice-icon { border: 2px solid #fff; border-radius: 15px; transform: rotate(9deg); }
.dice-icon i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.dice-icon i:nth-child(1) { top: 12px; left: 12px; }.dice-icon i:nth-child(2) { top: 12px; right: 12px; }
.dice-icon i:nth-child(3) { top: 25px; left: 25px; }.dice-icon i:nth-child(4) { bottom: 12px; left: 12px; }
.dice-icon i:nth-child(5) { right: 12px; bottom: 12px; }
.tool-name { align-self: end; font-size: 23px; font-weight: 800; letter-spacing: -0.03em; }
.tool-description { align-self: center; margin-top: 5px; opacity: 0.74; font-size: 13px; }
.card-action { align-self: end; margin-top: 17px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.card-action b { display: inline-block; margin-left: 5px; font-size: 17px; transition: transform 160ms ease; }
.tool-card:hover .card-action b { transform: translateX(4px); }
.tool-card--coming { min-height: 132px; grid-template-columns: 64px 1fr; opacity: 0.76; cursor: default; box-shadow: none; border-style: dashed; }
.plus-icon { grid-row: 1 / 4; align-self: center; font-family: Georgia, serif; font-size: 53px; font-weight: 200; color: var(--green); }
.coming-label { margin-top: 12px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 0.18em; }

footer { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 27px 0 0; color: var(--muted); font-size: 10px; letter-spacing: 0.08em; }
footer i { width: 3px; height: 3px; border-radius: 50%; background: var(--yellow); }

.scan-card { display: none; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 10; background: rgba(24, 27, 24, 0.48); backdrop-filter: blur(3px); }
.tool-sheet {
  position: fixed; z-index: 11; bottom: 0; left: 50%; width: min(100%, 520px); max-height: 92vh;
  padding: 12px 22px max(24px, env(safe-area-inset-bottom)); overflow-y: auto;
  border-radius: 30px 30px 0 0; background: var(--paper); box-shadow: var(--shadow);
  transform: translate(-50%, 105%); visibility: hidden; transition: transform 300ms cubic-bezier(.2,.8,.2,1), visibility 300ms;
}
.tool-sheet.open { transform: translate(-50%, 0); visibility: visible; }
.sheet-handle { width: 42px; height: 5px; margin: 0 auto 19px; border-radius: 5px; background: #c9c1b3; }
.sheet-header { display: flex; justify-content: space-between; align-items: center; }
.sheet-header h2 { font-size: 30px; }
.sheet-intro { margin: 10px 0 22px; color: var(--muted); font-size: 13px; }
.close-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 27px; line-height: 1; cursor: pointer; }

.player-list { display: grid; gap: 9px; }
.player-row { display: flex; align-items: center; gap: 10px; }
.player-index { flex: 0 0 32px; color: var(--red); font-size: 11px; font-weight: 800; text-align: center; }
.player-row input { width: 100%; min-width: 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; outline: none; background: rgba(255,255,255,.55); }
.player-row input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,89,72,.1); }
.remove-player { flex: 0 0 34px; height: 34px; border: 0; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }
.secondary-button { width: 100%; margin: 11px 0 18px; padding: 12px; border: 1px dashed rgba(31,89,72,.4); border-radius: 13px; background: transparent; color: var(--green); font-weight: 700; cursor: pointer; }

.result-panel { display: grid; place-content: center; min-height: 104px; margin: 0 0 15px; border-radius: 19px; text-align: center; background: var(--paper-deep); }
.result-panel.winner { color: #fff; background: var(--green); animation: result-pop 400ms ease; }
.result-kicker { margin-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: .15em; opacity: .7; }
.result-panel strong { max-width: 300px; overflow: hidden; text-overflow: ellipsis; font-size: 25px; white-space: nowrap; }
.primary-button { width: 100%; padding: 16px; border: 0; border-radius: 15px; background: var(--green); color: #fff; font-weight: 800; letter-spacing: .04em; box-shadow: 0 5px 0 var(--green-dark); cursor: pointer; }
.primary-button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--green-dark); }
.primary-button:disabled { opacity: .65; cursor: wait; }
.primary-button--red { background: var(--red); box-shadow: 0 5px 0 #8e3124; }

.control-block { margin: 0 0 19px; }
.control-label { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; font-weight: 700; }
.control-label b { color: var(--red); }
.chip-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.chip-row button { padding: 10px 2px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.5); font-size: 12px; font-weight: 700; cursor: pointer; }
.chip-row button.active { border-color: var(--red); background: var(--red); color: #fff; }
.stepper { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; width: 160px; margin: auto; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: rgba(255,255,255,.5); text-align: center; }
.stepper button { height: 42px; border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.stepper strong { border-inline: 1px solid var(--line); line-height: 42px; }
.dice-stage { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; min-height: 125px; padding: 14px; border-radius: 20px; background: var(--paper-deep); }
.die-face { position: relative; width: 58px; height: 58px; border-radius: 14px; background: #fffdf7; box-shadow: 0 5px 0 #c8bba8; }
.die-face span, .die-face::before, .die-face::after { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); content: ""; }
.die-face[data-value="1"] span { top: 24px; left: 24px; }
.dice-number { display: grid; place-items: center; font-family: Georgia, serif; font-size: 26px; font-weight: 800; }
.dice-number span { display: none; }
.dice-stage.rolling .die-face { animation: dice-shake 480ms ease; }
.dice-total { min-height: 39px; padding: 11px; text-align: center; color: var(--muted); font-size: 13px; }
.dice-total strong { color: var(--red); font-size: 20px; }
.toast { position: fixed; z-index: 20; bottom: 24px; left: 50%; max-width: calc(100% - 40px); padding: 11px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: 180ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.sheet-open { overflow: hidden; }

body.starter-open { overflow: hidden; overscroll-behavior: none; }
body.dice-open { overflow: hidden; overscroll-behavior: none; }

.dice-flow { position:fixed; z-index:31; inset:0; display:none; overflow:hidden; color:#eee4d0; background:radial-gradient(circle at 50% -12%,#392719 0,transparent 35%),linear-gradient(180deg,#18120e,#080706 72%); }
.dice-flow.open { display:flex; flex-direction:column; animation:flow-enter 260ms ease both; }
.dice-toolbar { display:grid; grid-template-columns:45px 1fr auto; gap:13px; align-items:center; padding:max(13px,env(safe-area-inset-top)) 16px 8px; }
.dice-toolbar>button { width:42px;height:42px;border:1px solid rgba(196,154,76,.35);border-radius:50%;background:rgba(255,255,255,.06);color:#ead9b4;font-size:21px; }
.dice-toolbar h2 { margin:2px 0 0;font-size:29px;line-height:1;letter-spacing:-.04em; }.dice-feedback{justify-self:end}
.dice-toolbar .eyebrow{color:#c49a4c}.dice-flow .feedback-toggle b{color:#bbae98}.dice-flow .toggle-track{background:#443b31}
.dice-main { flex:1; min-height:0; overflow:hidden; }
.wheel-board-panel { position:relative; height:calc(100% - 76px); min-height:330px; padding:0 10px; }
.wheel-board-actions { position:absolute; z-index:7; top:8px; right:21px; display:flex; gap:7px; }
.wheel-board-actions button { height:37px;border:1px solid rgba(196,154,76,.35);border-radius:14px;background:rgba(17,13,10,.78);color:#ead9b4;font-size:10px;font-weight:800;backdrop-filter:blur(7px);box-shadow:0 4px 14px rgba(0,0,0,.3); }
.wheel-board-actions button:disabled{opacity:.38}.wheel-board-actions #reroll-all{padding:0}
.hold-clear{position:relative;width:58px;padding:0;overflow:visible}.hold-clear>span{font-size:19px}.hold-clear>b{margin-left:2px;font-size:9px}.hold-clear svg{position:absolute;inset:-4px;width:66px;height:45px;transform:rotate(-90deg);pointer-events:none}.hold-clear circle{fill:none;stroke:#f1b54b;stroke-width:3;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4}.hold-clear.holding circle{animation:clear-progress .6s linear forwards}.hold-clear.armed{background:#c9513e;transform:scale(1.05)}
.wheel-board{position:relative;width:min(100%,620px);height:100%;margin:auto;overflow:auto;border:1px solid rgba(196,154,76,.18);border-radius:27px;background:radial-gradient(circle at 50% 48%,rgba(107,52,45,.4),transparent 43%),linear-gradient(145deg,#17120f,#090807);box-shadow:inset 0 0 55px rgba(0,0,0,.62),0 8px 22px rgba(0,0,0,.26);scrollbar-width:none}.wheel-board::-webkit-scrollbar{display:none}.wheel-board-sigil{position:absolute;top:50%;left:50%;width:min(76vw,390px);height:min(76vw,390px);border:1px solid rgba(196,154,76,.14);border-radius:50%;transform:translate(-50%,-50%) rotate(12deg);pointer-events:none}.wheel-board-sigil::before,.wheel-board-sigil::after{content:"";position:absolute;inset:28px;border:1px dashed rgba(196,154,76,.18);border-radius:50%}.wheel-board-sigil::after{inset:78px;border-style:solid;clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%)}
.wheel-grid-live{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:12px;min-height:100%;padding:58px 13px 28px}.wheel-grid-live[data-count="1"]{grid-template-columns:minmax(0,280px);justify-content:center}.live-wheel{--wheel-size:min(39vw,176px);position:relative;display:grid;place-items:center;min-width:0;aspect-ratio:1;padding:7px;perspective:700px}.live-wheel-frame{position:relative;width:var(--wheel-size);height:var(--wheel-size);transform:rotateX(10deg);transform-style:preserve-3d;filter:drop-shadow(0 13px 10px rgba(0,0,0,.48))}.live-wheel-depth{position:absolute;inset:0;border:7px solid #b68a47;border-radius:50%;background:#080706;transform:translateY(8px) translateZ(-6px);box-shadow:0 0 0 3px #080706,0 0 18px rgba(198,155,80,.23)}.live-wheel svg{position:relative;z-index:2;display:block;width:100%;height:100%;overflow:visible;will-change:transform}.live-wheel .sector{stroke:#9d763d;stroke-width:1.4}.live-wheel .sector:nth-child(even){fill:#292520}.live-wheel .sector:nth-child(odd){fill:#141210}.live-wheel .number{fill:#f0ddad;font-family:Georgia,serif;font-weight:700;text-anchor:middle;dominant-baseline:middle;filter:drop-shadow(0 1px 1px #000)}.live-wheel .tick{stroke:#c49a4c;stroke-width:3}.live-wheel .outer-ring{fill:none;stroke:#c49a4c;stroke-width:8}.live-wheel .inner-ring{fill:none;stroke:#e5c477;stroke-width:2}.live-wheel-hub{position:absolute;z-index:4;top:50%;left:50%;display:grid;place-items:center;width:31%;height:31%;border:2px solid #c49a4c;border-radius:50%;background:radial-gradient(circle at 36% 28%,#dfbd72,#6b342d 43%,#0b0908 80%);box-shadow:0 4px 10px #000,0 0 15px rgba(198,155,80,.28);transform:translate(-50%,-50%) translateZ(12px)}.live-wheel-hub::before{content:"";position:absolute;inset:8px;border:1px solid #d9b66c;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:rgba(152,33,24,.34)}.live-wheel-hub strong{position:relative;color:#f1ddad;font-family:Georgia,serif;font-size:clamp(9px,3vw,15px)}.live-wheel-pointer{position:absolute;z-index:7;top:0;left:50%;width:29px;height:38px;background:linear-gradient(90deg,#5f4021,#c49a4c 46%,#f1d58c 53%,#654421);clip-path:polygon(50% 100%,4% 21%,24% 8%,50% 0,76% 8%,96% 21%);filter:drop-shadow(0 4px 3px rgba(0,0,0,.65));transform:translateX(-50%)}.live-wheel-value{position:absolute;z-index:8;right:3px;bottom:5px;display:grid;place-items:center;min-width:34px;height:30px;padding:0 7px;border:1px solid rgba(196,154,76,.45);border-radius:10px;background:rgba(8,7,6,.76);color:#f1ddad;font-family:Georgia,serif;font-size:19px;opacity:0;transform:scale(.72)}.live-wheel.settled .live-wheel-value{opacity:1;transform:scale(1);transition:.38s cubic-bezier(.2,1.4,.3,1)}.live-wheel.spinning .live-wheel-pointer{animation:pointer-tick .11s ease-in-out infinite}.live-wheel.spinning .live-wheel-value{opacity:0}.dice-empty{position:absolute;z-index:2;top:50%;left:50%;text-align:center;color:rgba(238,228,208,.78);transform:translate(-50%,-50%);transition:.2s;pointer-events:none}.dice-empty.hidden{opacity:0;transform:translate(-50%,-50%) scale(.9)}.dice-empty strong{display:block;margin-top:12px;font-size:14px}.dice-empty p{margin:4px 0 0;font-size:10px;opacity:.62}.empty-wheel{position:relative;width:60px;height:60px;margin:auto;border:4px double rgba(196,154,76,.75);border-radius:50%;box-shadow:0 0 20px rgba(196,154,76,.2)}.empty-wheel::before,.empty-wheel::after{content:"";position:absolute;inset:9px;border:1px dashed rgba(234,217,180,.55);border-radius:50%}.empty-wheel::after{inset:19px;background:#6b342d}.dice-motion{position:sticky;z-index:9;bottom:12px;left:50%;display:table;margin:-37px auto 10px;padding:7px 11px;border-radius:18px;background:rgba(8,7,6,.78);color:#ead9b4;font-size:9px;font-weight:700;opacity:0;transform:translateY(8px);transition:.18s;pointer-events:none}.dice-motion.show{opacity:1;transform:none}.dice-motion i{display:inline-block;width:5px;height:5px;margin-right:4px;border-radius:50%;background:#c49a4c;animation:motion-dot .7s ease-in-out infinite alternate}
.physical-result{max-height:0;margin:0 5%;overflow:hidden;border:1px solid rgba(196,154,76,.18);border-radius:19px;background:rgba(21,16,13,.92);opacity:0;transform:translateY(12px);transition:.38s cubic-bezier(.2,.9,.3,1)}.physical-result.show{max-height:150px;margin-top:-4px;padding:11px 15px;opacity:1;transform:none}.physical-result>div:first-child{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid rgba(196,154,76,.16)}.physical-result>div:first-child span{color:#b9a98f;font-size:8px;font-weight:800;letter-spacing:.18em}.physical-result>div:first-child strong{color:#f1ddad;font-family:Georgia,serif;font-size:28px}.physical-result-groups{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.physical-result-groups span{padding:5px 8px;border:1px solid rgba(196,154,76,.18);border-radius:9px;background:#2b231c;color:#e9d6ad;font-size:9px;font-weight:700}
.physical-dock{position:relative;z-index:8;margin:0 10px max(8px,env(safe-area-inset-bottom));padding:10px 11px 11px;border:1px solid rgba(196,154,76,.23);border-radius:21px;background:rgba(20,15,12,.95);box-shadow:0 9px 30px rgba(0,0,0,.38);backdrop-filter:blur(12px)}.physical-dock>div:first-child{display:flex;justify-content:space-between;margin:0 3px 7px;color:#aa9c87;font-size:9px}.physical-dock>div:first-child strong{color:#ead9b4}.physical-options{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.physical-options button{position:relative;display:grid;justify-items:center;gap:3px;min-width:0;padding:7px 1px 5px;border:0;border-radius:13px;background:transparent;color:#e9d8b7;cursor:pointer}.physical-options button:active{background:#33271d;transform:translateY(1px)}.physical-options button:disabled{opacity:.35}.physical-options b{font-size:9px}.physical-options small{position:absolute;top:3px;right:3px;display:none;min-width:17px;padding:2px 4px;border-radius:9px;background:#8f3028;color:#fff;font-size:7px;font-weight:800}.physical-options small.show{display:block}.poly{display:grid;place-items:center;width:34px;height:34px;border:1px solid #b88d4c;color:#f0ddad;font-family:Georgia,serif;font-size:9px;font-style:normal;font-weight:800;background:linear-gradient(145deg,#39322b,#161310);box-shadow:inset -4px -5px 7px rgba(0,0,0,.28),inset 3px 3px 5px rgba(255,255,255,.08),0 3px 6px rgba(0,0,0,.34)}.poly--4{clip-path:polygon(50% 0,100% 92%,0 92%)}.poly--6{border-radius:7px}.poly--8{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.poly--10{clip-path:polygon(50% 0,94% 30%,82% 82%,50% 100%,18% 82%,6% 30%)}.poly--12{clip-path:polygon(50% 0,91% 20%,100% 64%,70% 100%,30% 100%,0 64%,9% 20%)}.poly--20{clip-path:polygon(50% 0,93% 24%,100% 68%,70% 100%,30% 100%,0 68%,7% 24%)}
@keyframes clear-progress{to{stroke-dashoffset:0}}@keyframes motion-dot{to{transform:scale(1.8);opacity:.45}}
@keyframes pointer-tick{50%{transform:translateX(-50%) rotate(4deg);transform-origin:50% 10%}}

/* Quantity-aware wheel layout: keep all ten wheels within one mobile viewport. */
.wheel-board{overflow:hidden}
.wheel-board-actions .hold-clear{width:44px;height:44px;padding:0;border-radius:50%}
.wheel-board-actions .round-action{display:grid;place-content:center;width:44px;height:44px;padding:0;border-radius:50%;line-height:1}
.round-action>span{display:block;font-size:19px;line-height:14px}
.round-action>b{display:block;margin-top:2px;font-size:7px;line-height:8px}
.hold-clear>span{display:block;font-size:19px;line-height:14px}
.hold-clear>b{display:block;margin:2px 0 0;font-size:7px;line-height:8px}
.hold-clear svg{inset:-4px;width:52px;height:52px}
.wheel-grid-live{align-content:center;justify-content:center;gap:8px;padding:56px 10px 23px}
.wheel-grid-live[data-count="1"]{grid-template-columns:minmax(0,230px)}
.wheel-grid-live[data-count="5"],.wheel-grid-live[data-count="6"],.wheel-grid-live[data-count="7"],.wheel-grid-live[data-count="8"],.wheel-grid-live[data-count="9"],.wheel-grid-live[data-count="10"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:53px 6px 20px}
.live-wheel{padding:5px}
.wheel-grid-live[data-count="1"] .live-wheel{--wheel-size:min(58vw,230px)}
.wheel-grid-live[data-count="2"] .live-wheel,.wheel-grid-live[data-count="3"] .live-wheel,.wheel-grid-live[data-count="4"] .live-wheel{--wheel-size:min(34vw,154px)}
.wheel-grid-live[data-count="5"] .live-wheel,.wheel-grid-live[data-count="6"] .live-wheel{--wheel-size:min(27vw,128px)}
.wheel-grid-live[data-count="7"] .live-wheel,.wheel-grid-live[data-count="8"] .live-wheel,.wheel-grid-live[data-count="9"] .live-wheel{--wheel-size:min(24vw,112px)}
.wheel-grid-live[data-count="10"] .live-wheel{--wheel-size:min(21vw,82px)}
.wheel-grid-live[data-count="5"] .live-wheel,.wheel-grid-live[data-count="6"] .live-wheel{height:min(27vw,128px);aspect-ratio:auto}
.wheel-grid-live[data-count="7"] .live-wheel,.wheel-grid-live[data-count="8"] .live-wheel,.wheel-grid-live[data-count="9"] .live-wheel{height:min(24vw,112px);aspect-ratio:auto}
.wheel-grid-live[data-count="10"] .live-wheel{height:min(21vw,82px);aspect-ratio:auto}
.live-wheel .number{fill:#fff0c2;font-weight:800;filter:drop-shadow(0 2px 1px #000)}
.live-wheel-depth{border-width:clamp(4px,1.4vw,7px);transform:translateY(6px) translateZ(-6px)}
.live-wheel-pointer{width:clamp(18px,6vw,29px);height:clamp(25px,8vw,38px)}
.live-wheel-value{right:1px;bottom:2px;min-width:30px;height:27px;padding:0 6px;font-size:17px}
.dice-motion{position:absolute;bottom:10px;left:50%;margin:0;transform:translate(-50%,8px)}
.dice-motion.show{transform:translate(-50%,0)}

@media(orientation:landscape) and (max-height:600px){.dice-toolbar{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:4px}.dice-toolbar h2{font-size:22px}.wheel-board-panel{height:calc(100svh - 125px);min-height:240px}.wheel-board{width:min(76vw,720px)}.wheel-grid-live{grid-template-columns:repeat(5,minmax(0,1fr));padding-top:48px}.live-wheel{--wheel-size:min(14vw,142px)}.physical-result.show{position:absolute;z-index:9;left:10px;bottom:86px;width:230px;margin:0}.physical-dock{position:absolute;right:8px;bottom:6px;left:8px}.wheel-board-actions{right:18px}}
@media(max-width:380px){.dice-toolbar{padding-inline:10px}.wheel-board-panel{padding-inline:0}.wheel-board{border-radius:0}.physical-options{gap:2px}.poly{width:30px;height:30px}.wheel-board-actions{right:14px}.live-wheel{--wheel-size:min(40vw,158px)}}

@media(orientation:landscape) and (max-height:600px){.wheel-grid-live,.wheel-grid-live[data-count]{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:45px 6px 15px}.live-wheel,.wheel-grid-live[data-count] .live-wheel{--wheel-size:min(13vw,112px)}}
@media(max-width:380px){.wheel-board-actions{right:10px}.wheel-grid-live[data-count="10"] .live-wheel{--wheel-size:min(20vw,82px)}}

.starter-flow {
  position: fixed; z-index: 30; inset: 0; display: none; overflow: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(242,183,47,.12), transparent 28%),
    radial-gradient(circle at 85% 90%, rgba(48,164,108,.09), transparent 30%),
    #f7f1e7;
  color: var(--ink);
}
.starter-flow.open { display: block; animation: flow-enter 260ms ease both; }
.starter-screen { position: absolute; inset: 0; display: none; }
.starter-screen.active { display: flex; flex-direction: column; }
.starter-screen--menu { width: min(100%, 560px); margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.flow-header { display: flex; align-items: center; gap: 15px; min-height: 58px; }
.flow-header h2 { margin: 3px 0 0; font-size: clamp(27px, 7vw, 36px); line-height: 1; letter-spacing: -.045em; }
.flow-back, .touch-back {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.55);
  font-size: 21px; cursor: pointer;
}
.flow-content { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 18px 0 60px; }
.flow-step { margin: 0 0 15px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.mode-options { display: grid; gap: 14px; }
.mode-option {
  position: relative; display: grid; grid-template-columns: 74px 1fr 24px; grid-template-rows: 1fr 1fr;
  align-items: center; min-height: 142px; padding: 21px; border: 1px solid rgba(32,34,31,.1);
  border-radius: 25px; background: rgba(255,255,255,.58); box-shadow: 0 8px 0 rgba(64,50,31,.07);
  text-align: left; cursor: pointer; transition: 160ms ease;
}
.mode-option:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(64,50,31,.07); }
.mode-option strong { align-self: end; font-size: 20px; letter-spacing: -.025em; }
.mode-option small { align-self: start; margin-top: 5px; color: var(--muted); font-size: 12px; }
.mode-option > b { grid-column: 3; grid-row: 1 / 3; font-size: 22px; }
.mode-orb {
  grid-row: 1 / 3; display: grid; place-items: center; width: 58px; height: 58px;
  border-radius: 46% 54% 57% 43% / 45% 42% 58% 55%; color: #fff; font-size: 27px; font-weight: 800;
  animation: liquid-morph 5s ease-in-out infinite alternate;
}
.mode-orb--first { background: linear-gradient(145deg, #f06b59, #d93b32); box-shadow: 0 9px 20px rgba(232,75,60,.24); }
.mode-orb--order { position: relative; display: block; background: #3978e6; }
.mode-orb--order i { position: absolute; left: 14px; width: 30px; height: 7px; border-radius: 8px; background: rgba(255,255,255,.9); }
.mode-orb--order i:nth-child(1) { top: 14px; }.mode-orb--order i:nth-child(2) { top: 25px; width: 23px; }.mode-orb--order i:nth-child(3) { top: 36px; width: 16px; }

.count-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.count-grid button {
  aspect-ratio: 1; min-height: 92px; border: 1px solid rgba(32,34,31,.1); border-radius: 23px;
  background: rgba(255,255,255,.58); box-shadow: 0 6px 0 rgba(64,50,31,.07);
  font-family: Georgia, serif; font-size: clamp(35px, 11vw, 54px); font-weight: 700; cursor: pointer;
}
.count-grid button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(64,50,31,.07); }
.count-grid small { margin-left: 3px; color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 700; }
.count-grid button:last-child { grid-column: 2; }

.starter-screen--play { background: #f7f1e7; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.touch-toolbar {
  position: relative; z-index: 8; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: calc(60px + env(safe-area-inset-top)); padding: max(9px, env(safe-area-inset-top)) 14px 9px;
  border-bottom: 1px solid rgba(32,34,31,.09); background: rgba(247,241,231,.88); backdrop-filter: blur(12px);
}
.touch-back { justify-self: start; width: 40px; height: 40px; background: transparent; }
.touch-back:disabled { opacity: .25; cursor: not-allowed; }
.touch-target { display: flex; align-items: baseline; gap: 4px; }
.touch-target strong { font-family: Georgia, serif; font-size: 24px; }
.touch-target > span { font-family: Georgia, serif; font-size: 19px; font-weight: 800; }
.touch-target > i { color: var(--muted); font-size: 12px; font-style: normal; }
.touch-target small { margin-left: 3px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.feedback-toggle { display: flex; justify-self: end; align-items: center; gap: 7px; cursor: pointer; }
.feedback-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.feedback-toggle b { font-size: 11px; }
.toggle-track { position: relative; width: 35px; height: 21px; border-radius: 20px; background: #cfc6b8; transition: 180ms ease; }
.toggle-track i { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: 180ms ease; }
.feedback-toggle input:checked + .toggle-track { background: var(--green); }
.feedback-toggle input:checked + .toggle-track i { transform: translateX(14px); }

.touch-area {
  position: relative; flex: 1; min-height: 0; overflow: hidden; isolation: isolate;
  touch-action: none; overscroll-behavior: none; cursor: crosshair;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.68), transparent 36%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 50px, rgba(32,34,31,.022) 51px 52px),
    #f7f1e7;
}
.touch-area::after { content: ""; position: absolute; z-index: 0; inset: 14px; border: 1px dashed rgba(32,34,31,.09); border-radius: 26px; pointer-events: none; }
.touch-blob-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
.touch-blob-layer.order-hidden { display: none; mix-blend-mode: normal; }
.touch-guide { position: absolute; z-index: 1; top: 50%; left: 50%; text-align: center; transform: translate(-50%,-50%); transition: 200ms ease; pointer-events: none; }
.touch-guide.hidden { opacity: 0; transform: translate(-50%,-50%) scale(.94); }
.touch-guide strong { display: block; margin-top: 18px; font-family: Georgia, serif; font-size: clamp(38px, 12vw, 58px); letter-spacing: -.05em; }
.touch-guide p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.tabletop-mark { position: relative; width: 88px; height: 88px; margin: auto; border: 4px solid var(--green); border-radius: 50%; animation: tabletop-mark-float 3.6s ease-in-out infinite; }
.tabletop-mark::after { content: ""; position: absolute; inset: 13px; border: 2px dashed rgba(31,89,72,.3); border-radius: 50%; }
.tabletop-mark i { position: absolute; z-index: 2; display: block; }
.tabletop-mark i:nth-child(1) { top: 17px; left: 13px; width: 23px; height: 31px; border: 3px solid var(--red); border-radius: 5px; background: #f7f1e7; transform: rotate(-15deg); }
.tabletop-mark i:nth-child(1)::after { content: ""; position: absolute; top: 6px; left: 50%; width: 7px; height: 7px; border: 2px solid var(--red); border-radius: 50%; transform: translateX(-50%); }
.tabletop-mark i:nth-child(2) { top: 24px; right: 12px; width: 28px; height: 28px; border: 3px solid var(--blue); border-radius: 7px; background: #f7f1e7; transform: rotate(12deg); }
.tabletop-mark i:nth-child(2)::before,.tabletop-mark i:nth-child(2)::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.tabletop-mark i:nth-child(2)::before { top: 5px; left: 5px; box-shadow: 10px 10px 0 var(--blue); }
.tabletop-mark i:nth-child(2)::after { top: 5px; right: 5px; box-shadow: -10px 10px 0 var(--blue); }
.tabletop-mark i:nth-child(3) { left: 31px; bottom: 11px; width: 24px; height: 24px; border: 3px solid var(--yellow); border-radius: 50%; background: rgba(226,173,56,.1); box-shadow: inset 0 -4px 0 rgba(226,173,56,.2); }

.touch-blob {
  --blob-size: clamp(128px, 36vmin, 192px);
  position: absolute; left: 0; top: 0; width: var(--blob-size); height: var(--blob-size);
  opacity: 0; transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0) scale(.45);
  transition: opacity 150ms ease; will-change: transform; contain: layout style;
}
.touch-blob.visible { opacity: .94; transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0) scale(1); }
.touch-blob::before, .touch-blob::after {
  content: ""; position: absolute; inset: 8%; border: 3px solid var(--blob-color); border-radius: 50%;
  opacity: 0; animation: touch-ripple 2.6s ease-out infinite; pointer-events: none;
}
.touch-blob::after { animation-delay: .86s; }
.touch-blob > i {
  position: absolute; z-index: 2; top: 50%; left: 50%; width: clamp(104px, 27vmin, 132px); height: clamp(104px, 27vmin, 132px);
  border: 3px solid rgba(255,255,255,.82); border-radius: 50%;
  background: radial-gradient(circle at 34% 27%, rgba(255,255,255,.6), transparent 20%), var(--blob-color);
  box-shadow: inset -8px -10px 16px rgba(43,18,10,.12), 0 9px 22px color-mix(in srgb, var(--blob-color) 30%, transparent);
  transform: translate(-50%,-50%); animation: touch-core-breathe 2.6s ease-in-out infinite;
}
.touch-blob > span {
  position: absolute; z-index: 1; inset: 8%; border: 3px solid var(--blob-color); border-radius: 50%;
  opacity: 0; animation: touch-ripple 2.6s ease-out 1.72s infinite;
}
.touch-blob.interacting::before, .touch-blob.interacting::after, .touch-blob.interacting > span { animation-duration: 1.45s; }
.touch-blob.interacting > i { animation-duration: 1.45s; filter: saturate(1.12); }
.touch-blob.interacting { z-index: 3; }
.touch-blob.released { opacity: 0; transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0) scale(.2); transition: opacity 220ms ease, transform 220ms ease; }
.touch-blob.evade { opacity: 0; transform: translate3d(calc(var(--x) - 50% + var(--evade-x)), calc(var(--y) - 50% + var(--evade-y)), 0) scale(.05); transition: opacity 900ms ease, transform 900ms cubic-bezier(.22,.8,.28,1); }
.touch-blob.winner-source { opacity: 0; transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0) scale(1.18); transition: opacity 950ms ease 380ms, transform 950ms ease 380ms; }
.touch-blob.liquid-exit { opacity: 0; transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0) scale(0); transition: opacity 500ms ease, transform 500ms cubic-bezier(.34,1.5,.64,1); }
.touch-blob.order-selected { opacity: 0; visibility: hidden; transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0) scale(.15); transition: opacity 360ms ease, transform 520ms cubic-bezier(.2,.9,.3,1), visibility 0s linear 520ms; }
.touch-blob.order-selected::before,.touch-blob.order-selected::after,.touch-blob.order-selected > span,.touch-blob.order-selected > i { animation-play-state: paused; }

.random-spotlight {
  --spot-size: clamp(112px, 29vmin, 142px); position: absolute; z-index: 5; left: 0; top: 0;
  width: var(--spot-size); height: var(--spot-size); border: 4px solid rgba(255,255,255,.96); border-radius: 50%; opacity: 0; pointer-events: none;
  background: transparent; box-shadow: 0 0 0 5px var(--spot-color, rgba(255,255,255,.8)), 0 0 28px rgba(255,255,255,.88);
  transform: translate3d(calc(var(--spot-x) - 50%),calc(var(--spot-y) - 50%),0) scale(.9);
  transition: opacity 60ms ease;
}
.random-spotlight::before,.random-spotlight::after { content:""; position:absolute; inset:-12px; border:3px solid rgba(255,255,255,.82); border-radius:50%; opacity:.52; }
.random-spotlight::after { inset:-24px; border-color:var(--spot-color); opacity:.28; }
.random-spotlight.show { opacity:.92; animation:selector-color-pulse .34s ease both; }
.random-spotlight.locked { opacity:.9; animation:selector-winner-pulse .85s ease-in-out infinite; }

.countdown-display {
  position: absolute; z-index: 6; top: 50%; left: 50%; opacity: 0; pointer-events: none;
  color: var(--ink); font-family: Georgia, serif; font-size: clamp(78px, 28vmin, 160px); font-weight: 800;
  text-shadow: 0 5px 0 rgba(255,255,255,.7); transform: translate(-50%,-50%) scale(.75);
}
.countdown-display.show { opacity: 1; }
.countdown-display.ready { color: var(--muted); font-family: inherit; font-size: clamp(20px, 6vmin, 34px); letter-spacing: .25em; }
.countdown-display.pulse { animation: countdown-pop 800ms cubic-bezier(.2,.9,.3,1) both; }
.touch-message {
  position: absolute; z-index: 7; left: 50%; bottom: max(28px, env(safe-area-inset-bottom));
  max-width: calc(100% - 40px); padding: 11px 17px; border-radius: 20px; background: rgba(32,34,31,.88);
  color: #fff; font-size: 12px; opacity: 0; transform: translate(-50%,12px); transition: 180ms ease; pointer-events: none;
}
.touch-message.show { opacity: 1; transform: translate(-50%,0); }

.decision-result { position: absolute; z-index: 20; inset: 0; display: none; overflow: hidden; pointer-events: none; }
.decision-result.active { display: block; pointer-events: auto; }
.winner-liquid {
  position: absolute; left: var(--origin-x); top: var(--origin-y); width: var(--winner-start-size, 160px); height: var(--winner-start-size, 160px);
  border: 2px solid rgba(255,255,255,.68); border-radius: 48% 52% 44% 56% / 56% 45% 55% 44%; background: var(--winner-color);
  box-shadow: inset -18px -22px 34px rgba(50,20,10,.13), inset 12px 13px 24px rgba(255,255,255,.22);
  transform: translate(-50%,-50%) scale(.92); transition: transform 1300ms cubic-bezier(.48,.02,.16,1) 400ms, border-radius 1300ms ease 400ms;
  animation: winner-liquid-wobble 1.4s ease-in-out infinite alternate;
}
.winner-liquid::before, .winner-liquid::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; }
.winner-liquid::before { inset: 8%; border: 2px solid rgba(255,255,255,.22); opacity: .7; }
.winner-liquid::after { inset: 0; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.3), transparent 24%); }
.winner-liquid.expand { border-radius: 50%; transform: translate(-50%,-50%) scale(var(--winner-scale, 20)); }
.winner-number { position: absolute; z-index: 2; top: 49%; left: 50%; color: #fff; font-family: Georgia, serif; font-size: clamp(150px, 46vmin, 260px); font-weight: 800; opacity: 0; text-shadow: 0 7px 0 rgba(32,34,31,.13); transform: translate(-50%,-50%) scale(.6); }
.winner-number.show { animation: winner-number-in 620ms cubic-bezier(.2,1.15,.3,1) both; }
.fireworks { position: absolute; z-index: 3; top: 48%; left: 50%; width: 1px; height: 1px; }
.fireworks i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--particle-color); opacity: 0; }
.fireworks.burst i { animation: particle-burst 780ms ease-out var(--particle-delay) both; }
.result-actions {
  position: absolute; z-index: 5; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; gap: 9px;
  opacity: 0; transform: translate(-50%,18px); transition: 260ms ease; pointer-events: none;
}
.result-actions.show { opacity: 1; transform: translate(-50%,0); pointer-events: auto; }
.result-actions button { min-width: 128px; padding: 13px 17px; border: 1px solid rgba(255,255,255,.45); border-radius: 16px; background: rgba(255,255,255,.87); color: var(--ink); font-weight: 800; box-shadow: 0 5px 18px rgba(32,34,31,.14); cursor: pointer; }

.decision-result.order-mode { background: #f7f1e7; backdrop-filter: none; animation: order-backdrop-in 280ms ease both; }
.order-result { position: absolute; inset: max(72px, env(safe-area-inset-top)) 20px max(88px, env(safe-area-inset-bottom)); display: grid; place-items: center; }
.ranking-list { --row-gap: clamp(6px, 1.6vh, 12px); display: grid; gap: var(--row-gap); width: min(100%, 520px); margin: 0; padding: 0; list-style: none; }
.ranking-list li {
  display: grid; grid-template-columns: clamp(38px, 11vw, 58px) 1fr; align-items: center; gap: 10px;
  height: min(68px, calc((100vh - 190px - (var(--ranking-count) - 1) * var(--row-gap)) / var(--ranking-count)));
  min-height: 38px; opacity: 0; transform: translateY(22px) scale(.94);
  transition: 420ms cubic-bezier(.2,1,.3,1);
}
.ranking-list li.revealed { opacity: 1; transform: translateY(0) scale(1); }
.ranking-list li > strong { color: var(--ink); font-family: Georgia, serif; font-size: clamp(25px, 7vmin, 43px); text-align: right; }
.ranking-list li > span { position:relative; height:100%; min-height:38px; }
.ranking-list li > span::before,.ranking-list li > span::after { content:""; position:absolute; top:50%; left:26px; width:42px; height:42px; border:2px solid var(--rank-color); border-radius:50%; opacity:0; transform:translate(-50%,-50%); animation:rank-ripple 2.4s ease-out infinite; }
.ranking-list li > span::after { animation-delay:1.2s; }
.ranking-list li i { position:absolute; z-index:2; top:50%; left:26px; width:34px; height:34px; border:2px solid rgba(255,255,255,.82); border-radius:50%; background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.58),transparent 22%),var(--rank-color); box-shadow:0 5px 13px color-mix(in srgb,var(--rank-color) 25%,transparent); transform:translate(-50%,-50%); }
.ranking-list li em { position:absolute; top:50%; right:4px; left:62px; height:2px; border-radius:4px; background:linear-gradient(90deg,color-mix(in srgb,var(--rank-color) 55%,transparent),color-mix(in srgb,var(--rank-color) 5%,transparent)); }
.order-transfer { position:absolute; z-index:8; left:0; top:0; width:104px; height:104px; border:3px solid rgba(255,255,255,.85); border-radius:50%; background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.58),transparent 20%),var(--transfer-color); box-shadow:0 0 24px color-mix(in srgb,var(--transfer-color) 35%,transparent); opacity:0; transform:translate(calc(var(--from-x) - 50%),calc(var(--from-y) - 50%)) scale(.85); pointer-events:none; }
.order-transfer::before,.order-transfer::after { content:""; position:absolute; inset:-14px; border:3px solid var(--transfer-color); border-radius:50%; opacity:.55; }
.order-transfer::after { inset:-28px; opacity:.24; }
.order-transfer.fly { animation:order-transfer-fly 720ms cubic-bezier(.42,0,.18,1) both; }

@keyframes flow-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes liquid-morph { 0% { border-radius: 44% 56% 61% 39% / 48% 42% 58% 52%; } 50% { border-radius: 57% 43% 46% 54% / 40% 61% 39% 60%; } 100% { border-radius: 48% 52% 38% 62% / 59% 43% 57% 41%; } }
@keyframes countdown-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.55); } 18% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } 80% { opacity: 1; transform: translate(-50%,-50%) scale(.96); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.18); } }
@keyframes winner-number-in { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.55) rotate(-5deg); } 65% { opacity: 1; transform: translate(-50%,-50%) scale(1.08) rotate(2deg); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } }
@keyframes particle-burst { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--particle-x),var(--particle-y)) scale(1.2); } }
@keyframes rank-liquid { from { border-radius: 48% 52% 52% 48% / 24% 31% 69% 76%; } to { border-radius: 52% 48% 47% 53% / 67% 72% 28% 33%; } }
@keyframes liquid-shine { from { transform: translateX(-3%); } to { transform: translateX(5%); } }
@keyframes winner-liquid-wobble { from { border-radius: 48% 52% 44% 56% / 56% 45% 55% 44%; } to { border-radius: 55% 45% 52% 48% / 43% 58% 42% 57%; } }
@keyframes touch-ripple { 0% { opacity: .68; transform: scale(.8); } 78% { opacity: .12; } 100% { opacity: 0; transform: scale(1.42); } }
@keyframes touch-core-breathe { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.08); } }
@keyframes tabletop-mark-float { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-4px) rotate(1deg)} }
@keyframes selector-color-pulse { 0%{transform:translate3d(calc(var(--spot-x) - 50%),calc(var(--spot-y) - 50%),0) scale(.86)} 55%{transform:translate3d(calc(var(--spot-x) - 50%),calc(var(--spot-y) - 50%),0) scale(1.16)} 100%{transform:translate3d(calc(var(--spot-x) - 50%),calc(var(--spot-y) - 50%),0) scale(1)} }
@keyframes selector-winner-pulse { 50%{transform:translate3d(calc(var(--spot-x) - 50%),calc(var(--spot-y) - 50%),0) scale(1.18);filter:brightness(1.18)} }
@keyframes rank-ripple { 0%{opacity:.52;transform:translate(-50%,-50%) scale(.55)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)} }
@keyframes order-transfer-fly { 0%{opacity:.92;transform:translate(calc(var(--from-x) - 50%),calc(var(--from-y) - 50%)) scale(.9)} 32%{opacity:1;transform:translate(calc(var(--from-x) - 50%),calc(var(--from-y) - 50%)) scale(1.22)} 100%{opacity:0;transform:translate(calc(var(--to-x) - 50%),calc(var(--to-y) - 50%)) scale(.34)} }
@keyframes order-backdrop-in { from{opacity:.75} to{opacity:1} }

@keyframes result-pop { 0% { transform: scale(.95); } 65% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes dice-shake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-12deg) translateY(-5px); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-5deg) translateY(-2px); } }

@media (min-width: 700px) {
  .app-shell { padding-top: 52px; }
  .tool-card { min-height: 186px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .touch-toolbar { min-height: calc(48px + env(safe-area-inset-top)); padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: 5px; }
  .touch-back { width: 34px; height: 34px; }
  .order-result { top: 56px; }
  .ranking-list { --row-gap: 4px; width: min(72%, 650px); }
  .ranking-list li { height: min(48px, calc((100vh - 122px - (var(--ranking-count) - 1) * var(--row-gap)) / var(--ranking-count))); }
  .result-actions { right: max(18px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); left: auto; flex-direction: column; transform: translateY(18px); }
  .result-actions.show { transform: translateY(0); }
  .result-actions button { min-width: 118px; padding: 10px 13px; }
}

@media (min-width: 1080px) {
  .scan-card {
    position: fixed; top: 50%; left: calc(50% + 320px); display: block; width: 270px;
    padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.6);
    box-shadow: 0 10px 35px rgba(48,39,25,.12); text-align: center; transform: translateY(-50%);
  }
  .scan-card h2 { margin: 5px 0 16px; font-size: 20px; }
  .scan-card img { display: block; width: 220px; height: 220px; padding: 10px; border-radius: 15px; background: #fff; }
  .scan-card a { display: block; margin-top: 13px; color: var(--green); font-size: 13px; font-weight: 800; text-decoration: none; }
  .scan-card > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}