*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;background:#0c0807;color:#f3e7d0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
:root{--gold:#e2c27a;--gold2:#b8943f;--panel:rgba(22,13,9,.88);--sl:max(env(safe-area-inset-left),10px);--sr:max(env(safe-area-inset-right),10px);--st:max(env(safe-area-inset-top),8px);--sb:max(env(safe-area-inset-bottom),10px)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:disabled{opacity:.35;cursor:default}
#loading{position:fixed;inset:0;background:#0c0807;display:flex;align-items:center;justify-content:center;z-index:50;transition:opacity .6s}
#loading.hide{opacity:0;pointer-events:none}.ld{color:var(--gold);letter-spacing:.2em;font-family:Georgia,serif}
/* menu */
#menu{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:10;background:radial-gradient(circle at 50% 40%,rgba(10,6,4,.35),rgba(10,6,4,.8));padding:var(--st) var(--sr) var(--sb) var(--sl);overflow:auto}
#menu.show{display:flex}
.panel{width:min(440px,100%);margin:auto;background:var(--panel);border:1px solid rgba(226,194,122,.35);border-radius:18px;padding:22px 22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.brand{text-align:center;font-size:11px;letter-spacing:.38em;color:var(--gold2)}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;text-align:center;margin:6px 0 2px;font-size:30px;color:var(--gold);letter-spacing:.02em}
h2{font-family:Georgia,serif;font-weight:400;margin:6px 0 10px;color:var(--gold);font-size:22px}
.tag{text-align:center;margin:0 0 16px;color:#b9a888;font-size:13px}
.hide{display:none!important}
.card{display:block;position:relative;width:100%;text-align:left;margin:0 0 10px;padding:14px 16px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(226,194,122,.25);transition:.15s}
.card:hover,.card:active{border-color:var(--gold);transform:translateY(-1px)}
.card b{display:block;font-size:17px;color:#fff3d6}.card span{font-size:12.5px;color:#b9a888}
.card.dim{opacity:.7}.badge{position:absolute;right:12px;top:12px;font-style:normal;font-size:10px;padding:3px 8px;border-radius:99px;background:var(--gold2);color:#1a0f08;font-weight:700;letter-spacing:.05em}
.link{display:block;margin:8px auto 0;color:#b9a888;font-size:13px;padding:6px 12px}
label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b9a888;margin:12px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{flex:1 1 auto;padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:13.5px}
.chips button.on{background:linear-gradient(180deg,#e2c27a,#b8943f);color:#1a0f08;font-weight:700;border-color:#f0d897}
.primary{width:100%;margin-top:18px;padding:13px;border-radius:11px;background:linear-gradient(180deg,#e9cd87,#b8943f);color:#1a0f08;font-weight:700;font-size:16px;letter-spacing:.03em;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.btns .primary{margin-top:0;width:auto;padding:11px 18px;font-size:14px}
.back{color:var(--gold);padding:2px 0;font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
input{width:100%;padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;font:inherit;user-select:text;-webkit-user-select:text}
.toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px;gap:12px}
.sw{width:46px;height:26px;border-radius:99px;background:#3a2c22;position:relative;flex:none;transition:.2s}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#d8c9ae;transition:.2s}
.sw.on{background:var(--gold2)}.sw.on:after{left:23px;background:#fff}
.note{color:#cdbb99;font-size:14px;line-height:1.5}
/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;display:none;z-index:5}#hud.show{display:block}
#hud>*{pointer-events:auto}
.row{position:absolute;left:var(--sl);right:var(--sr);display:flex;align-items:center;gap:10px}
.row.top{top:calc(var(--st) + 2px)}.row.bottom{bottom:calc(var(--sb) + 2px)}
.row .tbox{margin:0 auto}
.pcard{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 7px;border-radius:14px;background:rgba(18,11,8,.82);border:1px solid rgba(226,194,122,.28);backdrop-filter:blur(8px);min-width:0;transition:.25s}
.pcard.active{border-color:var(--gold);box-shadow:0 0 16px rgba(226,194,122,.3)}
.av{width:44px;height:44px;border-radius:50%;flex:none;border:2px solid rgba(226,194,122,.5)}
.meta{min-width:0}.l1{display:flex;align-items:center;gap:7px;white-space:nowrap}.l2{height:18px;display:flex;gap:6px;align-items:baseline;overflow:hidden}
.name{font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:2ch}.rating{flex:0 0 auto;white-space:nowrap}.rating{font-size:13px;color:#b9a888}.flag svg{width:20px;height:14px;border-radius:2px;display:block}
.caps{font-size:15px;letter-spacing:-2px;color:#d9c9a6;white-space:nowrap}.adv{font-size:12px;color:#8fd19a}
.tbox{font:700 26px ui-monospace,Menlo,Consolas,monospace;padding:8px 22px;border-radius:12px;background:rgba(18,11,8,.82);border:1px solid rgba(226,194,122,.28);min-width:130px;text-align:center;letter-spacing:.04em}
.tbox.low{color:#ff7b6b}.tbox.run{border-color:var(--gold)}
.rt{display:flex;gap:8px;margin-left:auto}
.rt button,.side button{min-width:46px;height:46px;border-radius:12px;background:rgba(18,11,8,.82);border:1px solid rgba(226,194,122,.28);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 10px;font-size:20px}
.rt button i,.side button i{font-style:normal;line-height:1}
.rt button span,.side button span{font-size:11px;color:#d9c9a6}
.rt button:active:not(:disabled),.side button:active:not(:disabled){background:rgba(226,194,122,.35)}
.side{position:absolute;right:var(--sr);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
.side button{width:68px;height:62px;font-size:22px}
#status{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--st) + 70px);padding:5px 14px;border-radius:99px;background:rgba(18,11,8,.85);border:1px solid rgba(226,194,122,.4);font-size:13px;color:var(--gold);opacity:0;transition:.2s;pointer-events:none!important}
#status.on{opacity:1}
#moves,#analysis{position:absolute;left:var(--sl);top:calc(var(--st) + 74px);width:210px;max-height:calc(100% - 180px);background:rgba(18,11,8,.94);border:1px solid rgba(226,194,122,.3);border-radius:12px;display:none;flex-direction:column;backdrop-filter:blur(8px)}
#moves.show,#analysis.show{display:flex}#analysis{width:230px;padding-bottom:12px;left:auto;right:calc(var(--sr) + 80px)}
.mh{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
#movesList{overflow:auto;padding:6px 10px;font-size:14px;min-height:60px}.mv{display:grid;grid-template-columns:26px 1fr 1fr;padding:2px 0;font-variant-numeric:tabular-nums}.mv .n{color:#8b7a5c}.empty{color:#8b7a5c;padding:8px 0}
.mf{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.08)}.mf button{padding:9px 12px;text-align:left;font-size:13px;color:#d9c9a6}
.evbar{height:10px;margin:12px;border-radius:5px;background:#1b1512;border:1px solid rgba(255,255,255,.2);overflow:hidden}.evbar i{display:block;height:100%;width:50%;background:#f1e7d0;transition:width .4s}
#evText{padding:0 12px;font-weight:700;font-size:18px;color:var(--gold)}#evLine{padding:4px 12px 0;font-size:13px;color:#cdbb99;line-height:1.4}
/* modals */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:30;background:rgba(0,0,0,.5);padding:20px}.modal.show{display:flex}
.box{background:var(--panel);border:1px solid rgba(226,194,122,.4);border-radius:16px;padding:20px 22px;max-width:380px;width:100%;text-align:center;backdrop-filter:blur(10px)}
.box h3{margin:0 0 12px;font-family:Georgia,serif;font-weight:400;color:var(--gold);font-size:20px}.box p{color:#cdbb99;margin:0 0 16px;font-size:14px}
.btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.btns button{padding:11px 16px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:14px}.btns .primary{border:0}
#promoOpts{display:flex;gap:10px;justify-content:center}
.pbtn{width:64px;height:64px;font-size:46px;line-height:1;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(226,194,122,.4)}.pbtn.w{color:#f6ecd6}.pbtn.b{color:#e2c27a}
.res h2{font-size:34px;margin:0}#resName{font-size:20px;color:#fff3d6;margin:6px 0}
#toast{position:fixed;left:50%;bottom:calc(var(--sb) + 76px);transform:translate(-50%,10px);background:rgba(20,12,8,.9);border:1px solid rgba(226,194,122,.4);padding:8px 16px;border-radius:99px;font-size:13px;opacity:0;transition:.25s;pointer-events:none;z-index:40}
#toast.show{opacity:1;transform:translate(-50%,0)}
.box.left{text-align:left}
@media (max-width:700px){
  .rating{display:none}
  .tbox{font-size:20px;min-width:96px;padding:6px 12px}.av{width:36px;height:36px}.name{font-size:14px}.pcard{padding:5px 10px 5px 6px;gap:8px}
  .rt button,.side button{min-width:40px;height:40px;padding:0 6px;font-size:17px}.rt button span{display:none}.side button{width:44px;height:44px}.side button span{display:none}.side{gap:6px}
  .rt{gap:5px}.row{gap:6px}
  h1{font-size:25px}.panel{padding:18px 16px}
  .row.bottom .pcard,.row.top .pcard{flex:1 1 auto;max-width:45%}
  .row.bottom{flex-wrap:nowrap}
  .row.bottom .pcard{max-width:38%}
  #moves,#analysis{top:calc(var(--st) + 66px)}#analysis{right:calc(var(--sr) + 52px)}
}
@media (max-width:700px) and (orientation:portrait){.side{flex-direction:row;top:auto;right:auto;left:50%;transform:translateX(-50%);bottom:calc(var(--sb) + 58px);gap:8px}.side button{width:48px;height:46px}#toast{bottom:calc(var(--sb) + 120px)}}
@media (max-width:420px){.rt button{min-width:36px;padding:0 4px}.tbox{min-width:74px;font-size:18px}.name{font-size:13px}.row.bottom .pcard{max-width:34%}}
@media (max-height:520px) and (orientation:landscape){
  .pcard{padding:3px 10px 3px 4px}.av{width:30px;height:30px}.tbox{font-size:17px;padding:4px 10px;min-width:80px}
  .rt button,.side button{height:34px;min-width:34px;font-size:15px}.rt button span,.side button span{display:none}.side button{width:36px;height:34px}.side{gap:4px;flex-direction:column}
  #status{top:calc(var(--st) + 48px)}.name{font-size:13px}.l2{height:14px}
  .panel{padding:12px 16px}h1{font-size:22px;margin:2px 0}.tag{margin-bottom:8px}.card{padding:9px 14px;margin-bottom:6px}
}