:root {
  --paper: #f6f0e6;
  --ink: #1e2c28;
  --green: #203c34;
  --coral: #d95542;
  --gold: #f0b266;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--paper); }

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

.page-shell {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  padding: max(28px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 92% 3%, rgb(240 178 102 / 20%), transparent 26%),
    linear-gradient(180deg, #f8f4ed 0%, #f3ede2 100%);
}

.app-column { position: relative; z-index: 1; width: min(100%, 520px); margin: 0 auto; }
.decor { position: absolute; border-radius: 999px; pointer-events: none; }
.decor--top { top: -80px; right: -70px; width: 250px; height: 250px; border: 1px solid rgb(217 85 66 / 13%); }
.decor--side { top: 360px; left: -120px; width: 220px; height: 220px; background: rgb(60 112 96 / 6%); }
.watermark { position: fixed; right: 14px; bottom: 12px; z-index: 0; color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: 3px; opacity: .11; pointer-events: none; user-select: none; }

.hero { padding: 12px 5px 25px; }
.hero-topline { display: flex; min-height: 27px; align-items: center; justify-content: space-between; gap: 12px; }
.kicker { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: 4px; }
.kicker span { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgb(217 85 66 / 10%); }
.hero h1 { margin: 7px 0 0; font-size: clamp(42px, 12vw, 58px); font-weight: 850; line-height: 1.05; letter-spacing: -3px; }
.subtitle { margin: 12px 0 0; color: #78817e; font-size: 14px; letter-spacing: .5px; }
.subtitle--enabled::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #4e8d75; box-shadow: 0 0 0 4px rgb(78 141 117 / 10%); }
.subtitle--unsupported { color: #9a7469; }
.motion-button, .install-button { border: 0; cursor: pointer; }
.motion-button { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 7px 11px; border-radius: 999px; background: rgb(217 85 66 / 10%); color: #aa493b; font-size: 13px; font-weight: 700; }
.motion-button span { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgb(217 85 66 / 10%); }
.install-button { padding: 7px 11px; border: 1px solid rgb(32 60 52 / 10%); border-radius: 999px; background: rgb(255 255 255 / 58%); color: #456158; font-size: 11px; font-weight: 700; box-shadow: 0 5px 14px rgb(66 51 35 / 5%); }

.control-card, .history-card { padding: 17px; border: 1px solid rgb(31 42 39 / 7%); border-radius: 18px; background: rgb(255 255 255 / 72%); box-shadow: 0 10px 30px rgb(66 51 35 / 6%); backdrop-filter: blur(12px); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.section-heading h2 { margin: 0; font-size: 14px; font-weight: 750; }
.section-heading > span { color: #9a7469; font-size: 12px; font-weight: 700; }
.segmented-control { display: flex; gap: 6px; padding: 5px; border-radius: 13px; background: #ece7de; }
.segment { flex: 1; min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: #747b78; font-size: 13px; font-weight: 700; cursor: pointer; }
.segment--active { background: white; color: #293932; box-shadow: 0 4px 12px rgb(49 59 55 / 10%); }
.segment:disabled { cursor: wait; opacity: .65; }
.segment--active:disabled { opacity: 1; }
.segment:focus-visible, .roll-button:focus-visible, .motion-button:focus-visible, .install-button:focus-visible, .clear-button:focus-visible { outline: 3px solid rgb(240 178 102 / 85%); outline-offset: 3px; }

.dice-stage { position: relative; margin-top: 14px; padding: 18px 15px 20px; overflow: hidden; border-radius: 22px; color: white; background: linear-gradient(135deg, rgb(255 255 255 / 8%), transparent 55%), var(--green); box-shadow: 0 15px 36px rgb(29 55 47 / 20%); }
.dice-stage::before { content: ""; position: absolute; right: -65px; bottom: -80px; width: 200px; height: 200px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 50%; box-shadow: 0 0 0 32px rgb(255 255 255 / 2.5%); }
.stage-topline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.stage-label { display: flex; align-items: center; gap: 8px; margin: 0; color: rgb(255 255 255 / 70%); font-size: 12px; letter-spacing: 1px; }
.stage-label span { width: 17px; height: 2px; border-radius: 2px; background: var(--gold); }
.total-chip { display: flex; align-items: baseline; gap: 7px; min-width: 68px; margin: 0; padding: 6px 11px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 999px; background: rgb(255 255 255 / 8%); }
.total-chip span { color: rgb(255 255 255 / 62%); font-size: 10px; }
.total-chip strong { color: #fff6e9; font-size: 17px; }
.dice-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(9px, 3vw, 14px); min-height: 175px; padding: 20px 0 7px; }
.die { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: min(26vw, 116px); aspect-ratio: 1; padding: clamp(14px, 4vw, 21px); border: 1px solid rgb(255 255 255 / 70%); border-radius: clamp(20px, 5vw, 27px); background: linear-gradient(145deg, #fffdf9, #eee5d7); box-shadow: inset 0 -6px 11px rgb(88 66 43 / 8%), 0 12px 19px rgb(4 22 17 / 22%); }
.dice-row--1 .die { width: min(44vw, 150px); padding: 25px; border-radius: 31px; }
.dice-row--2 .die { width: min(35vw, 134px); padding: 21px; }
.pip { align-self: center; justify-self: center; width: clamp(13px, 4vw, 19px); aspect-ratio: 1; border-radius: 50%; background: transparent; transform: scale(.2); }
.pip--visible { background: #283c35; box-shadow: inset 0 2px 3px rgb(0 0 0 / 18%); transform: scale(1); }
.pip--center.pip--visible { background: var(--coral); }
.die--rolling { animation: tumble 430ms cubic-bezier(.36,.07,.19,.97) infinite; }
@keyframes tumble { 0%,100% { transform: translate3d(0,0,0) rotate(0) scale(1); } 25% { transform: translate3d(-4px,-12px,0) rotate(-8deg) scale(.96); } 55% { transform: translate3d(6px,3px,0) rotate(10deg) scale(1.02); } 78% { transform: translate3d(-3px,-5px,0) rotate(-4deg) scale(.98); } }
.result-copy { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0; }
.result-copy strong { font-size: 34px; line-height: 1; }
.result-copy span { color: rgb(255 255 255 / 55%); font-size: 12px; }

.roll-button { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 62px; margin-top: 14px; border: 0; border-radius: 18px; background: var(--coral); color: white; font-size: 16px; font-weight: 800; letter-spacing: 1px; box-shadow: 0 11px 21px rgb(217 85 66 / 25%); cursor: pointer; transition: transform 120ms ease; }
.roll-button:active { transform: translateY(2px) scale(.995); }
.roll-button:disabled { background: #c76253; cursor: wait; }
.roll-icon { display: grid; grid-template: repeat(2, 5px) / repeat(2, 5px); gap: 5px; width: 25px; height: 25px; padding: 4px; border: 1px solid rgb(255 255 255 / 75%); border-radius: 6px; transform: rotate(8deg); }
.roll-icon i { width: 5px; height: 5px; border-radius: 50%; background: white; }
.roll-button--rolling .roll-icon { animation: spin 560ms linear infinite; }
@keyframes spin { to { transform: rotate(368deg); } }

.history-card { margin-top: 14px; }
.history-heading > div { display: flex; align-items: center; gap: 9px; }
.history-count { color: #a49b90; font-size: 11px; }
.clear-button { min-width: 48px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: #f5ece6; color: #a55f52; font-size: 12px; font-weight: 700; cursor: pointer; }
.history-list { display: flex; gap: 9px; margin: 0 -2px; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.history-item { flex: 0 0 108px; padding: 12px; border: 1px solid rgb(39 51 47 / 6%); border-radius: 13px; background: #f8f5ef; scroll-snap-align: start; }
.history-item div { display: flex; align-items: baseline; justify-content: space-between; }
.history-item strong { color: #263731; font-size: 23px; }
.history-item time { color: #a59e95; font-size: 10px; }
.history-item p { margin: 5px 0 0; overflow: hidden; color: #9a7469; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.empty-history { display: flex; align-items: center; gap: 13px; padding: 10px 3px 3px; }
.empty-die { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #ece7de; transform: rotate(-7deg); }
.empty-die i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #aaa298; }
.empty-die i:first-child { top: 10px; right: 10px; }
.empty-die i:last-child { bottom: 10px; left: 10px; }
.empty-history strong { color: #5d6763; font-size: 13px; }
.empty-history p { margin: 4px 0 0; color: #a49d94; font-size: 11px; }
.footer-note { margin: 22px 0 0; color: #a59c90; font-size: 11px; text-align: center; letter-spacing: .5px; }
.noscript-note { width: min(calc(100% - 32px), 520px); margin: 20px auto; padding: 14px 16px; border-radius: 14px; background: #fff4e8; color: #8d4d3f; font-size: 13px; text-align: center; }

@media (min-width: 680px) { .page-shell { padding-top: 42px; } .hero { padding-top: 20px; } }
@media (max-width: 360px) { .page-shell { padding-inline: 11px; } .hero h1 { font-size: 40px; } .dice-stage { padding-inline: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }