*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--gold:#ffb86b;--gold2:#ff8a5b;--ink:#f7f1ea;--muted:#b4a9a2;--bg:#141114;--card:rgba(255,255,255,.055);--red:#ff6b6b;--rose:#ff8fa3}
html,body{min-height:100%;background:radial-gradient(110% 60% at 50% 0%,#2e211c 0%,#171315 55%,#0f0d0f 100%) no-repeat;background-color:#0f0d0f;color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif}
#app{max-width:460px;margin:0 auto;padding:8px 16px calc(28px + env(safe-area-inset-bottom));min-height:100dvh}
.top{display:flex;align-items:center;justify-content:space-between;height:34px}.brand{color:var(--muted);font-size:13.5px}
.tag{font-size:11px;padding:3px 8px;border-radius:8px;background:rgba(201,96,126,.85);color:#fff}
.screen{display:none;animation:in .35s ease}.screen.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
[hidden]{display:none!important}
h1.ttl{font-family:inherit;color:var(--gold);text-align:center;margin:8px 0 4px;line-height:1.3;letter-spacing:.03em}
h1.ttl .l1{display:block;font-size:28px;font-weight:800;letter-spacing:.06em}h1.ttl .l2{display:block;font-size:15px;color:#ffd9b0;margin-top:4px}
h2{font-family:inherit;color:var(--gold);text-align:center;font-size:22px;margin:14px 0 6px}
.sub{color:var(--muted);text-align:center;font-size:13px;line-height:1.6}
.sub2{color:#e8dccb;text-align:center;font-size:13.5px;line-height:1.7;margin:8px 0}
.note{color:var(--muted);font-size:12.5px;line-height:1.6;text-align:center;margin:6px 0}
.err{color:#ff9fae;font-size:13px;text-align:center;min-height:1em;margin:4px 0}
.counter{text-align:center;font-size:13px;color:#ffd3dc;background:rgba(176,64,90,.25);border:1px solid rgba(231,160,174,.4);border-radius:12px;padding:7px;margin:6px 0}
.lbl{display:block;font-size:13px;color:var(--gold);margin:14px 0 6px}.lbl b{color:var(--muted);font-weight:400}
.form input,.custom input,.linkbox input{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(246,238,220,.3);background:#120c0a;color:var(--ink);font-size:16px;font-family:inherit}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0}
.chip{padding:7px 14px;border-radius:999px;border:1px solid rgba(246,238,220,.3);background:none;color:var(--ink);font-size:13.5px;font-family:inherit;cursor:pointer}
.chip.on{background:var(--gold);color:#2b140c;border-color:var(--gold)}
.chips.sm .chip{padding:5px 11px;font-size:12.5px}
.pool{max-height:290px;overflow:auto;border:1px solid rgba(255,184,107,.25);border-radius:14px;padding:6px;background:rgba(0,0,0,.18)}
.it{display:block;width:100%;text-align:left;background:var(--card);border:1px solid transparent;color:var(--ink);border-radius:11px;padding:10px 11px;margin:5px 0;font-size:14px;line-height:1.5;font-family:inherit;cursor:pointer}
.it i{font-style:normal;font-size:11px;color:var(--muted);margin-right:6px}
.it.on{border-color:var(--gold);background:rgba(255,184,107,.14)}.it.on::after{content:" ✓";color:var(--gold)}
.custom{margin:10px 0;padding:10px;border-radius:12px;background:var(--card)}.custom summary{font-size:13.5px;color:#ffd9b0;cursor:pointer}.custom input{margin-top:8px}
.picked{margin:10px 0}.picked p{font-size:13px;color:#ffd9b0;padding:6px 10px;border-left:2px solid var(--gold);margin:4px 0;display:flex;justify-content:space-between;gap:8px}.picked p button{background:none;border:0;color:var(--muted);font-size:14px}
.btn{display:block;width:100%;padding:14px 12px;margin:9px 0;border-radius:16px;border:0;font-size:16.5px;font-weight:600;letter-spacing:.05em;cursor:pointer;text-align:center;text-decoration:none;font-family:inherit}
.btn.main{background:linear-gradient(135deg,#ffc46b,#ff7f5c);color:#2b140c;box-shadow:0 6px 18px rgba(255,184,107,.25)}.btn.main:disabled{opacity:.4}
.btn.big{font-size:18px;padding:16px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(246,238,220,.35);font-size:14.5px;font-weight:500;padding:11px}
.btn.sm{font-size:14px;padding:10px;margin:6px 0}
.lock{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:12px 0;padding:11px 13px;border-radius:14px;border:1px dashed rgba(255,184,107,.45);font-size:13.5px;color:#ffd9b0}.lock span{font-size:12px;color:var(--muted)}
.linkbox{display:flex;gap:8px;align-items:center;margin:12px 0}.linkbox input{font-size:13px;padding:10px}.linkbox .btn{width:auto;flex:0 0 auto;margin:0}
/* envelope */
.env{position:relative;width:230px;height:150px;margin:26px auto 14px;background:linear-gradient(160deg,#e98e63,#c8643f);border:1px solid rgba(255,184,107,.55);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 30px rgba(255,184,107,.12);animation:float 3s ease-in-out infinite}
.env.mini{width:150px;height:98px;margin-top:20px}
.env .flap{position:absolute;inset:0 0 auto 0;height:62%;background:linear-gradient(180deg,#f3a57a,#d9764e);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:10px 10px 0 0;transform-origin:top;transition:transform .7s ease;z-index:2}
.env .seal{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff5d6c,#b8233a);color:#fff;font-weight:800;font-family:inherit;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.5);z-index:3;transition:transform .5s,opacity .5s}
.env.mini .seal{width:34px;height:34px;font-size:15px}
.env .paper{position:absolute;left:8%;right:8%;top:10%;bottom:8%;background:#f6eedc;border-radius:6px;z-index:1;transition:transform .8s .35s ease}
.env.shake{animation:shake .5s}
@keyframes float{50%{transform:translateY(-6px)}}
@keyframes shake{20%,60%{transform:translateX(-6px) rotate(-2deg)}40%,80%{transform:translateX(6px) rotate(2deg)}}
/* guessing */
.prog{display:flex;gap:6px;justify-content:center;margin:8px 0}.prog span{width:30px;height:5px;border-radius:3px;background:rgba(246,238,220,.18)}.prog span.on{background:var(--gold)}.prog span.ok{background:#8fd19e}.prog span.no{background:var(--rose)}
.opts .op{display:block;width:100%;text-align:left;padding:13px 14px;margin:9px 0;border-radius:14px;border:1px solid rgba(255,184,107,.35);background:var(--card);color:var(--ink);font-size:15px;line-height:1.55;font-family:inherit;cursor:pointer;transition:transform .15s}
.opts .op:active{transform:scale(.98)}
.opts .op.x{opacity:.35;text-decoration:line-through;border-color:rgba(231,160,174,.4);cursor:default}
.opts .op.bad{animation:shake .45s;border-color:var(--rose)}
.hints{margin-top:12px}.hint{padding:10px 12px;margin:8px 0;border-radius:12px;background:rgba(255,184,107,.1);border:1px solid rgba(255,184,107,.4);font-size:14px;animation:in .4s}
.hint b{color:var(--gold);font-size:12px;margin-right:8px;letter-spacing:.05em}
.hint.lockd{opacity:.4;border-style:dashed;background:none}
/* reveal overlay */
.reveal{position:fixed;inset:0;z-index:50;background:rgba(10,8,9,.97);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:in .3s}
.rv-in{max-width:420px;width:100%;text-align:center}
.reveal .env{animation:none}
.reveal.go .env .seal{transform:translate(-50%,-50%) scale(1.6);opacity:0}
.reveal.go .env .flap{transform:rotateX(180deg)}
.reveal.go .env .paper{transform:translateY(-60%)}
.rv-res{font-size:15px;color:#ffd9b0;min-height:1.4em;opacity:0;transition:opacity .4s .6s}
.rv-cat{font-size:12px;color:var(--muted);margin-top:8px;opacity:0;transition:opacity .4s .9s}
.rv-text{font-family:inherit;font-size:22px;line-height:1.55;color:var(--gold);margin:12px 4px;min-height:2em;text-shadow:0 0 18px rgba(255,184,107,.45);opacity:0;transform:scale(.85);transition:all .6s 1.1s}
.rv-pts{font-size:13px;color:var(--rose);opacity:0;transition:opacity .4s 1.6s}
.reveal.go .rv-res,.reveal.go .rv-cat,.reveal.go .rv-pts{opacity:1}.reveal.go .rv-text{opacity:1;transform:none}
#rvNext{opacity:0;transition:opacity .4s 1.9s}.reveal.go #rvNext{opacity:1}
/* final */
.scorebox{text-align:center;margin:10px 0 14px;padding:16px;border-radius:18px;background:var(--card);border:1px solid rgba(255,184,107,.35)}
.score{font-size:54px;font-weight:700;color:var(--gold);line-height:1}.score::after{content:"分";font-size:16px;margin-left:4px}
.stitle{font-size:17px;color:#ffd9b0;margin-top:6px;font-family:inherit}
.letter{background:#fff8ef;color:#3a2620;border-radius:12px;padding:18px 18px 14px;font-family:inherit;line-height:1.8;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.letter .to{font-size:14px;margin-bottom:6px}.letter ol{padding-left:20px}.letter li{margin:6px 0}.letter li i{font-style:normal;font-size:11px;color:#9b6b5a;margin-left:6px}.letter .from{text-align:right;margin-top:8px;font-size:14px}
.twist{text-align:center;font-family:inherit;font-size:19px;color:var(--rose);margin:18px 6px;line-height:1.6;opacity:0;animation:twist 1s 1.2s forwards}
@keyframes twist{from{opacity:0;transform:translateY(10px) scale(.95);letter-spacing:.3em}to{opacity:1;transform:none;letter-spacing:.02em}}
.adcard{position:relative;display:block;margin:16px 0 4px;padding:11px 13px 11px 13px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:var(--ink);text-decoration:none;font-size:12.5px;line-height:1.5}
.adcard b{display:block;font-size:13.5px;color:#ffd9b0;margin-bottom:2px}.adcard span{color:var(--muted)}
.adcard .adtag{position:absolute;top:8px;right:10px;font-size:10px;padding:1px 6px;border-radius:5px;border:1px solid rgba(255,255,255,.25);color:var(--muted)}
.how{list-style:none;display:flex;gap:6px;margin:12px 0 4px}
.how li{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:12px;background:var(--card);border:1px solid rgba(255,184,107,.28);text-align:center;font-size:12px;line-height:1.45;color:#ffe6cf}
.how b{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#ffc46b,#ff7f5c);color:#2b140c;font-size:12.5px;display:flex;align-items:center;justify-content:center}
.sub2.one{font-size:13px;padding:8px 10px;border-radius:10px;background:rgba(255,184,107,.08)}
.board{margin:12px 0;padding:10px 12px;border-radius:14px;background:var(--card);border:1px solid rgba(255,184,107,.25);font-size:13px}
.board .bh{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;margin-bottom:6px}
.board .bs{display:flex;justify-content:space-around;align-items:baseline;font-size:14px}.board .bs b{font-size:24px;color:var(--gold);margin-left:4px}
.board .br{display:flex;gap:6px;margin-top:8px}.board .br span{flex:1;text-align:center;padding:4px 2px;border-radius:8px;background:rgba(255,255,255,.04);font-size:11px;color:var(--muted)}.board .br span.d{color:#ffe6cf;background:rgba(255,184,107,.12)}
.vs{margin:16px 0 4px;padding:18px 14px 12px;border-radius:20px;background:linear-gradient(160deg,#3a2419,#1d1517 60%);border:1px solid rgba(255,184,107,.5);box-shadow:0 12px 34px rgba(0,0,0,.45);text-align:center;animation:in .5s}
.vs-h{font-size:26px;font-weight:800;letter-spacing:.2em;background:linear-gradient(135deg,#ffd27a,#ff7f5c);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-row{display:flex;align-items:center;margin:14px 0 8px}.vs-x{font-weight:800;color:var(--rose);font-size:18px;padding:0 6px}
.vs-p{flex:1;padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.05)}.vs-p.win{background:rgba(255,184,107,.16);outline:1px solid var(--gold)}
.vs-p .n{font-size:15px;color:#ffe6cf}.vs-p .s{font-size:40px;font-weight:800;color:var(--gold);line-height:1.15}.vs-p .c{font-size:11px;color:var(--muted)}.vs-p .crown{font-size:18px;height:22px}
.vs-v{font-size:17px;font-weight:700;color:#fff;margin:8px 0}
.vs-l{list-style:none;font-size:12.5px;color:var(--muted);text-align:left;margin:8px 4px}.vs-l li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.08)}.vs-l li b{color:#ffe6cf}
.vs-f{font-size:11px;color:rgba(255,255,255,.35);margin-top:8px;letter-spacing:.1em}
/* reply button always visible on the final screen */
#s-final{padding-bottom:96px}
#replyBtn{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));width:min(92vw,440px);z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.45)}
#replyBtn[hidden]{display:none!important}
/* writer view (creator key) */
.privbox{margin:14px 0 6px;padding:12px;border-radius:14px;background:rgba(143,209,158,.08);border:1px solid rgba(143,209,158,.45)}
.privbox .ph{font-size:14px;font-weight:700;color:#bfe9c8}.privbox p{font-size:12.5px;color:#e8dccb;line-height:1.6;margin:4px 0}.privbox .linkbox{margin:8px 0 4px}
.mine{margin:8px 0;padding:10px 12px;border-radius:14px;background:var(--card);border:1px solid rgba(255,184,107,.3)}.mine .mh{font-size:13px;color:var(--gold);margin-bottom:4px}
.mine a{display:flex;justify-content:space-between;gap:8px;padding:7px 2px;border-top:1px dashed rgba(255,255,255,.08);color:var(--ink);text-decoration:none;font-size:13px}.mine a span{color:var(--muted);flex:0 0 auto}.mine a span.ok{color:#8fd19e}
.waitbox{text-align:center;margin:8px 0;padding:6px 12px 10px;border-radius:16px;background:var(--card);border:1px solid rgba(255,184,107,.25)}.waitbox .env{margin:10px auto 8px}.waitbox .wt{font-size:17px;color:#ffd9b0;font-weight:700}
.wlines{margin:10px 0}.wl{padding:11px 12px;margin:8px 0;border-radius:14px;background:var(--card);border:1px solid rgba(255,184,107,.25);font-size:13px;line-height:1.6}
.wl .wh{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.wl .wh b{font-weight:700}.wl .wh b.ok{color:#8fd19e}.wl .wh b.no{color:var(--rose)}.wl .wh b.pd{color:var(--muted)}
.wl .wt2{font-size:15px;color:var(--gold);margin:4px 0}.wl .ww{color:#e8dccb}.wl .ww i{font-style:normal;color:#ffb3bf;text-decoration:line-through}.wl .wp{color:var(--muted);font-size:12px;margin-top:2px}
#s-writer .twist{animation-delay:.2s}
.netbar{position:fixed;top:0;left:0;right:0;z-index:90;text-align:center;font-size:13px;padding:7px;background:#8a3346;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.waitbox .online{font-size:13px;color:#e8dccb;margin:4px 0}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6b5a55;margin-right:6px;vertical-align:1px}.dot.on{background:#5fd27a;box-shadow:0 0 6px #5fd27a}
.foot{text-align:center;font-size:11px;color:rgba(255,255,255,.35);padding:6px 16px calc(12px + env(safe-area-inset-bottom))}

/* court-tip en */
html.lang-en body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}html.lang-en .score::after{content:"pts";font-size:16px;margin-left:5px}
.tipsheet{--tip-bg:#1d1416}