:root {
  --ivory: #f4e7cc;
  --muted: #c1b9a8;
  --orange: #fa7c19;
  --orange-light: #ff953a;
  --black: #1d1e1b;
  --line: #a69f8c;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: var(--ivory);
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; min-height: 100svh; background: #eae3d7; line-height: 1.65; }
button, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--orange-light); outline-offset: 4px; }
p, h1, h2, h3 { margin: 0; }
.page { position: relative; isolation: isolate; width: min(calc(100% - 22px), 480px); margin: 12px auto; padding: 20px 20px 15px; overflow: hidden; border: 1px solid #705037; border-radius: 20px; background: #9a5b33; box-shadow: 0 7px 17px #32201336, inset 0 0 0 2px #dd98615c; }
.wood-skin { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.wood-screw { position: absolute; top: 26px; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 36% 27%, #dddcd0, #948e7f 43%, #3d3b32 76%, #c2b6a0 82%); box-shadow: 1px 2px 3px #211307bd; }
.wood-screw::after { content: ""; position: absolute; width: 3px; height: 3px; top: 3px; left: 3px; background: #292b25; border-radius: 50%; }
.wood-screw-left { left: 15px; }
.wood-screw-right { right: 15px; }
.shop-header { display: flex; justify-content: center; margin: -6px -2px 13px; }
.brand-reference { display: block; width: min(84%, 320px); height: auto; aspect-ratio: 452 / 220; overflow: hidden; border-radius: 2px; }
.panel { position: relative; padding: 30px 19px 22px; border: 1px solid #5c5a50; border-radius: 15px; background-color: var(--black); background-image: radial-gradient(ellipse at 25% 10%, #ffffff04, #00000018 75%), repeating-linear-gradient(23deg, transparent 0 3px, #ffffff02 4px, transparent 5px); box-shadow: 0 6px 9px #24160d88, inset 0 1px 2px #ffffff1c; }
.panel-corner, .button-screw { position: absolute; width: 12px; height: 12px; border: 1px solid #676358; border-radius: 50%; background: radial-gradient(circle at 34% 29%, #eeece0 0%, #cdc9b7 24%, #848074 53%, #c5bfae 72%, #59594f 87%); box-shadow: 1px 2px 3px #000a; }
.panel-corner::after, .button-screw::after { content: ""; position: absolute; inset: 3px; background: linear-gradient(90deg, transparent 36%, #373932 37% 62%, transparent 63%), linear-gradient(transparent 36%, #373932 37% 62%, transparent 63%); transform: rotate(26deg); }
.corner-left { top: 12px; left: 12px; }
.corner-right { top: 12px; right: 12px; }
.corner-bottom-left { bottom: 12px; left: 12px; }
.corner-bottom-right { bottom: 12px; right: 12px; }
.welcome { display: flex; flex-direction: column; align-items: center; padding: 4px 0 8px; }
.title-rays { width: 84px; height: 29px; color: var(--orange); margin: 0 0 7px; }
.welcome h1 { width: 100%; text-align: center; font-size: clamp(46px, 15.8vw, 78px); font-weight: 900; line-height: 1.15; letter-spacing: -.07em; transform: rotate(-4deg); text-shadow: 2px 5px 2px #0006; outline: none; }
.welcome h1 > span { display: block; white-space: nowrap; }
.worn-ink { filter: url("./ink.svg#worn-ink"); }
.title-underline { width: 100%; height: 18px; margin: 3px 0 15px; color: var(--orange); transform: rotate(-3deg); }
.intro-copy { font-size: clamp(17px, 5vw, 23px); line-height: 1.4; letter-spacing: .1em; margin-bottom: 18px; }
.button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 14px 10px; border: 1px solid #d3bea0; border-radius: 8px; color: var(--ivory); background: transparent; font-weight: 700; font-size: 15px; line-height: 1.4; }
.button:active { background-color: #594229; }
.draw-button { position: relative; color: #151510; background: var(--orange); background-image: linear-gradient(115deg, #ffad5244, transparent 46%, #a9441617); border: 2px solid #e7ae65; border-bottom-color: #ab511e; min-height: 76px; padding: 18px 27px 18px 16px; font-size: clamp(20px, 6.2vw, 28px); font-weight: 900; letter-spacing: -.025em; box-shadow: 0 4px 1px #793818, 0 6px 8px #0009, inset 0 1px 2px #fff6; }
.draw-button:active { background-color: #ff9032; }
.button-screw { width: 10px; height: 10px; }
.button-screw::after { inset: 2px; }
.screw-tl { top: 7px; left: 7px; }
.screw-tr { top: 7px; right: 7px; }
.screw-bl { bottom: 7px; left: 7px; }
.screw-br { bottom: 7px; right: 7px; }
.arrow { position: absolute; right: 16px; font-size: 39px; font-weight: 600; line-height: 1; margin-top: -4px; }
.daily-note { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 21px; font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .04em; }
.daily-note::before, .daily-note::after { content: ""; width: 29px; height: 1px; background: var(--muted); }
.fortune-block { text-align: center; padding: 0 0 24px; }
.label { display: flex; align-items: center; justify-content: center; gap: 13px; color: var(--ivory); font-size: clamp(16px, 5vw, 20px); font-weight: 700; letter-spacing: .065em; }
.label::before, .label::after { content: ""; width: 23px; height: 3px; border-radius: 50%; background: var(--orange); }
.fortune-art { position: relative; padding: 29px 0 24px; margin: 10px -6px 0; }
.fortune-brush { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--orange); transform: rotate(-3deg); }
.fortune-name { position: relative; margin: 0; padding: 0 4px; font-size: clamp(67px, 23vw, 110px); font-weight: 900; letter-spacing: -.065em; line-height: 1.16; transform: rotate(-3deg); white-space: nowrap; outline: none; text-shadow: 1px 2px #eecab136; }
.fortune-name.is-long { font-size: clamp(54px, 18vw, 89px); }
.benefit-block { text-align: center; border-top: 1px solid var(--line); padding: 15px 0 0; }
.benefit-block > .label { margin-bottom: 8px; }
.benefit-main { color: var(--orange-light); font-size: clamp(27px, 9.5vw, 43px); font-weight: 900; letter-spacing: -.04em; line-height: 1.16; text-shadow: 2px 4px 2px #0007; white-space: nowrap; }
.benefit-main strong { font-size: clamp(68px, 24vw, 110px); font-weight: 900; letter-spacing: -.08em; font-variant-numeric: tabular-nums; margin-right: 3px; }
.benefit-main .unit { font-size: 1em; letter-spacing: -.065em; }
.benefit-main.is-stamps { white-space: normal; }
.benefit-main.is-stamps .unit { font-size: .58em; }
.benefit-main.is-none { color: var(--ivory); margin: 17px 0 20px; font-size: 32px; }
.benefit-top { margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--ivory); letter-spacing: .03em; }
.benefit-top:empty { display: none; }
.terms { margin-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.ticket-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 13px 0 11px; color: #c7beac; font-size: 10px; }
.ticket-state { border: 1px solid #7b7966; border-radius: 3px; padding: 1px 8px; color: #eee5cf; }
.ticket-state.is-used { color: #c0b8a5; }
.outline-button { border-color: #d0b58a; background: #4b36238c; font-size: clamp(11px, 3.35vw, 15px); min-height: 57px; padding: 13px 5px; box-shadow: 0 3px 5px #0005; }
.check-icon { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; color: #2c2920; background: var(--ivory); border-radius: 50%; font-size: 15px; font-weight: 900; }
.back-button { position: relative; border-color: #b3a792; min-height: 52px; font-size: 13px; margin-top: 14px; }
.back-button > span { position: absolute; left: 15px; font-size: 32px; font-weight: 500; margin-top: -4px; }
.used-note { color: var(--muted); text-align: center; font-size: 13px; padding: 12px; border: 1px solid #666255; border-radius: 5px; margin-top: 12px; }
.sample-note { font-size: 9px; margin-top: 14px; color: #d7b99e; }
.ticket-details { margin-top: 3px; font-size: 10px; color: var(--muted); }
.ticket-details > summary { width: fit-content; min-height: 44px; padding: 13px 0; cursor: pointer; }
.ticket-details p { margin-top: 8px; }
.ticket-number { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; font-size: 10px; }
.text-button { color: #e2d1b5; padding: 12px 5px; min-height: 44px; background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; font-size: 12px; }
.status:empty { display: none; }
.status { margin-top: 16px; color: var(--muted); font-size: 10px; text-align: center; }
.error { margin-top: 15px; padding: 14px; border: 1px solid #a96440; color: #ffd3b7; font-size: 12px; }
.page-footer { padding: 14px 2px 0; }
.test-notice { margin: 0 0 3px; text-align: center; font-size: 10px; font-weight: 600; color: #fff0d8; text-shadow: 0 1px 2px #322213; }
.preview-tools { font-size: 11px; color: #f5e1c4; }
.preview-tools > summary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; text-shadow: 0 1px 2px #352315; }
.preview-tools > summary::-webkit-details-marker { display: none; }
.preview-content { padding: 14px; border: 1px solid #d2b38b; border-radius: 6px; background: #251b12e8; }
.preview-content label { display: block; color: var(--ivory); font-size: 12px; margin-bottom: 8px; }
.preview-content select { width: 100%; min-height: 48px; border: 1px solid #9c896d; border-radius: 3px; background: #24231d; color: var(--ivory); padding: 12px 8px; font-size: 12px; }
.preview-content p { margin-top: 12px; line-height: 1.8; }
dialog { width: min(420px, calc(100% - 36px)); max-height: calc(100svh - 44px); overflow-y: auto; color: var(--ivory); background: var(--black); border: 1px solid #b49a76; border-radius: 12px; padding: 28px 22px 18px; box-shadow: 0 14px 60px #0009; }
dialog::backdrop { background: #080806bc; }
.dialog-accent { width: 28px; height: 3px; background: var(--orange); margin-bottom: 17px; }
dialog h2 { font-size: 22px; }
.dialog-benefit { color: var(--orange-light); font-weight: 800; font-size: 22px; margin-top: 17px; }
.dialog-copy { color: #d2cbbb; font-size: 13px; margin-top: 14px; }
.dialog-test { color: var(--muted); font-size: 11px; line-height: 1.8; margin: 14px 0 24px; }
dialog .button { background: var(--orange); color: #1d180e; border-color: #e7ae65; font-size: 14px; min-height: 58px; }
.cancel-button { display: block; margin: 13px auto 0; }
.no-js { padding: 20px; color: #38271a; text-align: center; }
@media (min-width: 720px) { .page { margin-top: 25px; padding-left: 25px; padding-right: 25px; } .panel { padding-left: 25px; padding-right: 25px; } }
@media (max-width: 350px) { .page { width: calc(100% - 16px); padding: 17px 14px 12px; border-radius: 16px; } .panel { padding-left: 16px; padding-right: 16px; } .welcome h1 { font-size: 46px; } .fortune-name.is-long { font-size: 52px; } .benefit-main { font-size: 27px; } .benefit-main strong { font-size: 73px; } .draw-button { font-size: 20px; padding-left: 12px; padding-right: 25px; } .outline-button { font-size: 10px; gap: 5px; } .intro-copy { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }