:root { --bg:#FAF8F4; --gold:#C5A572; --ink:#3A3733; --line:#E8E2D6 }
* { box-sizing:border-box; margin:0 }
html, body { height:100% }
body { background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans CJK JP","Noto Sans CJK TC",sans-serif }
#app { max-width:480px; margin:0 auto; padding:12px 14px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px; min-height:100dvh }
header { display:flex; align-items:baseline; gap:10px }
h1 { font-size:18px; letter-spacing:.14em; flex:1 }
h1 b { color:var(--gold) }
#who { font-size:13px; color:var(--ink); max-width:30%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#round { font-size:13px; color:var(--gold); letter-spacing:.06em }
#timer { font-size:22px; font-variant-numeric:tabular-nums; min-width:52px; text-align:right }
#photos { display:none; grid-template-columns:1fr 1fr; gap:10px }.imgwrap { position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:#EFEAE0; border:1px solid var(--line); cursor:pointer }
.imgwrap .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(14px) brightness(.92); transform:scale(1.15) }
.imgwrap .main { position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
.btns { display:flex; justify-content:center; gap:8px; margin-top:8px }
.btns.center { justify-content:center }
button { position:relative; overflow:hidden; width:54px; height:54px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:25px; cursor:pointer; box-shadow:0 1px 3px rgba(58,55,51,.12) }
button:active { transform:scale(.9) }
button.ring { width:66px; height:66px; font-size:30px; border-color:var(--gold); box-shadow:inset 0 0 0 2px var(--gold), 0 2px 6px rgba(197,165,114,.45) }
button .cool { position:absolute; left:0; bottom:0; width:100%; height:0%; background:rgba(58,55,51,.35); pointer-events:none }
button:disabled { opacity:.45 }
@keyframes shake { 25% { transform:translateX(-3px) } 75% { transform:translateX(3px) } }
button.deny { animation:shake .15s 2 }
#wait { display:none; flex-direction:column; align-items:center; gap:18px; padding:36px 0 }
#wait.on { display:flex }
.hint { font-size:13px; letter-spacing:.2em; color:var(--gold) }
.rules { display:none; max-width:34ch; font-size:13px; line-height:2; letter-spacing:.04em; text-align:center }
.rules.on { display:block }
#floats { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:5 }
.pop { position:absolute; bottom:22%; font-size:30px; animation:rise 1.1s ease-out forwards }
@keyframes rise { to { transform:translateY(-150px) scale(1.25); opacity:0 } }
#overlay { position:fixed; inset:0; display:none; place-items:center; background:rgba(250,248,244,.88); z-index:9 }
#overlay.on { display:grid }
#overlay div { font-size:24px; letter-spacing:.24em }
#closed { display:none; margin-top:38vh; text-align:center; font-size:18px; letter-spacing:.4em; color:var(--gold) }
#closed.on { display:block }
.side.picked .imgwrap { box-shadow:0 0 0 3px var(--gold) }
.pickmark { position:absolute; top:8px; right:8px; display:none; padding:2px 10px; border-radius:999px; background:var(--gold); color:#fff; font-size:12px; letter-spacing:.1em }
.side.picked .pickmark { display:block }
#standby { position:fixed; inset:0; z-index:60; background:#111; display:none; align-items:center; justify-content:center }
#standby.on { display:flex }
#standby img { max-width:100%; max-height:100%; object-fit:contain }
#tea { display:none; padding:16px; max-width:640px; margin:0 auto }
#tea.on { display:block }
#tea h2 { text-align:center; font-size:20px; margin:8px 0 16px }
#tea .q { margin:14px 0 }
#tea .q label { display:block; margin-bottom:6px; font-size:16px }
#tea select { width:100%; min-height:52px; padding:8px 12px; font-size:18px; border-radius:10px; border:1px solid #ccc; background:#fff }
#tea button.main { width:100%; min-height:60px; font-size:20px; border-radius:14px; margin-top:18px }
#tea button.main:disabled { opacity:.5 }
#tea .note { text-align:center; color:#777; margin-top:12px; font-size:14px }
#tea .item { padding:14px 4px; border-bottom:1px solid #ddd; font-size:18px; display:flex; justify-content:space-between }
#tea .item.new { animation:tea-reveal-in .7s cubic-bezier(.2,.8,.2,1) }
@keyframes tea-reveal-in { from { opacity:0; transform:translateY(16px) } }
#tea .rank { display:flex; justify-content:space-between; padding:12px 4px; font-size:18px; border-bottom:1px solid #eee }
#tea .spinwrap { text-align:center; padding:24px 0 }
#tea .spinwrap h2 { font-size:24px }