@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
:root{--paper:#f7f2e8;--porcelain:#fbfaf6;--wine:#641322;--ink:#181614;--gold:#b8965a;--stone:#d8d1c5;--muted:#786f66;font-family:Manrope,'Noto Sans TC',sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,.control-ring:focus-visible{outline:2px solid var(--wine);outline-offset:4px}[hidden]{display:none!important}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:20;background:var(--porcelain);padding:.7rem}.site-header{height:74px;border-bottom:1px solid var(--stone);display:flex;align-items:center;gap:2rem;padding:0 max(4vw,25px);background:var(--porcelain)}.brand{text-decoration:none;color:var(--wine);font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:600;line-height:.8;letter-spacing:-1px;white-space:nowrap}.brand span{font-weight:300}.brand small{display:block;font:8px 'IBM Plex Mono',monospace;letter-spacing:2.7px;color:var(--gold);margin-top:8px}.header-place{font-size:12px;letter-spacing:.18em;color:var(--muted);border-left:1px solid var(--stone);padding-left:2rem}.header-link{margin-left:auto;color:var(--wine);font-size:12px;letter-spacing:.04em;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:5px;white-space:nowrap}.header-link:hover{color:#9a263d}.game-layout{display:grid;grid-template-columns:minmax(350px,42%) minmax(500px,58%);max-width:1540px;min-height:calc(100vh - 74px);margin:auto}.story-panel{padding:clamp(30px,5vw,76px) clamp(27px,5vw,72px) 25px;display:flex;flex-direction:column;border-right:1px solid var(--stone)}.eyebrow{font:10px 'IBM Plex Mono',monospace;letter-spacing:.18em;color:var(--wine)}.intro h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(43px,4.6vw,74px);line-height:.94;letter-spacing:-.045em;margin:23px 0 20px}.intro h1 em{font-weight:300;color:var(--wine)}.intro p{font-size:13px;line-height:1.9;color:#625b53;max-width:370px;margin:0}.day-line{display:flex;justify-content:space-between;font:11px 'IBM Plex Mono',monospace;letter-spacing:.13em;color:var(--wine);border-bottom:1px solid var(--stone);padding:28px 0 11px;margin-top:22px}.order-card{background:var(--porcelain);padding:25px 27px 18px;margin-top:20px;border:1px solid #e9e1d4;box-shadow:0 10px 32px rgba(71,46,28,.045)}.order-heading{display:flex;gap:20px;align-items:flex-start;margin:20px 0 22px}.order-index{font:40px 'Cormorant Garamond',Georgia,serif;color:var(--gold);line-height:1}.order-heading h2{font-family:'Cormorant Garamond','Noto Serif TC',serif;font-size:30px;font-weight:500;margin:-3px 0 5px}.order-heading p{font-size:12px;color:var(--muted);margin:0;line-height:1.65}.order-spec{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #e8e0d4;padding:12px 0;font-size:12px}.order-spec span{color:var(--muted)}.order-spec strong{font-weight:600}.flavor-area{margin-top:25px}.section-caption{display:flex;justify-content:space-between;gap:10px;align-items:center}.section-caption>span:last-child{font-size:11px;color:var(--muted)}.flavor-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px}.flavor-option{border:1px solid var(--stone);background:transparent;text-align:left;min-height:66px;padding:12px 12px 10px;display:grid;grid-template-columns:23px 1fr;column-gap:10px;align-content:center;transition:border-color .2s,background .2s}.flavor-option:hover{border-color:var(--gold);background:rgba(255,255,255,.35)}.flavor-option.selected{border-color:var(--wine);background:var(--porcelain);box-shadow:inset 0 0 0 1px var(--wine)}.flavor-swatch{width:21px;height:21px;border-radius:50%;background:var(--swatch);border:1px solid rgba(0,0,0,.08);grid-row:1/3;align-self:center}.flavor-name{font-size:12px;font-weight:700}.flavor-option small{font-size:10px;color:var(--muted);margin-top:2px}.flavor-list.nudge{animation:nudge .45s ease}@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.shop-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border-top:1px solid var(--stone);border-bottom:1px solid var(--stone)}.shop-stats>div{padding:14px 0}.shop-stats>div+div{border-left:1px solid var(--stone);padding-left:16px}.shop-stats span{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}.shop-stats strong{font:22px 'Cormorant Garamond',Georgia,serif;color:var(--wine)}.story-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:10px;margin-top:auto;padding-top:23px}.plain-button{border:0;border-bottom:1px solid var(--stone);padding:0 0 3px;background:none;color:var(--muted);font-size:10px}.plain-button:hover{color:var(--wine);border-color:var(--wine)}.play-panel{min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;background:var(--porcelain);padding:26px clamp(25px,5vw,80px) 30px}.play-top{width:100%;display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--stone);padding-bottom:13px}.live-height{font:31px 'Cormorant Garamond',Georgia,serif;color:var(--wine)}.live-height small{font:10px 'IBM Plex Mono',monospace;letter-spacing:.15em}.illustration{height:clamp(315px,39vw,490px);max-height:50vh;width:min(100%,520px);min-height:300px;position:relative;margin:12px auto -20px}.illustration canvas{width:100%;height:100%;display:block}.canvas-fallback{position:absolute;inset:35% 15%;text-align:center;color:var(--muted);font-size:12px}.result-card{width:min(100%,490px);border:1px solid var(--gold);background:rgba(251,250,246,.97);padding:16px 22px;margin:0 auto 15px;position:relative;z-index:2;box-shadow:0 8px 26px rgba(100,19,34,.08)}.result-main{display:flex;gap:20px;align-items:center;margin-top:8px}.result-main>strong{font:54px 'Cormorant Garamond',serif;color:var(--wine);line-height:1}.result-main>strong small{font:10px 'IBM Plex Mono',monospace;white-space:nowrap}.result-main h2{font:24px 'Cormorant Garamond','Noto Serif TC',serif;margin:0 0 4px}.result-main p{font-size:11px;line-height:1.55;margin:0;color:var(--muted)}.play-bottom{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,55px);width:100%;margin-top:auto}.play-instruction{max-width:180px;align-self:flex-start;padding-top:39px}.play-instruction>span{font:25px 'Cormorant Garamond','Noto Serif TC',serif;color:var(--wine)}.play-instruction p{font-size:11px;color:var(--muted);line-height:1.8;margin:9px 0}.control-zone{text-align:center}.control-ring{width:184px;height:184px;border-radius:50%;position:relative;display:grid;place-items:center;touch-action:none;cursor:crosshair;user-select:none;outline:none}.ring-track{position:absolute;inset:12px;border:1px solid var(--stone);border-radius:50%}.ring-track:before{content:'';position:absolute;inset:16px;border:1px dashed #d0c5b7;border-radius:50%}.ring-progress{position:absolute;inset:11px;border-radius:50%;background:conic-gradient(var(--gold) var(--progress,0%),transparent var(--progress,0%));-webkit-mask:radial-gradient(transparent 76%,#000 77%);mask:radial-gradient(transparent 76%,#000 77%);pointer-events:none}.control-ring.active .ring-track{border-color:var(--gold)}.control-center{width:94px;height:94px;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;background:var(--wine);color:var(--porcelain);box-shadow:0 6px 20px rgba(100,19,34,.19);z-index:1;pointer-events:none;transition:transform .2s}.control-ring.active .control-center{transform:scale(.94)}.control-center span{font-size:15px;letter-spacing:.13em}.control-center small{font:9px 'IBM Plex Mono',monospace;letter-spacing:.18em;opacity:.7;margin-top:4px}.control-marker{position:absolute;width:7px;height:7px;background:var(--gold);border-radius:50%;pointer-events:none}.control-note{font-size:10px;color:var(--muted);margin-top:7px;line-height:1.5}.play-actions{display:flex;justify-content:center;gap:10px;width:100%;margin-top:15px}.primary-button,.secondary-button{min-height:43px;border:1px solid var(--wine);padding:10px 20px;font-size:12px;letter-spacing:.06em}.primary-button{background:var(--wine);color:var(--porcelain)}.primary-button:hover{background:#852237}.secondary-button{background:transparent;color:var(--wine)}.secondary-button:hover{background:#f4e9e8}
@media(max-width:980px){.game-layout{grid-template-columns:minmax(300px,40%) minmax(390px,60%)}.story-panel{padding:30px 26px}.play-panel{padding-left:25px;padding-right:25px}.intro h1{font-size:52px}.illustration{height:360px;min-height:0}.play-bottom{gap:15px}.play-instruction{max-width:140px}}
@media(min-width:981px){.story-panel{padding-top:42px}.intro h1{margin:16px 0 12px}.intro p{line-height:1.65}.day-line{margin-top:8px;padding:20px 0 9px}.order-card{padding:18px 22px 9px;margin-top:13px}.order-heading{margin:11px 0 14px}.order-spec{padding:9px 0}.flavor-area{margin-top:17px}.flavor-list{margin-top:9px}.flavor-option{min-height:57px}.shop-stats{margin-top:18px}.shop-stats>div{padding:10px 0}}
@media(max-width:740px){.site-header{height:62px;padding:0 18px;gap:12px}.brand{font-size:26px}.brand small{font-size:6px}.header-place{display:none}.header-link{font-size:10px}.game-layout{display:flex;flex-direction:column;min-height:0}.story-panel{border-right:0;padding:24px 21px 12px}.intro h1{font-size:44px;margin:13px 0 9px}.intro p{font-size:11px;line-height:1.7}.day-line{margin-top:14px;padding:12px 0 8px}.order-card{margin-top:12px;padding:15px 18px 8px}.order-heading{margin:8px 0 11px;gap:12px}.order-index{font-size:33px}.order-heading h2{font-size:24px}.order-spec{padding:8px 0}.flavor-area{margin-top:16px}.flavor-list{margin-top:8px}.flavor-option{min-height:54px;padding:7px 8px}.flavor-option small{font-size:9px}.shop-stats{margin-top:16px}.shop-stats>div{padding:8px 0}.shop-stats strong{font-size:20px}.story-footer{padding-top:12px}.play-panel{padding:16px 20px 26px;min-height:550px;border-top:1px solid var(--stone)}.illustration{height:330px;min-height:0;margin:0 auto -15px}.play-bottom{gap:8px}.play-instruction{max-width:137px;padding-top:27px}.play-instruction>span{font-size:22px}.play-instruction p{font-size:10px}.control-ring{width:160px;height:160px}.control-marker{display:none}.control-center{width:84px;height:84px}.control-note{max-width:190px}.result-card{margin-top:0}.result-main>strong{font-size:46px}}
@media(max-width:390px){.header-link{font-size:9px}.intro h1{font-size:39px}.flavor-option small{display:none}.flavor-option{min-height:42px}.play-panel{padding-left:13px;padding-right:13px}.illustration{height:300px}.control-ring{width:150px;height:150px}.play-instruction{max-width:128px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
