/* Tree of Life — styles.css */
:root{
  --bg:#050507; --au:#d8b36a; --au2:#f4dca4; --red:#b03434; --red2:#e25555;
  --ink:#e3ddd0; --dim:#8a8273; --edge:rgba(216,179,106,.25); --edge2:rgba(216,179,106,.45);
  --pane:rgba(10,9,8,.88);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);font-family:Inter,system-ui,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none}
canvas#gl{position:fixed;inset:0;display:block;pointer-events:none;filter:brightness(.65) saturate(.85)}
#fx{position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(0,0,0,.66) 100%);}

/* ornate gold-cornered pane */
.pane{position:relative;background:var(--pane);border:1px solid var(--edge);box-shadow:0 12px 40px rgba(0,0,0,.7)}
.pane::before,.pane::after{content:"";position:absolute;width:10px;height:10px;border-color:var(--au);border-style:solid;pointer-events:none}
.pane::before{top:-1px;left:-1px;border-width:1.5px 0 0 1.5px}
.pane::after{bottom:-1px;right:-1px;border-width:0 1.5px 1.5px 0}
.rule{height:1px;background:linear-gradient(90deg,var(--au),rgba(216,179,106,.05));margin:8px 0}

/* ============ TOP BAR ============ */
#top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:stretch;gap:10px;padding:10px 14px;height:78px}
#top>*{height:56px}
#realmtabs{flex:1 1 0;min-width:120px;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent)}
#realmtabs::-webkit-scrollbar{display:none}
.rtab{flex:none;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;cursor:pointer;
  background:var(--pane);border:1px solid var(--edge);color:var(--dim);transition:all .18s;position:relative}
.rtab:hover{color:var(--au2);border-color:var(--edge2)}
.rtab.act{color:#0d0a05;background:linear-gradient(180deg,var(--au2),var(--au));border-color:var(--au2);box-shadow:0 0 16px rgba(216,179,106,.5)}
.rtab .rp{position:absolute;left:3px;right:3px;bottom:2px;height:2px;background:rgba(255,255,255,.12)}
.rtab .rp i{display:block;height:100%;background:var(--au);box-shadow:0 0 4px var(--au)}
.rtab.act .rp i{background:#0d0a05;box-shadow:none}
.navarr{flex:none;width:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
  background:var(--pane);border:1px solid var(--edge);color:var(--dim);transition:all .18s;gap:1px}
.navarr .ar{font-size:24px;line-height:.9;color:var(--au);transition:transform .18s}
.navarr .ak{font-family:Cinzel,serif;font-size:8.5px;font-weight:700;letter-spacing:1px;color:var(--dim);
  border:1px solid rgba(216,179,106,.3);padding:1px 5px;line-height:1.3}
.navarr:hover{border-color:var(--au);box-shadow:0 0 14px rgba(216,179,106,.25)}
.navarr:hover .ar{color:var(--au2);transform:scale(1.2)}
.navarr:hover .ak{color:var(--au2)}
.navarr:active .ar{transform:scale(.95)}
#ptsplate{flex:none;text-align:center;padding:5px 22px;display:flex;flex-direction:column;justify-content:center}
#ptsplate .k{font-family:Cinzel,serif;font-size:9px;letter-spacing:2.5px;color:var(--dim);text-transform:uppercase}
#ptsplate .v{font-family:Cinzel,serif;font-weight:900;font-size:22px;color:var(--au2);line-height:1.05;text-shadow:0 0 14px rgba(216,179,106,.5)}
#searchwrap{position:relative;flex:none;width:min(280px,22vw);display:flex;align-items:center}
#search{width:100%;height:100%;background:var(--pane);border:1px solid var(--edge);color:var(--ink);font-family:Inter,sans-serif;font-weight:500;font-size:14px;padding:0 12px 0 34px;outline:none}
#search:focus{border-color:var(--au);box-shadow:0 0 14px rgba(216,179,106,.25)}
#searchwrap::before{content:"⌕";position:absolute;left:11px;top:50%;transform:translateY(-52%);color:var(--au);font-size:16px;pointer-events:none;z-index:1}
#results{position:absolute;top:calc(100% + 7px);left:0;right:0;max-height:min(420px,58vh);overflow:auto;display:none;z-index:30;
  background:var(--pane);border:1px solid var(--edge);scrollbar-width:thin;scrollbar-color:var(--edge2) transparent}
#results .res{padding:9px 12px;cursor:pointer;display:flex;gap:9px;align-items:baseline;border-bottom:1px solid rgba(216,179,106,.08)}
#results .res:hover{background:rgba(216,179,106,.1)}
#results .res .nm{font-weight:600;font-size:14px}
#results .res .path{margin-left:auto;font-size:9px;color:var(--dim);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}
.btn{font-family:Cinzel,serif;font-weight:700;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);
  background:var(--pane);border:1px solid var(--edge);padding:0 15px;cursor:pointer;transition:all .2s;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;flex:none}
