:root{--bg: #14110f;--card: #1f1b18;--card2: #2a241f;--line: #3a332d;--text: #f3ece4;--dim: #a89a8c;--accent: #e8a25a;--accent2: #f2c38b;--good: #7fc29b;--bad: #e07a6a;--help: #22324a;font-family:Noto Sans Thai,Sarabun,Thonburi,Leelawadee UI,system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}body{min-height:100dvh}#app{max-width:520px;margin:0 auto;padding:16px 16px 112px}h1{font-size:30px;line-height:1.3;margin:28px 0 8px;color:var(--accent);letter-spacing:.2px}.dim{color:var(--dim);font-size:14px;line-height:1.65}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:12px 0}.card.hero{background:linear-gradient(160deg,#2b2119,#1c1714);border-color:#4a3a2c}.warn{border-color:#6b3d33;background:#21171493}label{display:block;font-size:14px;color:var(--dim);margin:14px 0 6px}select,button{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px}select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}button{cursor:pointer;transition:transform .08s ease,border-color .15s}button:active{transform:scale(.97)}button:disabled{opacity:.6;cursor:default}button.primary{width:100%;background:var(--accent);color:#1b130b;border:0;font-weight:700;padding:15px;margin-top:18px;font-size:17px}.row{display:flex;gap:8px;flex-wrap:wrap}.row>button{flex:1;min-width:0}button.on{border-color:var(--accent);color:var(--accent);background:#2b2119}.bars{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.bar{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden}.bar i{display:block;height:6px;border-radius:3px;background:var(--line);margin-top:4px;overflow:hidden}.bar i b{display:block;height:100%;background:var(--accent);transition:width .4s ease}.others{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}.other{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:7px 6px;font-size:11px;line-height:1.45;overflow-wrap:anywhere}.other b{font-size:12px;color:var(--accent2)}.other.gone{opacity:.45}.timeline{font-size:15px;line-height:1.75}.timeline p{margin:7px 0;animation:rise .35s ease both}.timeline p.major{color:var(--text);font-weight:600}.timeline p:not(.major){color:var(--dim)}.timeline .age{display:inline-block;min-width:52px;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.help{background:var(--help);border:1px solid #36507a;border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.75;margin:10px 0}.help a{color:#9cc7ff}.controls{position:fixed;left:0;right:0;bottom:0;background:#14110ff0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}.controls .row{max-width:520px;margin:0 auto}.choice{border-color:var(--accent);background:#2b2119;animation:rise .3s ease both}.choice p{margin:0 0 12px;font-size:16px;line-height:1.6}table{width:100%;border-collapse:collapse;font-size:14px}td{padding:7px 4px;border-bottom:1px solid var(--line)}td.num{text-align:right;font-variant-numeric:tabular-nums}a{color:var(--accent)}.big{font-size:18px;line-height:1.75;margin:0}.tag{display:inline-block;font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:2px 10px;margin:0 6px 6px 0}.clickable{cursor:pointer}.small{font-size:12px}.hint{border:1px dashed var(--line);border-radius:12px;padding:10px 12px;margin:8px 0}.timeline{cursor:pointer;user-select:none;-webkit-user-select:none}button.go{border-color:var(--accent);color:var(--accent);font-weight:700;flex:1.4}.controls button{padding:11px 6px;white-space:nowrap}td.live{font-weight:700;color:var(--accent);min-width:90px}.sticky{position:sticky;top:0;z-index:2;background:var(--bg);padding-top:4px;margin-top:-4px}.sticky .card{margin-top:8px}.col{display:flex;flex-direction:column;gap:8px}.col>button{width:100%;text-align:left;padding:13px 14px}.end-spacer{height:1px;scroll-margin-bottom:96px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.card.head{padding:10px 14px;margin:8px 0 6px}.card.head .bars{grid-template-columns:repeat(5,1fr);gap:4px 8px;margin-top:6px}.debt{font-size:11px;font-weight:700;color:#ffb4a8;border:1px solid #8a3b30;border-radius:999px;padding:1px 8px;margin-left:8px;vertical-align:2px}.controls button[data-testid=rush]{flex:0 0 48px}.card.head .bar{font-size:11px}.card.head .bar i{height:5px;margin-top:3px}.others .other{padding:5px 6px;font-size:10.5px;line-height:1.35;max-height:58px;overflow:hidden}.others .other b{font-size:11.5px}.others .cty{color:var(--dim);font-size:10px}.others{margin:6px 0 8px}@media (prefers-reduced-motion: reduce){.timeline p,.choice{animation:none}.bar i b,button{transition:none}}.start{padding-top:6vh}.kicker{margin:0;color:var(--accent2);font-size:13px;letter-spacing:1px;font-weight:600}h1.title{font-size:clamp(36px,11vw,48px);margin:6px 0 12px;line-height:1.25}.lead{font-size:17px;line-height:1.7;margin:0 0 10px;color:var(--text)}.ticker{margin:0 0 4px;font-size:14px;color:var(--accent);font-variant-numeric:tabular-nums;min-height:1.6em}button.big-cta{font-size:20px;padding:18px;border-radius:16px;box-shadow:0 8px 28px #e8a25a33}.center{text-align:center}.invite{display:flex;gap:12px;align-items:center;border-color:var(--accent);background:#2b2119}.flag{font-size:34px;line-height:1}.flag:empty{display:none}details.settings{padding:0 16px}details.settings summary{cursor:pointer;padding:14px 0;color:var(--dim);font-size:15px;list-style:none}details.settings summary::-webkit-details-marker{display:none}details.settings summary:before{content:"⚙ "}details.settings[open]{padding-bottom:16px}details.settings label:first-of-type{margin-top:0}.links{margin-top:4px}.end-hero{padding:18px}.age-big{font-size:64px;font-weight:800;line-height:1;margin:16px 0 6px;color:var(--accent);font-variant-numeric:tabular-nums}.age-big small{font-size:22px;font-weight:600;color:var(--text)}.pct{margin-top:14px;font-size:15px;line-height:1.6}.pct i{display:block;height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:6px}.pct i b{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));animation:grow 1.2s ease both}@keyframes grow{0%{width:0!important}}button.primary.alt{background:var(--card2);color:var(--accent);border:1px solid var(--accent)}.lives{margin-top:10px;display:flex;flex-direction:column;gap:10px}.life .who{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:3px}.life .who span:first-child{font-weight:600}.life.me .who span:first-child{color:var(--accent)}.life .track{position:relative;height:18px;background:var(--card2);border-radius:6px;overflow:hidden}.life .track b{display:block;height:100%;background:#6b5a49;border-radius:6px;animation:grow 1s ease both}.life.me .track b{background:var(--accent)}.life .track span{position:absolute;right:8px;top:0;font-size:12px;line-height:18px;font-weight:700;font-variant-numeric:tabular-nums}.timeline.static{cursor:auto;user-select:text;-webkit-user-select:text}.sheet-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#000a;z-index:10;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease both}.sheet{background:var(--card);border:1px solid var(--line);border-radius:20px 20px 0 0;width:100%;max-width:520px;max-height:92dvh;overflow:auto;padding:14px 16px calc(16px + env(safe-area-inset-bottom));animation:up .25s ease both}.share-img{display:block;width:100%;max-height:52dvh;object-fit:contain;border-radius:12px;margin:10px 0 0;-webkit-touch-callout:default}button.x{padding:6px 12px;border-radius:999px}a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text);background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-weight:600}a.btn.fb{background:#1877f2;border-color:#1877f2;color:#fff}a.btn.line{background:#06c755;border-color:#06c755;color:#fff}@keyframes fade{0%{opacity:0}}@keyframes up{0%{transform:translateY(40px);opacity:0}}@media (prefers-reduced-motion: reduce){.sheet-bg,.sheet,.pct i b,.life .track b{animation:none}}.reveal{animation:reveal .9s ease both}h1.country{margin-top:2px;font-size:clamp(32px,10vw,44px)}h1.country .flag{font-size:1em}@keyframes reveal{0%{opacity:0;transform:translateY(10px) scale(.98);filter:blur(4px)}}[data-testid=birth] .hero{animation:reveal .9s .35s ease both}[data-testid=birth] [data-testid=odds]{color:var(--accent2);font-size:15px}@media (prefers-reduced-motion: reduce){.reveal,[data-testid=birth] .hero{animation:none}}.others .other{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;max-height:none}.row>button.x{flex:0 0 auto}.others .other{display:flex;flex-direction:column;min-width:0}.others .other .nm,.others .other .cty{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.others .other .st{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.controls button.icon{flex:0 0 48px}@media (max-width: 380px){.controls .row{gap:6px}.controls button{font-size:14px;padding:10px 4px}.controls button.icon,.controls button[data-testid=rush]{flex:0 0 40px}}.card.fin{text-align:center;border-color:var(--accent);animation:reveal .8s ease both}.card.fin p{margin:4px 0 0;font-size:17px}.card.fin button.primary{margin-top:14px}.flags{font-size:26px;line-height:1.5;margin:4px 0 8px;letter-spacing:2px}.controls button.primary{padding:14px;font-size:17px}textarea.copy-box{width:100%;min-height:110px;font:inherit;font-size:16px;color:var(--text);background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px}
