/* RAGANA Trace (v55): the third game under /play/. Scoped to .tr; generic names (btn, chip, row) carry a tr- prefix so the site styles do not clash. */
.tr{--paper:#fbfaf6;--gold2:#d8b45a;--card:#15171b;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;max-width:1180px;margin:0 auto;padding:0 34px clamp(60px,9vw,110px);display:flex;flex-direction:column;gap:30px}
.tr [hidden]{display:none!important}
.tr .lbl{font:400 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.tr .lbl.gold{color:var(--gold)}
.tr-btn{font:400 12px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;border-radius:100px;padding:13px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.tr-btn:hover{background:#000;color:var(--paper)}
.tr-btn.ghost{background:transparent;color:var(--ink)}
.tr-btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.tr-btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tr-btn.light:hover{background:var(--gold2);border-color:var(--gold2);color:var(--ink)}
.tr-btn.line{background:transparent;color:var(--paper);border-color:rgba(251,250,246,.45)}
.tr-btn.line:hover{border-color:var(--gold2);color:var(--gold2)}
.tr-chip{font:400 12px/1 var(--sans);letter-spacing:.08em;border-radius:100px;padding:10px 16px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;text-decoration:none;display:inline-block}
.tr-chip:hover{border-color:var(--gold)}
.tr-btn:focus-visible,.tr-chip:focus-visible,.tr .tile:focus-visible,.tr .toggle:focus-within{outline:2px solid var(--gold);outline-offset:3px}
.tr-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tr .stage{width:100%;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 48px;align-items:start}
.tr .cardwrap{justify-self:start;position:relative;border-radius:3px;box-shadow:0 2px 6px rgba(38,32,20,.10),0 22px 44px rgba(38,32,20,.22);background:var(--card);max-width:100%;overflow:hidden}
.tr #cv{display:block;touch-action:none;cursor:pointer;max-width:100%}
.tr .cap{position:absolute;left:0;right:0;top:14px;text-align:center;font:400 10px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:rgba(216,180,90,.85);pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.tr .say{position:absolute;left:0;right:0;bottom:14px;padding:0 14px;text-align:center;font:italic 17px/1.3 var(--serif);color:rgba(251,250,246,.92);pointer-events:none;transition:opacity .6s var(--ease);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.tr .done{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;padding:70px 26px 22px;background:linear-gradient(to top,rgba(14,15,18,.96) 0,rgba(14,15,18,.9) 62%,rgba(14,15,18,0) 100%);animation:trup 1s var(--ease) both}
.tr .done h2{font:400 clamp(22px,3.4vw,30px)/1.15 var(--serif);color:var(--paper);margin:0}
.tr .done .msg{font:italic 16px/1.4 var(--serif);color:rgba(251,250,246,.86);margin:0}
.tr .done .under{font:400 13px/1.4 var(--sans);color:rgba(243,220,149,.9);margin:0}
.tr .done .meta{margin:0 0 8px;font:400 13px/1.5 var(--sans);color:rgba(251,250,246,.62)}
.tr .done .tr-btn{padding:11px 16px}
@keyframes trup{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.tr .side{display:flex;flex-direction:column;gap:20px;min-width:0}
.tr .now h2{font:400 28px/1.15 var(--serif);margin:4px 0 2px}
.tr .now p{margin:0;color:var(--dim);font-size:15px;line-height:1.6}
.tr .now a{color:var(--dim)}
.tr .stats{display:flex;gap:26px;font:400 13px/1.3 var(--sans);color:var(--dim);font-variant-numeric:tabular-nums}
.tr .stats b{display:block;font:400 24px/1.1 var(--serif);color:var(--ink)}
.tr .breath{display:flex;align-items:center;gap:18px;padding:14px 18px;background:var(--bg2);border-radius:2px}
.tr .orb{width:56px;height:56px;flex:none;display:grid;place-items:center}
.tr .orb i{display:block;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f3dc95,#c9a24a 55%,#816625);transform:scale(.45);opacity:.85}
.tr .orb.on i{animation:trbreathe 10s infinite}
@keyframes trbreathe{0%{transform:scale(.45)}40%{transform:scale(1)}100%{transform:scale(.45)}}
.tr .breath .t{font:400 21px/1.15 var(--serif)}
.tr .breath .s{font:400 13px/1.4 var(--sans);color:var(--dim)}
.tr .note{font:400 14px/1.6 var(--sans);color:var(--dim);margin:0}
.tr .slow{font:400 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);min-height:16px}
.tr .toggle{display:flex;align-items:center;gap:10px;font:400 14px/1.3 var(--sans);color:var(--dim);cursor:pointer}
.tr .toggle input{width:18px;height:18px;accent-color:var(--gold)}
/* shelf */
.tr .shelf{display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--line);padding-top:26px}
.tr .shelf .head{display:flex;justify-content:space-between;align-items:end;gap:12px 24px;flex-wrap:wrap}
.tr .shelf h3{font:400 28px/1.15 var(--serif);margin:4px 0 0}
.tr .shelf .gift{font:400 14px/1.5 var(--sans);color:var(--dim);margin:0;max-width:46ch}
.tr .tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.tr .tile{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-width:0}
.tr .tile canvas{width:100%;height:auto;aspect-ratio:1;display:block;border-radius:2px;box-shadow:0 2px 6px rgba(38,32,20,.10),0 22px 44px rgba(38,32,20,.22);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
@media(hover:hover){.tr .tile:hover canvas{transform:translateY(-6px);box-shadow:0 4px 10px rgba(38,32,20,.12),0 32px 60px rgba(38,32,20,.26)}}
.tr .tile .tt{font:400 15px/1.25 var(--serif)}
.tr .tile .tc{font:400 12px/1.35 var(--sans);color:var(--dim)}
.tr .tile .badge{font:400 9px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);min-height:9px}
.tr .tile[aria-current="true"] canvas{outline:2px solid var(--gold);outline-offset:3px}
.tr .gform{display:flex;flex-direction:column;gap:8px;max-width:460px}
.tr .gform input[type=email]{font:400 15px/1.2 var(--sans);padding:12px 16px;border:1px solid var(--line);border-radius:100px;background:var(--paper);color:var(--ink);min-width:0;flex:1}
.tr .gform .ok{font:400 13px/1.5 var(--sans);color:var(--gold);margin:0}
.tr .gform .ok.err{color:#9c3b2c}
.tr .gform .priv{font:400 12px/1.5 var(--sans);color:var(--faint);margin:0}
.tr .gform .priv a{color:var(--faint)}
/* take it home */
.tr .home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;border-top:1px solid var(--line);padding-top:26px;align-items:start}
.tr .home h3{font:400 26px/1.15 var(--serif);margin:6px 0 10px}
.tr .buy{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.tr .buy .tr-btn{white-space:normal;text-align:left}
.tr .buy .tr-btn>span:last-child{white-space:nowrap}
.tr .others{display:flex;flex-direction:column;gap:10px}
.tr .others a{display:block;padding:16px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font:400 20px/1.3 var(--serif)}
.tr .others a:last-child{border-bottom:1px solid var(--line)}
.tr .others a small{display:block;font:400 13px/1.4 var(--sans);color:var(--dim)}
.tr .others a:hover{color:var(--gold)}
@media (max-width:980px){.tr .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.tr .stage,.tr .home{grid-template-columns:minmax(0,1fr)}.tr .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.tr{padding-left:22px;padding-right:22px}.tr .cardwrap{justify-self:stretch}.tr .done{position:relative;background:var(--card);padding:20px 20px 22px;animation:none}.tr .done .tr-row{gap:6px}}
@media (max-width:520px){.tr .stats{gap:18px}.tr .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tr .done{padding:18px 18px 16px}.tr .done .msg{font-size:14px}}
@media (prefers-reduced-motion:reduce){.tr *{animation:none!important;transition:none!important}}