/* © 2026 Plot. All rights reserved. r26 UI skin: built only from tokens.css. Loaded after style.css; overrides by cascade order. */
body,button,input,select,textarea{font-family:var(--font)}body{font-size:var(--fs-md);color:var(--ink-900);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.ic{width:var(--icon);height:var(--icon);flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* ---------- header ---------- */
#top{height:calc(var(--toph) + var(--safe-t));padding:var(--safe-t) var(--s3) 0;gap:var(--s2);background:linear-gradient(180deg,var(--brand-900),var(--brand-800));color:#fff;box-shadow:var(--e2);font-size:var(--fs-sm);font-weight:var(--fw-semi)}
#top>b:first-child{font-weight:var(--fw-black);letter-spacing:2px;color:#fff;font-size:var(--fs-md);display:flex;align-items:center;gap:6px}
#top>b:first-child::before{content:"";width:22px;height:22px;border-radius:7px;background:url(/icons/favicon-32.png) center/cover;box-shadow:0 0 0 1px #fff3}
#top>span:not(#who):not(#zl){display:inline-flex;align-items:center;gap:4px;background:#ffffff14;border:1px solid #ffffff1f;border-radius:var(--r-pill);padding:4px 10px;min-height:30px;color:#cfe0ea;font-size:var(--fs-xs);cursor:pointer}
#top b{color:var(--gold-400);font-weight:var(--fw-bold);font-size:var(--fs-sm)}
#top #who{color:#fff}#top #zl{color:#9fb8c8;font-size:var(--fs-xs)}
#top #bMenu{display:none}
.r26 .leaflet-top{top:calc(var(--toph) + var(--safe-t) + 8px)}
.r26 .leaflet-bar{border:0;box-shadow:var(--e2);border-radius:var(--r-md);overflow:hidden}.r26 .leaflet-bar a{width:40px;height:40px;line-height:40px;color:var(--brand-800)}
.r26 .leaflet-control-attribution{font-size:9px;opacity:.7}.r26 .leaflet-bottom{bottom:calc(var(--tabh) + var(--safe-b))}
/* ---------- bottom tab bar ---------- */
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:1400;height:calc(var(--tabh) + var(--safe-b));padding:0 var(--s1) var(--safe-b);display:grid;grid-template-columns:repeat(5,1fr);background:#fffffff2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--ink-200);box-shadow:0 -4px 16px rgba(15,29,39,.08);transition:transform var(--t-med) var(--ease-out)}
#tabs button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tap);margin:0;padding:6px 0;border:0;background:none;color:var(--ink-500);font:var(--fw-bold) 11px var(--font);cursor:pointer}
#tabs button .ic{width:24px;height:24px}#tabs button.on{color:var(--brand-600)}
#tabs button.on::before{content:"";position:absolute;top:4px;width:44px;height:30px;border-radius:var(--r-pill);background:var(--brand-100);z-index:-1;animation:tabpill var(--t-med) var(--ease-spring)}
#tabs .badge{position:absolute;top:4px;left:calc(50% + 6px)}
@keyframes tabpill{from{transform:scaleX(.4);opacity:0}}
html.r26-full #tabs{transform:translateY(110%)}
/* ---------- sheets: #panel and #side sit ABOVE the tab bar ---------- */
#panel,#side,#picker{font-size:var(--fs-md);color:var(--ink-900);background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--e3);padding:0 var(--s4) var(--s4);top:calc(var(--toph) + var(--safe-t) + 10px)}
@media(max-width:600px){
 #panel,#side,#picker{left:0;right:0;width:auto;top:auto;bottom:calc(var(--tabh) + var(--safe-b));border-radius:var(--r-xl) var(--r-xl) 0 0;height:min(68vh,calc(100vh - var(--toph) - var(--tabh) - 40px));max-height:none;box-shadow:0 -8px 30px rgba(8,22,32,.25)}
 #panel.r26-tall,#side.r26-tall{height:calc(100vh - var(--toph) - var(--tabh) - var(--safe-t) - var(--safe-b) - 8px)}
}
#panel::before,#side::before{content:"";display:block;position:sticky;top:0;z-index:3;height:22px;margin:0 calc(-1*var(--s4));background:linear-gradient(var(--surface) 70%,#fff0);
 -webkit-mask:none;touch-action:none}
#panel .r26grab,#side .r26grab{position:sticky;top:6px;z-index:4;display:block;width:40px;height:5px;margin:-16px auto 11px;border-radius:3px;background:var(--ink-300);cursor:grab}
#panel h3,#side h3{font-size:var(--fs-xl);font-weight:var(--fw-black);margin:0 0 var(--s2);line-height:1.2;padding-right:48px;color:var(--ink-900)}
#side>h3:first-of-type{position:sticky;top:20px;z-index:2;background:var(--surface);padding:2px 48px 8px 0;margin-bottom:var(--s2);box-shadow:0 8px 8px -8px rgba(15,29,39,.12)}
#side h4,#panel h4{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);margin:var(--s4) 0 var(--s2);font-weight:var(--fw-bold)}
.r26crumb{display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em;margin:0 0 2px}
.r26crumb .ic{width:14px;height:14px}
/* close buttons: 44px round, consistent spot */
#panel .close,#side .close,#panel button.close,#side>button.close{position:sticky;float:right;top:12px;z-index:5;width:var(--tap);height:var(--tap);margin:-8px -6px 0 8px!important;padding:0!important;border-radius:50%!important;background:var(--ink-100)!important;color:var(--ink-700)!important;font-size:0!important;display:grid;place-items:center}
#panel .close::after,#side .close::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat}
/* ---------- buttons ---------- */
#panel button,#side button,#picker button,.usheet .ubtn,#auth #aGo,label.btn{min-height:var(--tap);padding:0 var(--s4);border:0;border-radius:var(--r-md);background:var(--primary);color:var(--on-primary);font:var(--fw-bold) var(--fs-sm) var(--font);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);cursor:pointer;transition:transform var(--t-fast) var(--ease-spring),background-color var(--t-fast)}
#panel button:active,#side button:active{transform:scale(.97);background:var(--primary-press)}
#panel button.sec,#side button.sec,#side .rf,.ctabs button{background:var(--ink-100)!important;color:var(--ink-900)!important;box-shadow:inset 0 0 0 1px var(--ink-200)}
#panel button:disabled,#side button:disabled{background:var(--ink-200);color:var(--ink-500);box-shadow:none}
#panel .pbig,#panel button.buy,#panel [id^=bBuy],#panel #bU{background:linear-gradient(180deg,#26a866,var(--green-700));font-size:var(--fs-md)}
#side .ivBtn{background:linear-gradient(180deg,var(--gold-400),var(--gold-500))!important;color:var(--ink-900)!important}
#side .rf.on,.ctabs button.on{background:var(--brand-600)!important;color:#fff!important;box-shadow:none}
#side .star{min-height:0;box-shadow:none}
/* inputs */
#panel input,#side input:not([type=checkbox]):not([type=radio]),#side select,#side textarea,#picker input,#auth input,#auth select{min-height:var(--tap);padding:0 var(--s3);border:1.5px solid var(--ink-200);border-radius:var(--r-md);background:var(--canvas);font:var(--fw-reg) 16px var(--font);color:var(--ink-900)}
#side textarea{padding:var(--s2) var(--s3)}
#panel input:focus,#side input:focus,#auth input:focus{border-color:var(--brand-500);background:#fff;outline:none;box-shadow:0 0 0 3px var(--brand-100)}
/* tables / rows as cards */
#panel table,.pt{border-collapse:separate;border-spacing:0;background:var(--canvas);border-radius:var(--r-md);overflow:hidden;margin:var(--s2) 0}
#panel td,.pt td{padding:9px var(--s3)!important;border-bottom:1px solid var(--ink-100)!important;font-size:var(--fs-sm)}
#panel td:first-child,.pt td:first-child{color:var(--ink-500);font-weight:var(--fw-semi)}#panel td:last-child{text-align:right;font-weight:var(--fw-bold)}
#panel tr:last-child td{border-bottom:0!important}
.fee{color:var(--amber-700);font-size:var(--fs-sm);line-height:1.45}.sub{color:var(--ink-600)}
.rl .rr,.fr,.nw,.n,.trz-row,.prow,.deal{border-bottom:1px solid var(--ink-100);padding:10px 2px;min-height:var(--tap)}
.rr.me{background:var(--gold-100);border-radius:var(--r-md);padding:10px 8px}.rr .rk{font-weight:var(--fw-black);color:var(--ink-500)}
.rr .rk:is(:first-child){font-variant-numeric:tabular-nums}.rr b,.in,.pnet{color:var(--green-700)}.out,.neg{color:var(--red-700)}
.myrank{background:var(--gold-100);border:1px solid #f4d48a;border-radius:var(--r-md);padding:var(--s3);font-weight:var(--fw-semi)}
.rtabs,.ctabs,.tabs{display:flex;gap:4px;padding:4px;background:var(--ink-100);border-radius:var(--r-md)}
.rtabs button,.ctabs button{flex:1;min-height:38px!important;margin:0!important;border-radius:10px!important;box-shadow:none!important}
.n.unread{background:var(--gold-100);border-radius:var(--r-sm)}.badge{background:var(--red-600);font-weight:var(--fw-bold);min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:9px;padding:0 5px;font-size:11px;box-shadow:0 0 0 2px #fff}
.tag{font-weight:var(--fw-bold)}.tag.good{background:var(--green-100);color:var(--green-700)}.tag.bad{background:var(--red-100);color:var(--red-700)}
a.pl{color:var(--brand-600)}
#side .msgs{border:0;background:var(--canvas);border-radius:var(--r-md);padding:var(--s2)}#side .m{padding:6px 8px;border-radius:var(--r-md);margin:4px 0}#side .m.mine{background:var(--brand-100)}
/* property / build cards */
#panel .pcard{background:var(--surface);border:1.5px solid var(--ink-200);border-radius:var(--r-lg);box-shadow:var(--e1);min-height:96px;color:var(--ink-900)}
#panel .pcard span{color:var(--money)}#panel .pchip{min-height:var(--tap);border-radius:var(--r-md)}
.ptot div,.ivs span,.trz-grid>div{background:var(--canvas);border-radius:var(--r-md);border:1px solid var(--ink-100)}
.ptot b,.ivs b{font-size:var(--fs-lg)}
.trz-bal{background:linear-gradient(135deg,var(--brand-800),var(--brand-500));border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--e2)}.trz-bal b{color:var(--gold-400)}
/* ---------- menu & settings sheets (cover the tab bar) ---------- */
#menu,.usheet{background:rgba(8,22,32,.55);backdrop-filter:blur(2px)}
#menu .mcard,.usheet .mcard{border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--s2) var(--s4) calc(var(--s5) + var(--safe-b));animation:uup var(--t-med) var(--ease-spring)}
#menu .mcard::before,.usheet .mcard::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--ink-300);margin:0 auto var(--s2)}
.mhd{font-size:var(--fs-xl);font-weight:var(--fw-black)}.mhd button{width:var(--tap);height:var(--tap);background:var(--ink-100);color:var(--ink-700);font-size:0;display:grid;place-items:center}
.mhd button::after{content:"✕";font-size:18px}
#menu .tb{grid-template-columns:repeat(4,1fr);gap:var(--s2)}
#menu .tb button{min-height:80px;border-radius:var(--r-lg);background:var(--canvas);border:1px solid var(--ink-100);color:var(--brand-700);font-size:0;box-shadow:var(--e1)}
#menu .tb button .ic{width:26px;height:26px}#menu .tb button .lbl{font-size:12px;font-weight:var(--fw-bold);color:var(--ink-900)}
#menu .tb #bTrz,#menu .tb #bIvr,#menu .tb #bRep{background:var(--gold-100);border-color:#f4d48a;color:var(--gold-600)}
#menu .tb #bOut{background:var(--red-100);border-color:#f6c9c4;color:var(--red-700)}
#menu .r26sec{grid-column:1/-1;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin:var(--s2) 2px 0}
.urow{min-height:56px;font-weight:var(--fw-semi)}.urow input[type=checkbox]{accent-color:var(--brand-600)}.urow input[type=range]{accent-color:var(--brand-600)}
/* ---------- auth ---------- */
#auth{background:radial-gradient(120% 80% at 50% 0%,var(--brand-600),var(--brand-900))}
#auth .card{border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--e3)}
#auth h2{color:var(--brand-800);font-weight:var(--fw-black);font-size:var(--fs-3xl);letter-spacing:4px}
#auth .tabs button{border:0;background:none;color:var(--ink-600);min-height:40px;border-radius:10px;font-weight:var(--fw-bold)}#auth .tabs button.on{background:#fff;color:var(--brand-700);box-shadow:var(--e1);outline:0}
#auth #aGo{width:100%;font-size:var(--fs-md);background:var(--brand-600)}
/* ---------- toast ---------- */
#toast{bottom:calc(var(--tabh) + var(--safe-b) + 14px);background:var(--ink-900);border-radius:var(--r-pill);padding:12px 18px;font-weight:var(--fw-semi);font-size:var(--fs-sm);box-shadow:var(--e3);max-width:calc(100vw - 32px)}
/* ---------- compact numbers ---------- */
.r26num{cursor:pointer}.r26num.full{color:#fff!important}
/* ---------- skeleton + empty states ---------- */
.r26sk{display:block;height:14px;margin:10px 0;border-radius:7px;background:linear-gradient(90deg,var(--ink-100) 25%,var(--ink-200) 50%,var(--ink-100) 75%);background-size:200% 100%;animation:r26sk 1.1s linear infinite}
.r26sk.l{height:52px;border-radius:var(--r-md)}.r26sk.s{width:60%}
@keyframes r26sk{to{background-position:-200% 0}}
.r26empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;color:var(--ink-600)!important;padding:var(--s6) var(--s4);font-size:var(--fs-sm)}
.r26empty::before{content:"";width:56px;height:56px;border-radius:50%;background:var(--brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5a7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.5 6 5h12l2.5 8.5V19H3.5z'/%3E%3Cpath d='M3.5 13.5H9a3 3 0 0 0 6 0h5.5'/%3E%3C/svg%3E") center/26px no-repeat}
/* ---------- Social segmented header ---------- */
.r26seg{display:flex;gap:4px;padding:4px;margin:0 0 var(--s3);background:var(--ink-100);border-radius:var(--r-md)}
#side .r26seg button{flex:1;min-height:40px;margin:0;border-radius:10px;background:none;color:var(--ink-600);box-shadow:none;display:flex;align-items:center;justify-content:center;gap:6px}
#side .r26seg button.on{background:#fff;color:var(--brand-700);box-shadow:var(--e1)}#side .r26seg .ic{width:18px;height:18px}
/* ---------- Wallet ---------- */
.r26bal{background:linear-gradient(135deg,var(--brand-800),var(--brand-500));color:#fff;border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--e2);position:relative;overflow:hidden}
.r26bal::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#ffc94a55,#ffc94a00 70%)}
.r26bal small{display:block;opacity:.85;font-weight:var(--fw-semi);font-size:var(--fs-sm)}.r26bal b{display:block;font-size:34px;font-weight:var(--fw-black);color:var(--gold-400);letter-spacing:-.5px;line-height:1.15}
.r26bal .row2{display:flex;gap:var(--s3);margin-top:var(--s3)}.r26bal .row2 div{flex:1;background:#ffffff1c;border-radius:var(--r-md);padding:var(--s2) var(--s3)}.r26bal .row2 b{font-size:var(--fs-lg);color:#fff}
.r26list{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
#side .r26list button{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:60px;padding:0 var(--s4);background:var(--surface);color:var(--ink-900);border:1px solid var(--ink-200);box-shadow:var(--e1);text-align:left;border-radius:var(--r-lg)}
#side .r26list button .ic:first-child{width:36px;height:36px;padding:7px;border-radius:var(--r-md);background:var(--brand-100);color:var(--brand-600)}
#side .r26list button span{flex:1;display:flex;flex-direction:column}#side .r26list button small{color:var(--ink-500);font-weight:var(--fw-reg)}
#side .r26list button .ic:last-child{color:var(--ink-300)}#side .r26list button.gold .ic:first-child{background:var(--gold-100);color:var(--gold-600)}
/* ---------- map polish (r23 3D labels/markers) ---------- */
.m3c span{background:rgba(11,34,49,.88);font:800 11px/1 var(--font);padding:4px 8px;border-radius:var(--r-pill);border:1.5px solid #ffffffb3;box-shadow:0 2px 6px #0006;letter-spacing:.2px}
.m3i span{font:800 10px/1 var(--font);padding:3px 6px;border-radius:6px;border:1.5px solid #fff;box-shadow:0 2px 5px #0005}
.leaflet-tooltip{font:700 12px var(--font);border-radius:var(--r-sm);border:0;box-shadow:var(--e2);color:var(--ink-900)}
.leaflet-interactive.r26sel{filter:drop-shadow(0 0 6px #ffc94a)}
#r26leg{position:fixed;left:10px;bottom:calc(var(--tabh) + var(--safe-b) + 22px);z-index:900;display:flex;flex-direction:column;gap:4px;padding:8px 10px;background:#ffffffeb;border-radius:var(--r-md);box-shadow:var(--e2);font:700 11px var(--font);color:var(--ink-700);transition:opacity var(--t-med)}
#r26leg i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-2px}
#r26leg.min>div:not(:first-child){display:none}#r26leg>div:first-child{cursor:pointer;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em;font-size:10px}
html.r26-sheet #r26leg{opacity:0;pointer-events:none}
/* ---------- games (lazy CSS from gamefx) brought onto brand palette + type ---------- */
#games{background:radial-gradient(120% 80% at 50% 0%,var(--brand-600) 0%,var(--brand-800) 55%,var(--brand-900) 100%)!important;font-family:var(--font)!important}
#games .ghead{background:linear-gradient(var(--brand-800),#12344ae0 70%,transparent)!important}
#games .gx{width:var(--tap)!important;height:var(--tap)!important;flex-basis:var(--tap)!important}
#games .gcard{background:var(--brand-700)!important;border-radius:var(--r-xl)!important;box-shadow:var(--e3),inset 0 1px 0 #ffffff22!important}
.ghero{background:linear-gradient(135deg,#ffc94a26,#2a7aa633)!important;border-radius:var(--r-xl)!important}
.gpre{background:var(--brand-700)!important}.gstart{font-family:var(--font)!important}
.gpop{font-family:var(--font)!important}
.gpopc{background:linear-gradient(180deg,var(--brand-600),var(--brand-800))!important;border-radius:28px!important;padding:26px 20px 14px!important}
.gpopc.win{border:3px solid var(--gold-400)!important;box-shadow:0 0 0 6px #ffc94a26,0 24px 60px #000b!important}
.gpopc h3{font-weight:var(--fw-black)!important;letter-spacing:-.3px}
.gpops div{background:#0b223166!important;border-radius:var(--r-lg)!important}.gpops b{font-weight:var(--fw-black)}
.gbar button{min-height:48px;border-radius:var(--r-lg)!important;font-family:var(--font)!important;font-weight:var(--fw-black)!important}
.gbar button:not(.sec){background:linear-gradient(180deg,#34c06f,var(--green-700))!important;box-shadow:0 4px 0 #0e5533!important}
.gbar button.sec{background:#ffffff1f!important;box-shadow:inset 0 0 0 1.5px #ffffff38!important}
/* r24 motion upgraded to spring easing; transform/opacity only */
button{transition:transform var(--t-fast) var(--ease-spring),opacity var(--t-fast)}
#panel:not(.hidden),#side:not(.hidden){animation:r26in var(--t-med) var(--ease-spring)}
@keyframes r26in{from{transform:translateY(24px);opacity:.0}}
#panel.r26drag,#side.r26drag{animation:none;transition:none}
#panel.r26rel,#side.r26rel{transition:transform var(--t-med) var(--ease-spring)}
@media(prefers-reduced-motion:reduce){#tabs button.on::before,.r26sk{animation:none!important}#tabs{transition:none}}
@media(min-width:601px){#tabs{left:50%;right:auto;width:440px;transform:translateX(-50%);bottom:12px;border-radius:var(--r-xl);border:1px solid var(--ink-200);height:var(--tabh)}html.r26-full #tabs{transform:translate(-50%,140%)}#toast{bottom:90px}}
#side>button.close{align-self:flex-end;flex:none;margin:-6px -6px -38px 0!important;float:none}
#side>.r26grab{align-self:center;flex:none}
