
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4f1e9;background:#10141e;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 25%,#26323a66,transparent 55%)}main{max-width:460px;margin:auto;padding:calc(26px + env(safe-area-inset-top)) 26px calc(22px + env(safe-area-inset-bottom));min-height:100svh}header{display:flex;align-items:center;justify-content:space-between}.brand{font-size:15px;font-weight:800;letter-spacing:3px}.badge{border:1px solid #ffffff20;border-radius:30px;padding:7px 11px;color:#a6b1be;font-size:11px}.intro{margin-top:44px}.eyebrow{font-size:9px;letter-spacing:2px;color:#9da7b5}h1{font-size:clamp(44px,12vw,60px);letter-spacing:-3px;line-height:1.03;margin:17px 0}h1 span{color:#d4f38b}.subtitle{color:#a5adba;font-size:14px}.stage{height:235px;position:relative;display:grid;place-items:center;perspective:700px}.halo{position:absolute;width:220px;height:220px;border:1px solid #d4f38b10;border-radius:50%;box-shadow:0 0 0 25px #d4f38b04,0 0 0 50px #d4f38b02}.die{position:relative;width:112px;height:112px;transform:rotate(-12deg);z-index:1}.die-front{position:absolute;inset:0;background:linear-gradient(135deg,#edffbc,#b2d76b);border:1px solid #f0ffc3;border-radius:22px;display:grid;place-items:center;color:#263719;font-size:52px;font-weight:750;box-shadow:inset 3px 3px 9px #ffffff55,0 16px 35px #0005}.die-top{position:absolute;inset:-15px 0 15px 0;transform:skewX(-27deg) translateX(8px);background:#f0ffc5;border-radius:20px}.die-side{position:absolute;inset:0 -14px 0 14px;transform:skewY(-25deg) translateY(-6px);background:#7b9d43;border-radius:20px}.shadow{position:absolute;width:125px;height:22px;border-radius:50%;background:#0006;filter:blur(10px);bottom:25px}.die.rolling{animation:tumble .7s ease-in-out infinite}@keyframes tumble{0%{transform:translateY(0) rotate(-12deg)}35%{transform:translateY(-30px) rotate(140deg) scale(.9)}75%{transform:translateY(-10px) rotate(280deg)}100%{transform:translateY(0) rotate(348deg)}}.die.landed{animation:land .35s ease-out}@keyframes land{50%{transform:rotate(-12deg) scale(1.12)}}.result{text-align:center;min-height:68px}.result>span{display:block;font-size:20px;font-weight:650}.result small{display:block;color:#8d98a8;margin-top:7px;font-size:12px}button{font:inherit;cursor:pointer}.primary{width:100%;border:0;border-radius:17px;background:#d4f38b;color:#243315;padding:19px 22px;font-weight:750;font-size:16px;display:flex;justify-content:space-between;margin:10px 0 25px;box-shadow:0 6px 30px #a3d45e12}.primary:disabled{opacity:.5;cursor:wait}.settings{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-top:1px solid #ffffff12}.settings strong{font-size:14px}.settings p{font-size:11px;color:#939eae;margin:6px 0}.switch{position:relative;width:48px;height:30px;flex-shrink:0}.switch input{position:absolute;opacity:0}.switch span{display:block;background:#394151;border-radius:30px;height:30px;transition:.2s}.switch span:after{content:"";position:absolute;width:22px;height:22px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+span{background:#9fbe64}.switch input:checked+span:after{transform:translateX(18px)}.switch input:disabled+span{opacity:.5}.switch input:focus-visible+span,button:focus-visible{outline:3px solid #fff;outline-offset:4px}.faces{display:flex;gap:8px;justify-content:center;margin:12px 0}.face{width:43px;height:37px;display:grid;place-items:center;background:#ffffff06;border:1px solid #ffffff10;border-radius:10px;font-size:13px;color:#c1c9d3}.face.excluded{opacity:.3;text-decoration:line-through}.face.selected{color:#d4f38b;border-color:#d4f38b88;background:#d4f38b12}#status{font-size:12px;text-align:center;color:#f1bba6;min-height:18px}footer{text-align:center;color:#626e7e;font-size:10px;margin-top:25px}@media(prefers-reduced-motion:reduce){*,*:after{animation:none!important;transition:none!important}}@media(max-height:740px){.intro{margin-top:28px}.stage{height:195px}h1{font-size:48px}}
.selection-note{font-size:12px;color:#a6b1be}.faces .face{width:54px;height:46px;font:inherit;cursor:pointer}.faces .face.active{color:#d4f38b;border-color:#d4f38b66;background:#d4f38b12}.faces .face:disabled{cursor:default}.faces .face:focus-visible{outline:2px solid #fff;outline-offset:3px}.coin,.matches{display:none}.stage[data-mode=coin] .die,.stage[data-mode=matches] .die{display:none}.stage[data-mode=coin] .coin{display:block}.coin{width:130px;height:130px;position:relative;transform-style:preserve-3d;transform:rotateY(0) rotateZ(-12deg);z-index:1}.coin-front,.coin-back{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;display:grid;place-items:center;font-size:50px;font-weight:750;color:#493913;border:7px solid #ddbb64;background:radial-gradient(circle at 30% 30%,#fff1b6,#e2bb5b 70%);box-shadow:inset 0 0 0 3px #a98238,0 10px 30px #0004}.coin-back{transform:rotateY(180deg)}.stage.rolling .coin{animation:flip .46s linear infinite}@keyframes flip{from{transform:translateY(-10px) rotateY(0) rotateZ(-12deg)}50%{transform:translateY(-35px) rotateY(180deg) rotateZ(-12deg)}to{transform:translateY(-10px) rotateY(360deg) rotateZ(-12deg)}}.stage.rolling .die{animation:tumble .7s ease-in-out infinite}.stage.landed .die,.stage.landed .coin{animation:reveal .35s ease-out}@keyframes reveal{50%{scale:1.12}}.stage[data-mode=matches] .matches{display:flex}.matches{gap:33px;align-items:center;height:165px;z-index:1}.match{position:relative;width:15px;height:125px;background:linear-gradient(90deg,#d3a675,#f5d6a6,#c49361);border-radius:5px;box-shadow:3px 5px 10px #0005;transition:transform .5s,opacity .5s}.match:before{content:"";position:absolute;top:-13px;left:-3px;width:21px;height:30px;border-radius:50% 50% 40% 40%;background:radial-gradient(circle at 35% 30%,#ffb2a0,#ba5044 60%,#722a25)}.match span{position:absolute;top:49px;left:50%;transform:translateX(-50%);color:#4b341d;font-size:12px;font-weight:800}.match:nth-child(1){transform:rotate(-12deg)}.match:nth-child(3){transform:rotate(12deg)}.match.chosen{transform:translateY(-20px) scale(1.18)}.match.discarded{transform:translateY(35px) rotate(30deg);opacity:0}.stage.rolling .match{animation:shuffle .55s ease-in-out infinite alternate}.stage.rolling .match:nth-child(2){animation-delay:-.2s}.stage.rolling .match:nth-child(3){animation-delay:-.35s}@keyframes shuffle{from{transform:translateY(-14px) rotate(-14deg)}to{transform:translateY(12px) rotate(14deg)}}@media(prefers-reduced-motion:reduce){.stage *{animation:none!important;transition:none!important}}

/* The wood is consumed from the head down; the winner keeps its lower half. */
.faces{flex-wrap:wrap;gap:8px}.faces .face{width:auto;min-width:60px;padding:0 13px;font-size:13px}.faces .face.excluded{opacity:.5;text-decoration:none}.matches{gap:43px}.match,.match:nth-child(1),.match:nth-child(3),.match.chosen,.match.discarded{width:18px;height:135px;background:none;box-shadow:none;transform:none;transition:none;opacity:1}.match:before{display:none}.match-stick{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,#bd8a53,#f9dcad 45%,#c39462);box-shadow:2px 4px 8px #0004}.match-head{position:absolute;top:-13px;left:-3px;width:24px;height:30px;border-radius:50% 50% 40% 40%;background:radial-gradient(circle at 35% 30%,#ffb2a0,#ba5044 60%,#722a25)}.match span{top:92px;font-size:12px;z-index:4}.match.chosen .match-stick{clip-path:inset(50% 0 0)}.match.chosen .match-head,.match.discarded .match-head{opacity:0}.match.chosen:after{content:"";position:absolute;top:50%;left:0;right:0;height:6px;background:linear-gradient(#272220,#6f5035);border-radius:3px}.match.discarded{opacity:0}.flame{position:absolute;left:50%;top:-31px;width:31px;height:49px;transform:translateX(-50%);border-radius:55% 30% 50% 45%;background:radial-gradient(ellipse at 50% 82%,#fffbd1 0 17%,#ffd45c 28%,#ff8a20 52%,#ed3e1644 74%,transparent 76%);filter:drop-shadow(0 0 9px #ff8c36);opacity:0;z-index:5;transform-origin:50% 100%}.flame:after{content:"";position:absolute;inset:20px 10px 4px;border-radius:50%;background:#fff4b5}.smoke{position:absolute;left:50%;top:36px;width:14px;height:35px;border-radius:50%;background:linear-gradient(#d5d8dc00,#d5d8dc99);filter:blur(5px);opacity:0}.stage.rolling .match,.stage.rolling .match:nth-child(2),.stage.rolling .match:nth-child(3){animation:none}.stage.rolling .match .flame{opacity:1;animation:flicker .18s ease-in-out infinite alternate}.burning .match-head{animation:head-out .12s both}.burning .burn-winner .match-stick{animation:wood-half .8s linear both}.burning .burn-loser .match-stick{animation:wood-all 1.6s linear both}.burning .burn-winner .flame{animation:fire-half .8s linear both,flicker .16s ease-in-out infinite alternate}.burning .burn-loser .flame{animation:fire-all 1.6s linear both,flicker .16s ease-in-out infinite alternate}.burning .burn-winner .smoke{animation:smoke-out .9s .8s ease-out both}.burning .burn-loser span{animation:head-out .3s 1.05s both}@keyframes head-out{to{opacity:0}}@keyframes wood-half{from{clip-path:inset(0 0 0)}to{clip-path:inset(50% 0 0)}}@keyframes wood-all{from{clip-path:inset(0 0 0)}to{clip-path:inset(100% 0 0)}}@keyframes fire-half{0%{top:-31px;opacity:1}92%{top:36px;opacity:1}100%{top:36px;opacity:0}}@keyframes fire-all{0%{top:-31px;opacity:1}94%{top:103px;opacity:1}100%{top:103px;opacity:0}}@keyframes flicker{from{transform:translateX(-50%) scaleX(.85) rotate(-5deg)}to{transform:translateX(-50%) scaleX(1.15) rotate(6deg)}}@keyframes smoke-out{0%{opacity:0;transform:translate(-50%,0) scale(.5)}20%{opacity:.7}100%{opacity:0;transform:translate(-30%,-48px) scale(1.8)}}@media(prefers-reduced-motion:reduce){.stage.rolling .flame{animation:none;opacity:0}.burning .flame,.burning .smoke{display:none}}

.publication{font-size:11px;line-height:1.5;text-align:center;color:#98a6b8;margin:15px 0 4px}
