/* Commentland's paper cards: cream paper, warm ink, a red top rule, Fredoka. */
:root { --ink:#2b2320; --soft:#6d625a; --paper:#fbf4e4; --cream:#fff7e6; --line:#e6dcc6; --terra:#dc6a3c; --terra-d:#b04f2a; --field:#1f6f8b; --sun:#f2c94c; --red:#c22e2e; --meadow:#6db63c; --sky:#62c8ef; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; background:var(--sky); color:var(--ink); font:500 15px/1.35 Fredoka,ui-rounded,system-ui,sans-serif; touch-action:none; user-select:none; -webkit-user-select:none; }
#stage,#labels { position:fixed; inset:0; } #stage canvas { display:block; }
#labels { pointer-events:none; overflow:hidden; }
button { font:inherit; color:inherit; cursor:pointer; }
.card,#top,#panel,#find,#hint { background:var(--paper); border-radius:18px; box-shadow:0 3px 0 #d9ccb0,0 12px 28px rgba(22,72,104,.22); }
#top { position:fixed; top:max(12px,env(safe-area-inset-top)); left:12px; width:min(330px,calc(100vw - 24px)); padding:14px; border-top:6px solid var(--red); }
.brand { display:flex; align-items:center; gap:7px; } .brand b { font-size:21px; font-weight:700; flex:1; letter-spacing:-.2px; }
.pill { background:#f8e6aa; color:#7a5a12; font-size:13px; font-weight:600; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.round { width:32px; height:32px; border:0; border-radius:50%; background:var(--line); font-size:15px; display:grid; place-items:center; padding:0; }
#tag { margin:5px 0 8px; color:var(--soft); font-size:14px; } #goal { margin:0 0 5px; font-size:13px; color:var(--soft); }
.bar { height:9px; background:var(--line); border-radius:9px; overflow:hidden; } .bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--sun),var(--terra)); border-radius:9px; transition:width .5s; }
.cta,.btn { display:block; width:100%; text-align:center; text-decoration:none; font-weight:600; font-size:16px; color:#fff; background:var(--terra); border:0; border-radius:14px; padding:12px; box-shadow:0 3px 0 var(--terra-d); margin-top:10px; transition:transform .08s; }
.cta:active,.btn:active { transform:translateY(2px); box-shadow:0 1px 0 var(--terra-d); }
.btn.ghost { background:var(--cream); color:var(--ink); box-shadow:0 3px 0 var(--line),inset 0 0 0 1.5px var(--line); } .btn.field { background:var(--field); box-shadow:0 3px 0 #15536a; }
.link { display:block; margin:9px auto 0; background:none; border:0; color:var(--soft); text-decoration:underline; font-size:13px; }
#find { position:fixed; top:calc(max(12px,env(safe-area-inset-top)) + var(--top,232px)); left:12px; width:min(330px,calc(100vw - 24px)); display:flex; align-items:center; gap:6px; padding:7px 7px 7px 13px; }
#find span { color:var(--terra); font-weight:700; } #find input { flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; color:var(--ink); user-select:text; -webkit-user-select:text; } #find button { width:38px; height:38px; border:0; border-radius:12px; background:var(--terra); }
#modes { position:fixed; left:12px; bottom:max(12px,env(safe-area-inset-bottom)); display:flex; gap:7px; } #modes button { border:0; border-radius:14px; background:var(--paper); padding:9px 13px; font-weight:600; box-shadow:0 3px 0 #d9ccb0; } #modes button.on { background:var(--field); color:#fff; box-shadow:0 3px 0 #15536a; }
#hint { position:fixed; left:12px; bottom:calc(max(12px,env(safe-area-inset-bottom)) + 54px); display:flex; gap:8px; align-items:center; padding:8px 12px; font-size:13px; max-width:330px; } #hint button { border:0; background:none; color:var(--soft); }
#panel { position:fixed; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); width:min(370px,calc(100vw - 24px)); max-height:calc(100vh - 40px); overflow:auto; padding:16px; border-top:6px solid var(--red); touch-action:pan-y; } #panel:empty { display:none; }
.close { position:absolute; top:12px; right:12px; width:30px; height:30px; border:0; border-radius:50%; background:var(--line); }
.who { display:flex; gap:11px; align-items:center; } .tile { width:60px; height:60px; flex:none; border-radius:14px; background:#cdeefa; display:grid; place-items:center; font-size:30px; } .who small { display:block; color:var(--terra-d); font-weight:600; font-size:13px; } .who h2 { margin:0; font-size:23px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:235px; } .new { color:var(--meadow); font-size:13px; font-weight:600; }
#panel p { margin:9px 0 0; color:var(--soft); } #panel p b { color:var(--ink); }
.stats { display:flex; gap:7px; margin-top:11px; } .stats span { flex:1; text-align:center; background:#f8e6aa; color:#7a5a12; font-weight:700; padding:7px 4px; border-radius:12px; } .stats span.streak { background:#fbdccd; color:var(--terra-d); } .stats button { width:40px; border:0; border-radius:12px; background:var(--line); }
.invite { display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:9px; border:0; border-radius:13px; background:#d9f1fb; padding:10px 12px; font-weight:600; } .invite em { font-style:normal; font-size:13px; background:#f8e6aa; color:#7a5a12; padding:2px 8px; border-radius:99px; }
.tabs { display:flex; gap:4px; margin-top:11px; background:var(--line); padding:4px; border-radius:13px; position:relative; } .tabs button { flex:1; border:0; background:none; padding:8px 3px; border-radius:10px; font-weight:600; color:var(--soft); position:relative; } .tabs button.on { background:var(--cream); color:var(--terra-d); } .dot::after { content:""; position:absolute; top:5px; right:12px; width:8px; height:8px; border-radius:50%; background:var(--red); }
.sub { display:flex; gap:5px; margin-top:9px; } .sub button { border:0; background:var(--line); border-radius:99px; padding:5px 12px; font-size:13px; font-weight:600; color:var(--soft); } .sub button.on { background:var(--field); color:#fff; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:9px; } .item { background:var(--cream); border:1.5px solid var(--line); border-radius:13px; padding:7px 5px; text-align:center; font-size:12px; font-weight:600; min-width:0; } .item.on { border-color:var(--terra); } .item.try { border-color:var(--field); } .item .ico { height:40px; margin:0 auto 4px; width:40px; border-radius:11px; display:grid; place-items:center; font-size:21px; background:#d9f1fb; } .item i { display:block; font-style:normal; font-size:9px; letter-spacing:.7px; text-transform:uppercase; color:var(--soft); margin:2px 0 5px; } .item button { width:100%; border:0; border-radius:9px; background:var(--sun); padding:5px 2px; font-weight:700; font-size:13px; box-shadow:0 2px 0 #c9a22e; } .item button.own { background:#d7efc4; box-shadow:0 2px 0 #a9cf8d; }
.slot { margin:11px 0 0; font-weight:600; font-size:13px; }
.letter { position:relative; height:176px; margin-top:11px; border-radius:15px; background:radial-gradient(circle at 50% 55%,#fff7e6,#f8e6aa); display:grid; place-items:center; overflow:hidden; border:0; width:100%; }
.env { position:relative; width:128px; height:88px; background:var(--cream); border-radius:8px; box-shadow:0 5px 0 #e0cfa8,0 12px 18px rgba(120,80,20,.2); } .env::before { content:""; position:absolute; inset:0 0 auto; height:52px; background:var(--line); clip-path:polygon(0 0,100% 0,50% 100%); border-radius:8px 8px 0 0; } .env::after { content:""; position:absolute; left:50%; top:37px; width:26px; height:26px; margin-left:-13px; border-radius:50%; background:var(--red); box-shadow:inset 0 0 0 3px #951f1f; }
.letter.idle .env { animation:bob 2s ease-in-out infinite; } .letter.open .env { animation:shake .8s linear; } @keyframes bob { 50% { transform:translateY(-7px) rotate(-2deg); } } @keyframes shake { 0%,100% { transform:none; } 20%,60% { transform:rotate(-6deg) scale(1.05); } 40%,80% { transform:rotate(6deg) scale(1.1); } }
.rays { position:absolute; inset:-60%; background:repeating-conic-gradient(#f2c94c33 0 12deg,transparent 12deg 24deg); animation:spin 14s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.prize { position:relative; animation:pop .4s cubic-bezier(.3,1.6,.5,1); text-align:center; } .prize .ico { width:92px; height:92px; border-radius:22px; display:grid; place-items:center; font-size:46px; background:#fff; box-shadow:0 4px 0 #e0cfa8; margin:auto; } @keyframes pop { from { transform:scale(.3); opacity:0; } }
.center { text-align:center; } .center h3 { margin:10px 0 0; font-size:20px; font-weight:700; } .rar { font-size:10px; letter-spacing:1px; text-transform:uppercase; background:var(--line); padding:2px 7px; border-radius:99px; color:var(--soft); vertical-align:middle; }
.foot { display:flex; justify-content:space-between; margin-top:12px; padding-top:9px; border-top:1px solid var(--line); font-size:13px; color:var(--soft); } .foot button { border:0; background:none; color:var(--terra-d); font-weight:600; padding:0; }
.row { display:flex; gap:8px; } .row > * { flex:1; }
.tag { position:absolute; transform:translate(-50%,-100%); background:var(--cream); padding:3px 10px; border-radius:99px; font-size:12.5px; font-weight:600; white-space:nowrap; box-shadow:0 2px 0 #d9ccb0; } .tag.me { background:var(--sun); font-size:14px; padding:5px 13px; } .tag.me small { display:block; font-size:11px; font-weight:500; text-align:center; } .tag.shop { background:var(--field); color:#fff; pointer-events:auto; cursor:pointer; box-shadow:0 2px 0 #15536a; }
.say { position:absolute; transform:translate(-50%,-100%); background:#fff; color:var(--ink); padding:4px 10px; border-radius:12px 12px 12px 3px; font-size:12.5px; max-width:170px; box-shadow:0 2px 6px rgba(22,72,104,.25); animation:pop .22s ease-out; }
#toast { position:fixed; top:max(12px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 24px); background:var(--paper); border-top:5px solid var(--red); border-radius:14px; padding:9px 13px; display:flex; gap:11px; align-items:center; z-index:6; box-shadow:0 10px 24px rgba(22,72,104,.28); font-weight:600; } #toast[hidden] { display:none; } #toast b { color:var(--field); } #toast button { border:0; border-radius:10px; background:var(--sun); font-weight:700; padding:5px 11px; }
#help { position:fixed; bottom:max(14px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); background:var(--paper); padding:6px 14px; border-radius:99px; font-size:13px; white-space:nowrap; box-shadow:0 3px 0 #d9ccb0; } #help[hidden] { display:none; }
#stick { position:fixed; left:22px; bottom:84px; width:124px; height:124px; border-radius:50%; background:#fbf4e4aa; box-shadow:inset 0 0 0 3px #fff; } #stick[hidden] { display:none; } #stick i { position:absolute; left:37px; top:37px; width:50px; height:50px; border-radius:50%; background:var(--terra); box-shadow:0 3px 0 var(--terra-d); }
#brake { position:fixed; right:18px; bottom:96px; width:84px; height:84px; border:0; border-radius:50%; background:var(--red); color:#fff; font-weight:700; box-shadow:0 4px 0 #951f1f; } #brake[hidden] { display:none; }
@media (max-width:700px) {
  #top { padding:10px 12px; } #tag,#how,#hint { display:none; } #top .cta { padding:9px; margin-top:8px; font-size:15px; }
  #find { top:calc(max(12px,env(safe-area-inset-top)) + var(--top,150px)); } #find button { width:32px; height:32px; }
  body.sheet #find, body.sheet #modes { display:none; }
  #modes { bottom:auto; top:calc(max(12px,env(safe-area-inset-top)) + var(--top,150px) + 56px); } #modes button { padding:7px 10px; font-size:13px; }
  #panel { left:0; right:0; bottom:0; width:auto; max-height:56vh; border-radius:22px 22px 0 0; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
  #help { display:none; }
}

body.render > *:not(#stage):not(#reel) { display:none !important; }