.btn:hover{border-color:var(--au);color:var(--au2);box-shadow:0 0 12px rgba(216,179,106,.25)}
.btn.warn:hover{border-color:var(--red2);color:#f0a0a0;box-shadow:0 0 12px rgba(226,85,85,.3)}

/* ============ MAIN LAYOUT ============ */
#main{position:fixed;top:88px;bottom:46px;left:14px;right:14px;z-index:10;display:flex;gap:12px}
#left{width:312px;flex:none;display:flex;flex-direction:column;gap:10px;min-height:0}
/* discipline list */
#groups{width:212px;flex:none;display:flex;flex-direction:column;overflow:hidden}
#groups .gh{font-family:Cinzel,serif;font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--au);text-transform:uppercase;padding:12px 14px;border-bottom:1px solid var(--edge)}
#glist{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--edge2) transparent}
.gitem{padding:10px 14px;cursor:pointer;font-weight:600;font-size:14px;letter-spacing:.4px;color:var(--dim);border-left:2px solid transparent;transition:all .15s}
.gitem:hover{color:var(--ink);background:rgba(216,179,106,.06)}
.gitem.act{color:var(--au2);border-left-color:var(--au);background:rgba(216,179,106,.1)}
.gitem .gp{display:block;font-family:Cinzel,serif;font-size:8.5px;letter-spacing:1px;color:var(--dim);margin-top:1px}

/* board */
#board{flex:1;min-width:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--edge2) transparent;padding:22px 28px 90px}
.bsec{margin-bottom:30px}
.bsechead{display:flex;align-items:baseline;gap:14px;font-family:Cinzel,serif;font-weight:700;font-size:13px;letter-spacing:3.5px;color:var(--au2);text-transform:uppercase;margin:4px 0 20px;position:sticky;left:0}
.bsechead .sp{font-size:9.5px;color:var(--dim);letter-spacing:1.5px}
.bsechead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--edge2),transparent);transform:translateY(-4px)}
.brow{display:flex;align-items:center;margin-bottom:22px;min-width:max-content}
.blabel{width:212px;flex:none;text-align:right;padding-right:26px}
.blabel .bn{font-weight:700;font-size:15px;letter-spacing:.4px;color:var(--ink);line-height:1.25}
.blabel .bp{font-family:Cinzel,serif;font-size:10px;color:var(--au);letter-spacing:1.2px;margin-top:2px}
.blabel.done .bn{color:var(--au2)}
.bnodes{display:flex;align-items:center}
.nw{position:relative;width:62px;height:62px;margin-right:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.nw:last-child{margin-right:0}
.nw+.nw::before{content:"";position:absolute;left:-34px;top:50%;width:34px;height:2px;transform:translateY(-50%);background:#2e2a22}
.nw.cu+.nw::before,.nw.cu+.nw.ca::before{background:linear-gradient(90deg,var(--au),#6a5526)}
.nw.cu+.nw.cu::before{background:var(--au);box-shadow:0 0 6px rgba(216,179,106,.6)}
.dia{width:46px;height:46px;transform:rotate(45deg);display:flex;align-items:center;justify-content:center;border:1.5px solid;transition:all .15s;background:#0c0b09}
.dia span{transform:rotate(-45deg);font-family:Cinzel,serif;font-weight:700;font-size:16px;line-height:1}
.nw.l .dia{border-color:#3b372d}
.nw.l .dia span{color:#5e584a;font-size:13px}
.nw.a .dia{border-color:var(--au);animation:diap 2.2s ease-in-out infinite}
.nw.a .dia span{color:var(--au2)}
@keyframes diap{0%,100%{box-shadow:0 0 5px rgba(216,179,106,.25)}50%{box-shadow:0 0 16px rgba(216,179,106,.75)}}
.nw.u .dia{border-color:var(--au2);background:linear-gradient(135deg,var(--au2),var(--au));box-shadow:0 0 12px rgba(216,179,106,.45)}
.nw.u .dia span{color:#171005}
.nw:hover .dia{transform:rotate(45deg) scale(1.12)}
.nw.sel .dia{outline:2px solid #fff;outline-offset:3px;transform:rotate(45deg) scale(1.14);box-shadow:0 0 22px rgba(255,255,255,.35)}
.nw .rz{position:absolute;top:-3px;right:-1px;font-size:10px;color:var(--au2);text-shadow:0 0 6px var(--au)}

/* ============ RIGHT SHEET ============ */
#sheet{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--edge2) transparent}
.sec{padding:13px 16px}
#rname{font-family:Cinzel,serif;font-weight:900;font-size:22px;color:#fff;letter-spacing:2px;text-align:center;line-height:1.2}
#rglyph{text-align:center;font-size:24px;margin-bottom:2px}
#rsub{text-align:center;font-family:Cinzel,serif;font-size:8.5px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-top:3px}
.srow{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:13.5px}
.srow .k{color:var(--dim);letter-spacing:1px;text-transform:uppercase;font-size:10.5px;font-weight:600}
.srow .v{font-family:Cinzel,serif;font-weight:700;font-size:15px;color:var(--ink)}
.srow .v.gold{color:var(--au2)}
.xpbar{height:7px;background:#1a120f;border:1px solid rgba(176,52,52,.5);margin:6px 0 2px;overflow:hidden}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#7e2424,var(--red2));box-shadow:0 0 8px rgba(226,85,85,.5);transition:width .4s}
.sechead{font-family:Cinzel,serif;font-size:9.5px;font-weight:700;letter-spacing:2.5px;color:var(--au);text-transform:uppercase;margin-bottom:6px}
#radar{display:block;margin:2px auto 0}
/* board legend */
#blegend{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin:0 0 18px;padding:10px 14px;
  border:1px solid rgba(216,179,106,.16);background:rgba(10,9,8,.6);font-size:12.5px;color:var(--dim);letter-spacing:.3px}
#blegend .lgd{display:inline-block;width:11px;height:11px;transform:rotate(45deg);margin-right:7px;vertical-align:-1px;border:1.5px solid}
#blegend .lgd.a{border-color:var(--au);box-shadow:0 0 6px rgba(216,179,106,.6)}
#blegend .lgd.u{border-color:var(--au2);background:linear-gradient(135deg,var(--au2),var(--au))}
#blegend .lgd.l{border-color:#3b372d}
/* level meaning line on the card */
#card .clvl{font-size:13.5px;line-height:1.5;color:var(--ink);margin-bottom:10px;padding:8px 11px;
  background:rgba(216,179,106,.07);border-left:2px solid var(--au)}
#card .clvl b{color:var(--au2);font-weight:600}

/* skill card — docked at the bottom of the left column */
#card{flex:none;padding:16px 18px;border-color:var(--edge2);
  box-shadow:0 14px 40px rgba(0,0,0,.8), 0 0 24px rgba(216,179,106,.12);background:rgba(8,7,6,.96)}
#card.empty{opacity:.8}
#card .ceye{font-family:Cinzel,serif;font-size:10px;font-weight:700;letter-spacing:2.5px;margin-bottom:7px}
#card .ceye.a{color:#9ef0b8}#card .ceye.l{color:#9a937f}#card .ceye.u{color:var(--au2)}
#card .cpos{font-size:13px;color:var(--dim);margin-bottom:10px}
#card .cpos b{color:var(--ink);font-weight:600}
/* life mastery slider */
.lifebar{height:9px;background:#16130d;border:1px solid rgba(216,179,106,.3);margin:7px 0 3px;overflow:hidden;position:relative}
.lifebar i{display:block;height:100%;background:linear-gradient(90deg,#8a6420,var(--au),var(--au2));box-shadow:0 0 10px var(--au);transition:width .5s}
.lifebar em{position:absolute;right:5px;top:-1px;font-style:normal;font-family:Cinzel,serif;font-size:8px;letter-spacing:1px;color:var(--au2)}
#card .cn{font-family:Cinzel,serif;font-weight:700;font-size:21px;color:#fff;line-height:1.3}
#card .cb{font-size:11.5px;letter-spacing:1.6px;color:var(--dim);text-transform:uppercase;margin:4px 0 10px}
#card .cf{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;color:var(--ink);line-height:1.5;margin-bottom:11px}
#card .cm{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.chip{font-family:Cinzel,serif;font-size:10px;font-weight:700;letter-spacing:1.2px;padding:5px 10px;border:1px solid var(--edge);color:var(--dim);white-space:nowrap}
.chip.gold{color:var(--au2);border-color:var(--edge2)}
.chip.res{color:var(--au2);border-color:var(--edge2);cursor:pointer}
.chip.res:hover{background:rgba(216,179,106,.12)}
#unbtn{width:100%;font-family:Cinzel,serif;font-weight:900;font-size:13.5px;letter-spacing:2px;padding:15px 10px;line-height:1.4;color:#171005;cursor:pointer;border:none;
  background:linear-gradient(180deg,var(--au2),var(--au));box-shadow:0 0 18px rgba(216,179,106,.35);transition:all .15s}
#unbtn:hover{box-shadow:0 0 28px rgba(216,179,106,.6);transform:translateY(-1px)}
#unbtn:disabled{background:#27241d;color:#6a6457;cursor:not-allowed;box-shadow:none;transform:none}
#cardempty{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--dim);text-align:center;padding:14px 0}

/* ============ HINTS BAR ============ */
#hints{position:fixed;bottom:0;left:0;right:0;z-index:15;display:flex;justify-content:center;gap:26px;padding:11px;font-size:11.5px;letter-spacing:1.5px;color:var(--dim);text-transform:uppercase;font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}
#hints b{font-family:Cinzel,serif;color:var(--au2);border:1px solid var(--edge);padding:1px 6px;font-size:10px;margin-right:5px}

/* toasts / levelfx */
#toasts{position:fixed;bottom:54px;left:50%;transform:translateX(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--pane);border:1px solid var(--edge);padding:9px 22px;font-size:14px;font-weight:600;letter-spacing:.5px;
  animation:toastin .3s ease, toastout .5s ease 2.6s forwards;max-width:84vw;text-align:center}
.toast.gold{border-color:var(--edge2);color:var(--au2);box-shadow:0 0 20px rgba(216,179,106,.2)}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}to{opacity:1}}
@keyframes toastout{to{opacity:0;transform:translateY(-8px)}}
#levelfx{position:fixed;inset:0;z-index:45;pointer-events:none;display:none;align-items:center;justify-content:center;flex-direction:column}
#levelfx .ring{font-family:Cinzel,serif;font-weight:900;font-size:clamp(34px,6vw,58px);letter-spacing:12px;
  background:linear-gradient(90deg,var(--au2),#fff,var(--au));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(216,179,106,.8));animation:lvlpop 1.7s ease forwards}
#levelfx .sub{font-size:12px;letter-spacing:5px;color:var(--au2);text-transform:uppercase;margin-top:8px;animation:lvlpop 1.7s ease forwards}
@keyframes lvlpop{0%{opacity:0;transform:scale(.7)}15%{opacity:1;transform:scale(1.05)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}

/* intro */
#intro{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;
  background:radial-gradient(ellipse at 50% 60%,rgba(5,5,7,.4),rgba(2,2,4,.95) 80%);transition:opacity 1s ease}
#intro h1{font-family:Cinzel,serif;font-weight:900;font-size:clamp(38px,8vw,90px);letter-spacing:clamp(8px,2vw,22px);color:var(--au2);
  text-shadow:0 0 40px rgba(216,179,106,.5);animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{text-shadow:0 0 26px rgba(216,179,106,.4)}50%{text-shadow:0 0 56px rgba(216,179,106,.75)}}
#intro .tag{font-family:Cinzel,serif;font-size:clamp(11px,1.6vw,15px);letter-spacing:5px;color:var(--ink);margin:16px 28px 6px;text-transform:uppercase}
#intro p{max-width:580px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(15px,2vw,19px);color:var(--dim);margin:10px 26px 34px;line-height:1.6}
#begin{font-family:Cinzel,serif;font-weight:700;font-size:14px;letter-spacing:5px;padding:15px 50px;color:var(--au2);cursor:pointer;text-transform:uppercase;
  background:transparent;border:1px solid var(--au);box-shadow:0 0 26px rgba(216,179,106,.2), inset 0 0 18px rgba(216,179,106,.06);transition:all .25s}
#begin:hover{box-shadow:0 0 44px rgba(216,179,106,.45);color:#fff;background:rgba(216,179,106,.08)}
#intro .cnt{margin-top:22px;font-family:Cinzel,serif;font-size:9px;letter-spacing:4px;color:var(--dim);text-transform:uppercase}
#intro .cnt b{color:var(--au2)}

#fail{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(2,2,4,.97);text-align:center;padding:30px}
#fail .in{max-width:520px;font-size:16px;line-height:1.7}
#fail .in b{color:var(--au2)}

/* brand plate */
#brand{flex:none;display:flex;align-items:center;gap:11px;padding:0 14px}
#brand img,#brandicon{width:36px;height:36px;max-width:36px;max-height:36px;flex:none;filter:drop-shadow(0 0 8px rgba(216,179,106,.35))}
#brand{overflow:hidden;max-width:280px}
#brandtxt span{display:block}
#brandtxt small{display:block;margin-top:1px}
#brandtxt{display:flex;flex-direction:column;justify-content:center}
#brand span{font-family:Cinzel,serif;font-weight:900;font-size:14px;letter-spacing:3px;
  background:linear-gradient(90deg,var(--au2),var(--au));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(216,179,106,.35));white-space:nowrap}
#brand small{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);white-space:nowrap}
@media (max-width:1500px){#brand small{display:none}}
@media (max-width:1180px){#brand{display:none}}

/* ============ MASTER PROFILE ============ */
#profile{position:fixed;inset:0;z-index:48;display:none;align-items:center;justify-content:center;background:rgba(2,2,4,.8);backdrop-filter:blur(6px)}
#profile.open{display:flex}
#pwrap{width:min(1100px,95vw);max-height:90vh;overflow-y:auto;padding:28px 32px;scrollbar-width:thin;scrollbar-color:var(--edge2) transparent}
#phead{display:flex;align-items:baseline;gap:16px;margin-bottom:4px}
#phead .pt{font-family:Cinzel,serif;font-weight:900;font-size:26px;letter-spacing:4px;color:var(--au2)}
#phead .ps{font-family:Cinzel,serif;font-size:10px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
#phead .px{margin-left:auto;cursor:pointer;color:var(--dim);font-size:20px;padding:4px 10px}
#phead .px:hover{color:#fff}
#pgrid{display:grid;grid-template-columns:330px 1fr;gap:28px;margin-top:14px}
.pstat{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px dotted rgba(216,179,106,.15)}
.pstat .k{color:var(--dim);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600}
.pstat .v{font-family:Cinzel,serif;font-weight:700;font-size:17px;color:var(--au2)}
#prealms{display:flex;flex-direction:column}
.prow{display:flex;align-items:center;gap:10px;padding:5.5px 6px;cursor:pointer}
.prow:hover{background:rgba(216,179,106,.08)}
.prow .pg{width:26px;text-align:center;font-size:14px}
.prow .pn{width:172px;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .pb{flex:1;height:7px;background:#16130d;border:1px solid rgba(216,179,106,.18);overflow:hidden}
.prow .pb i{display:block;height:100%;box-shadow:0 0 6px currentColor}
.prow .pv{font-family:Cinzel,serif;font-size:10px;color:var(--dim);width:84px;text-align:right}
#precent{grid-column:1/-1;margin-top:6px}
#precent .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
#precent .chips span{font-size:12.5px;font-weight:600;padding:5px 12px;border:1px solid var(--edge);color:var(--ink)}
#precent .chips span b{color:var(--au2);font-family:Cinzel,serif;font-size:10px;margin-right:6px}

/* ============ TUTORIAL ============ */
#tut{position:fixed;inset:0;z-index:70;display:none}
#tut.open{display:block}
#tutspot{position:absolute;border:2px solid var(--au2);box-shadow:0 0 0 9999px rgba(0,0,0,.78), 0 0 30px rgba(216,179,106,.5);transition:all .35s cubic-bezier(.2,.9,.3,1);pointer-events:none}
#tutbox{position:absolute;width:min(320px,calc(100vw - 24px));padding:18px 20px;transition:all .35s cubic-bezier(.2,.9,.3,1)}
#tutbox .tt{font-family:Cinzel,serif;font-weight:700;font-size:15px;color:var(--au2);letter-spacing:1.5px;margin-bottom:7px}
#tutbox .tx{font-size:14.5px;line-height:1.55;color:var(--ink);margin-bottom:14px}
#tutbox .tbtns{display:flex;gap:10px;align-items:center}
#tutbox .tstep{margin-left:auto;font-family:Cinzel,serif;font-size:9px;letter-spacing:2px;color:var(--dim)}

@media (max-width:1500px){
  #brandtxt small{display:none}
}
@media (max-width:1380px){
  .btn .bl{display:none}
  .btn{padding:0 13px}
  #searchwrap{width:min(220px,20vw)}
  #ptsplate{padding:5px 14px}
}
@media (max-width:1240px){
  #left{width:272px}
  #groups{width:180px}
  .blabel{width:150px;padding-right:14px}
  #pgrid{grid-template-columns:1fr}
}
@media (max-width:840px){
  #top{height:auto;flex-wrap:wrap;padding:8px 10px;gap:8px}
  #top>*{height:46px}
  .rtab{width:42px;height:42px;font-size:17px}
  .navarr{width:34px}
  .navarr .ar{font-size:19px}
  #searchwrap{width:100%;order:9;height:42px}
  #ptsplate{padding:3px 12px}
  #ptsplate .v{font-size:18px}
  #ptsplate .k{font-size:8px}
  #main{flex-direction:column;top:170px;bottom:8px;left:8px;right:8px;gap:8px}
  #groups{width:100%;height:auto;flex:none;order:-1}
  #glist{display:flex;overflow-x:auto;overflow-y:hidden}
  .gitem{flex:none;border-left:none;border-bottom:2px solid transparent}
  .gitem.act{border-bottom-color:var(--au)}
  #groups .gh{display:none}
  #left{width:100%;flex:none;max-height:46vh}
  #sheet{max-height:24vh}
  #hints{display:none}
  #card.empty{display:none}
  #board{padding:14px 12px 70px}
  .bsechead{font-size:11px;letter-spacing:2px;margin-bottom:14px}
  #blegend{font-size:11px;gap:12px;padding:8px 10px}
  .brow{margin-bottom:16px}
  .blabel{width:124px;padding-right:10px}
  .blabel .bn{font-size:13px}
  .nw{width:50px;height:50px;margin-right:24px}
  .nw+.nw::before{left:-24px;width:24px}
  .dia{width:37px;height:37px}
  .dia span{font-size:13px}
}
@media (max-width:520px){
  #top{padding:6px 6px;gap:6px}
  .rtab{width:36px;height:36px;font-size:14px}
  .navarr{width:30px}
  .btn{font-size:9px;padding:0 9px;letter-spacing:1px}
  #brand{display:none}
  #ptsplate .k{display:none}
  #main{top:150px}
  #card .cn{font-size:18px}
  #card .cf{font-size:15px}
  #unbtn{font-size:11.5px;letter-spacing:1.2px}
  #pwrap{padding:18px 14px}
  .prow .pn{width:104px;font-size:12px}
  .prow .pv{width:60px;font-size:9px}
  #phead .pt{font-size:19px;letter-spacing:2px}
  #levelfx .ring{letter-spacing:6px}
}