/* =========================================================================
   Швейцария · LostCompass
   The page is a slice of the world: sky and village on top, turf, then rock
   down to bedrock. The interface speaks the game's own GUI: title screen,
   hotbar, scoreboard, chat, advancements, container panels.

   Pixel discipline: one art pixel is 2 CSS px in the interface. The pixel
   face (8 font px per em) is only ever set at 16, 24, 32, 48... so every
   glyph lands on whole pixels. Borders and bevels move in 2px steps.
   ========================================================================= */

@font-face{
  font-family:"Alpencraft";
  src:url(../assets/fonts/alpencraft.woff2) format("woff2");
  font-display:swap;
}

:root{
  --px:"Alpencraft","Pixelify Sans","Courier New",monospace;
  --ui:"Sofia Sans","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;

  --ink:#f3f0e8;
  --ink-2:#bdb9ae;
  --ink-3:#8b877e;
  --night:#0d0e12;
  --slate:#191a20;
  --slate-2:#22242c;
  --slate-3:#2d3039;
  --hi:#4a4d59;
  --lo:#08080a;

  /* the sixteen chat colours, the ones every player already reads */
  --c-gold:#ffaa00;  --c-yellow:#ffff55; --c-green:#55ff55; --c-aqua:#55ffff;
  --c-red:#ff5555;   --c-pink:#ff55ff;   --c-gray:#aaaaaa;  --c-dark:#6b6b6b;
  --c-blue:#7f9bff;  --c-darkred:#c0392f;
  --xp:#80ff20;
  --swiss:#d8232a;
  --ingot:#ffd23e;

  /* container GUI */
  --gui:#c6c6c6; --gui-hi:#ffffff; --gui-lo:#555555; --gui-ink:#3f3f3f; --slot:#8b8b8b;
  /* book pages */
  --paper:#f2e6c4; --paper-2:#e5d6ac; --paper-ink:#33281a;

  --r--2:#ff5555; --r--1:#ffaa00; --r-0:#aaaaaa; --r-1:#7ddc5a; --r-2:#55ff55;

  --tex-stone:url(../assets/tex/stone.svg);
  --tex-dirt:url(../assets/tex/dirt.svg);
  --tex-turf:url(../assets/tex/grass_side.svg);
  --tex-deepslate:url(../assets/tex/deepslate.svg);
  --tex-bedrock:url(../assets/tex/deepslate.svg);
  --tex-gold:url(../assets/tex/gold_block.svg);
  --tex-iron:url(../assets/tex/stone.svg);
  --tex-copper:url(../assets/tex/planks.svg);
  --tex-planks:url(../assets/tex/planks.svg);

  --topbar:56px;
  --side:404px;
  --sky-a:#0a1124; --sky-b:#03050d;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{overflow-x:hidden;scroll-padding-top:calc(var(--topbar) + 12px)}
body{
  min-height:100vh;color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-color:#101014;
  background-image:linear-gradient(rgba(10,10,13,.86),rgba(10,10,13,.86)),var(--tex-deepslate);
  background-size:auto,64px 64px;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--c-yellow);color:#15150a}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#0b0b0e}
::-webkit-scrollbar-thumb{background:#5b5e69;border:2px solid #0b0b0e;box-shadow:inset 2px 2px 0 #83879a,inset -2px -2px 0 #33353d}
::-webkit-scrollbar-thumb:hover{background:#6e7280}

.ico-px,.head,.head3d,.pod-body,.turf,.mcbtn,.logo span,.hotbar,.foot,.pod-block{image-rendering:pixelated}
.ico-px{display:block}

/* pixel text: crisp, with the game's hard drop shadow */
.px,.mcbtn,.hud-name,.scoreboard,.hud-chat,.entry,.logo,.splash,.logo-sub,.hero-foot,.sect-head h2,h3.sub,
.m-name,.tag,.chip,.logtabs button,.lang button,.brand-text b,.statuspill,.tier-bar,.person,.ptitle,.ptag,.pin,
.pod .nm,.pod .sc,.place,.medal,.weekbar .wk,.notice b,.empty,.toast,.tip,.modal-head b,label.fld > span,
.stat b,.cell-player .nm,.don b,.donrank-row b,.donform-head b,table.grid th,.nametag,.logpanel-meta,.logpanel-foot,
.adv-title,.xp b,.src,.pb,.pauthor,.rules-book h3,.rate button,.lf-clear,.iconbtn{
  font-family:var(--px);font-weight:400;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;
  font-smooth:never;letter-spacing:0;
}

/* ============================== buttons ================================= */
.mcbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:0 16px 2px;cursor:pointer;white-space:nowrap;
  font-size:16px;line-height:1;color:#fff;text-shadow:2px 2px 0 #3a3a3a;
  border:2px solid #000;
  background-color:#7c7c80;
  background-image:linear-gradient(var(--tint,rgba(255,255,255,.1)),var(--tint,rgba(255,255,255,.1))),var(--tex-stone);
  background-size:auto,32px 32px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.42),inset -2px -4px 0 rgba(0,0,0,.36);
}
.mcbtn:hover{border-color:#fff;color:#ffffa0;--tint:rgba(126,136,210,.5)}
.mcbtn:active{box-shadow:inset 2px 4px 0 rgba(0,0,0,.4),inset -2px -2px 0 rgba(255,255,255,.2);padding-top:2px;padding-bottom:0}
.mcbtn:focus-visible,.hotbar a:focus-visible,.logfab:focus-visible,.splash:focus-visible,.chip:focus-visible,
.lang button:focus-visible,.iconbtn:focus-visible,.rmv:focus-visible,.rate button:focus-visible,.ip:focus-visible,.clockbtn:focus-visible{
  outline:2px solid var(--c-yellow);outline-offset:2px;
}
.mcbtn.primary{--tint:rgba(58,170,48,.62)}
.mcbtn.primary:hover{--tint:rgba(90,205,70,.66)}
.mcbtn.gold{--tint:rgba(255,186,20,.7);color:#2b1f00;text-shadow:2px 2px 0 rgba(255,240,170,.55)}
.mcbtn.gold:hover{--tint:rgba(255,210,70,.78);color:#1a1200}
.mcbtn.danger{--tint:rgba(205,52,40,.66)}
.mcbtn.danger:hover{--tint:rgba(235,80,64,.7)}
.mcbtn.ghost{--tint:rgba(8,8,12,.58)}
.mcbtn.ghost:hover{--tint:rgba(60,66,120,.62)}
.mcbtn.small{min-height:32px;padding:0 10px 2px}
.mcbtn[disabled]{opacity:.45;cursor:not-allowed}
.mcbtn .ico-px{filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4))}

.iconbtn{background:transparent;border:0;color:var(--ink-2);cursor:pointer;font-size:16px;line-height:1;padding:8px}
.iconbtn:hover{color:var(--c-yellow)}

/* ============================= form fields ============================== */
input,select,textarea{
  width:100%;min-height:40px;padding:8px 10px;color:#fff;outline:none;border-radius:0;
  background:#000;border:2px solid #a0a0a0;font-family:var(--ui);font-weight:500;font-size:15px;
}
textarea{line-height:1.5;resize:vertical}
input::placeholder,textarea::placeholder{color:#6f6f6f}
input:focus,select:focus,textarea:focus{border-color:#fff}
input[type="checkbox"]{min-height:0;width:20px;height:20px;accent-color:#3aaa30;flex:none}
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat;
}
label.fld{display:block;margin-bottom:14px}
label.fld > span{display:block;font-size:16px;line-height:1;margin-bottom:8px;color:var(--gui-ink)}
.hint{color:var(--ink-2);font-size:13.5px}
.muted{color:var(--ink-3)}

/* ================================ sky =================================== */
.sky{
  position:relative;z-index:1;overflow:hidden;height:100vh;height:100svh;min-height:620px;max-height:1100px;
  background:linear-gradient(180deg,var(--sky-b),var(--sky-a));
  transition:height .85s cubic-bezier(.22,.8,.2,1),min-height .85s cubic-bezier(.22,.8,.2,1);
}
body.route-inner .sky{height:188px;min-height:188px}
.sky-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s ease}
.sky-canvas.is-ready{opacity:1}
.sky-tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sky-shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 120px),
    linear-gradient(90deg,rgba(4,6,14,.5) 0,rgba(4,6,14,.22) 34%,rgba(4,6,14,0) 58%);
}
body.route-inner .sky-shade{background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 110px)}

.nametag{
  position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;padding:2px 6px 3px;white-space:nowrap;
  font-size:16px;line-height:1;color:#fff;background:rgba(0,0,0,.42);transition:opacity .3s ease;will-change:transform;
}
.nametag img{width:16px;height:16px;image-rendering:pixelated}

/* ---- title screen ---- */
.hero-ui{
  position:absolute;inset:0;z-index:3;display:grid;pointer-events:none;
  grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;gap:20px 32px;
  padding:calc(var(--topbar) + 5vh) 44px 128px;
  transition:opacity .35s ease,visibility .35s;
}
.hero-ui > *{pointer-events:auto}
body.route-inner .hero-ui{opacity:0;visibility:hidden;pointer-events:none}
body.route-inner .hero-ui > *{pointer-events:none}

.hero-main{grid-column:1;grid-row:1;align-self:start;min-width:0;max-width:min(760px,100%)}
.logo-wrap{position:relative;display:inline-block;margin:0 0 6px}
.logo{
  position:relative;margin:0;font-size:80px;line-height:1.5;white-space:nowrap;--s:10;color:#e6e6ea;
  text-shadow:.125em .125em 0 #2a2a2e;animation:logoIn .9s cubic-bezier(.2,.9,.25,1) both;
}
.logo.has-art{font-size:0;line-height:0;text-shadow:none}
.logo.has-art span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.logo-img{
  --k:min(var(--s),var(--fit,99));
  display:block;width:calc(var(--w) * var(--k) * 1px);height:calc(var(--h) * var(--k) * 1px);max-width:none;
  image-rendering:pixelated;
}
.logo-sub{
  margin:14px 0 0 12px;font-size:24px;line-height:1.25;color:#fff;letter-spacing:4px;
  text-shadow:2px 2px 0 #000,-2px 0 0 #000,0 -2px 0 #000,2px 0 0 #000,0 4px 0 rgba(0,0,0,.45);
  animation:riseIn .7s .25s cubic-bezier(.2,.9,.25,1) both;
}
.splash{
  position:absolute;left:calc(100% - 130px);top:56%;z-index:2;margin:0;padding:4px;border:0;background:none;cursor:pointer;
  width:max-content;max-width:min(480px,26vw);
  font-size:24px;line-height:1.2;white-space:normal;text-align:left;color:var(--c-yellow);text-shadow:3px 3px 0 #3f3f15;
  transform:rotate(-12deg);transform-origin:0 100%;
  animation:splash .52s ease-in-out infinite alternate;
}
.hero-lead{
  margin:26px 0 22px;max-width:50ch;font-size:17px;line-height:1.55;font-weight:500;color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.85),0 0 18px rgba(0,0,0,.65);
  animation:riseIn .7s .35s cubic-bezier(.2,.9,.25,1) both;
}
.title-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(400px,100%);animation:riseIn .7s .45s cubic-bezier(.2,.9,.25,1) both}
.title-menu .wide{grid-column:1 / -1}

/* sidebar scoreboard: label left, red number right */
.scoreboard{
  grid-column:2;grid-row:1;align-self:center;min-width:264px;margin:0;
  font-size:16px;line-height:1;color:#fff;background:rgba(0,0,0,.56);text-shadow:2px 2px 0 rgba(0,0,0,.6);
  animation:riseIn .7s .55s cubic-bezier(.2,.9,.25,1) both;
}
.scoreboard h2{margin:0;padding:8px 12px 8px;font:inherit;text-align:center;color:var(--c-yellow);background:rgba(0,0,0,.4)}
.scoreboard dl{margin:0;padding:4px 0 6px}
.scoreboard .row{display:flex;justify-content:space-between;gap:40px;padding:5px 12px}
.scoreboard dt{color:#fff}
.scoreboard dd{margin:0;color:var(--c-red)}
.scoreboard .online{padding:6px 12px 10px;border-top:2px solid rgba(255,255,255,.12)}
.scoreboard .online p{margin:4px 0 8px;color:var(--c-green)}
.scoreboard .online.none p{color:var(--c-gray);margin-bottom:0}
.scoreboard .who{display:flex;align-items:center;gap:8px;padding:3px 0;color:#fff}
.scoreboard .who img{width:16px;height:16px;image-rendering:pixelated}

/* the last few lines of the town, as the game would show them */
.hud-chat{grid-column:1;grid-row:2;align-self:end;max-width:min(600px,44vw);font-size:16px;line-height:20px;min-width:0}
.hud-chat .cl{
  display:block;padding:2px 8px;background:rgba(0,0,0,.48);color:#fff;text-shadow:2px 2px 0 #3f3f3f;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hud-chat .cl:nth-last-child(n+5){opacity:.6}
.hud-chat .cl:nth-last-child(n+6){opacity:.38}
.hud-chat .cl.in{animation:chatIn .35s ease both}
.hud-chat .t{margin-right:8px}

.hero-foot{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  padding:0 12px 10px;font-size:16px;line-height:1;color:#fff;text-shadow:2px 2px 0 #3f3f3f;pointer-events:none;
}
.hero-foot > *{pointer-events:auto}
.ip,.clockbtn{background:none;border:0;padding:4px;cursor:pointer;color:#fff;text-shadow:inherit;display:flex;align-items:center;gap:8px}
.ip:hover,.clockbtn:hover{color:#ffffa0}
.clockbtn .ico-px{filter:drop-shadow(2px 2px 0 rgba(0,0,0,.5))}

/* =============================== topbar ================================= */
.topbar{
  position:fixed;left:0;right:0;top:0;z-index:40;height:var(--topbar);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;
  background:transparent;transition:background-color .25s ease,box-shadow .25s ease;
}
.topbar.is-solid{background:#121317;box-shadow:0 2px 0 #000,0 4px 0 rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-flag{width:32px;height:32px;flex:none;display:block;border:2px solid #000;box-shadow:0 2px 0 rgba(0,0,0,.5)}
.brand-flag svg{display:block;width:100%;height:100%}
.brand-text{min-width:0}
.brand-text b{display:block;font-size:16px;line-height:1;color:#fff;text-shadow:2px 2px 0 #2b2b2b}
.brand-text i{display:block;margin-top:5px;font-style:normal;font-size:12.5px;line-height:1;color:rgba(255,255,255,.78);font-weight:500;text-shadow:0 1px 0 rgba(0,0,0,.7)}
.topbar-right{display:flex;align-items:center;gap:8px;min-width:0}
.statuspill{display:flex;align-items:center;gap:8px;padding:0 10px;height:32px;font-size:16px;line-height:1;background:rgba(0,0,0,.45);white-space:nowrap}
.statuspill .sp-text{display:flex;align-items:center;gap:12px}
.statuspill b{font-weight:400;color:#fff}
.statuspill i{font-style:normal;color:var(--ingot)}
.livedot{width:8px;height:8px;flex:none;background:var(--c-green);box-shadow:0 0 0 2px rgba(0,0,0,.6);animation:blink 2.4s steps(2) infinite}
.livedot.off{background:var(--c-red);animation:none}
.lang{display:flex}
.lang button{
  height:32px;padding:0 10px 2px;cursor:pointer;font-size:16px;line-height:1;color:#c9c9c9;
  border:2px solid #000;background:rgba(0,0,0,.5);text-shadow:2px 2px 0 #2b2b2b;
}
.lang button + button{border-left:0}
.lang button:hover{color:#ffffa0}
.lang button.on{background:var(--swiss);color:#fff;box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.3)}
#pwBtn{width:36px;padding:0}

/* ================================ HUD =================================== */
.hud{
  position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:46;
  display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none;
}
.hud > *{pointer-events:auto}
.hud-name{
  min-height:22px;margin-bottom:16px;padding:3px 8px;font-size:16px;line-height:1;color:#fff;text-shadow:2px 2px 0 #3f3f3f;
  background:rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .2s ease;
}
.hud-name:empty{visibility:hidden}
.hud-name.show{opacity:1}
.hud-name.flash{animation:nameFlash 2.4s ease both}
.xp{position:relative;width:100%;height:10px;margin-bottom:4px;background:#000;border:2px solid #000;box-shadow:inset 0 0 0 2px #2c3a16}
.xp i{
  display:block;height:100%;width:0;background:var(--xp);
  background-image:repeating-linear-gradient(90deg,transparent 0 18px,rgba(0,0,0,.55) 18px 20px);
  box-shadow:inset 0 2px 0 #c8ff8c,inset 0 -2px 0 #4f9a12;transition:width 1s cubic-bezier(.2,.9,.3,1);
}
.xp b{
  position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font-size:16px;line-height:1;color:var(--xp);
  text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000;pointer-events:none;
}
.hotbar{
  position:relative;display:flex;padding:2px;background:rgba(18,18,22,.78);border:2px solid #000;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.22),inset -2px -2px 0 rgba(0,0,0,.5),0 4px 0 rgba(0,0,0,.35);
}
.hotbar a,.logfab{
  position:relative;width:48px;height:48px;display:grid;place-items:center;flex:none;cursor:pointer;
  background:rgba(120,120,128,.26);border:2px solid;border-color:rgba(0,0,0,.55) rgba(255,255,255,.2) rgba(255,255,255,.2) rgba(0,0,0,.55);
  color:#fff;padding:0;
}
.hotbar a[hidden]{display:none !important}
.hotbar .ni{display:block;width:32px;height:32px;transition:transform .12s ease}
.hotbar .ni .ico-px,.logfab .ico-px{width:32px;height:32px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45))}
.hotbar a:hover .ni,.logfab:hover .logfab-icon{transform:translateY(-2px)}
.hotbar .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hotbar-sel{
  position:absolute;top:-4px;left:0;width:56px;height:56px;pointer-events:none;z-index:2;
  border:4px solid #f0f0f0;box-shadow:0 0 0 2px #000,inset 0 0 0 2px #000;
  transition:transform .22s cubic-bezier(.3,1.35,.5,1);
}
.logfab{display:none;margin-left:6px;font-size:16px;font-family:var(--px)}
.logfab-icon{display:block;transition:transform .12s ease}
.logfab .open-icon{display:none;color:var(--c-red);text-shadow:2px 2px 0 #3f1515}
.logfab.is-open .open-icon{display:block}
.logfab.is-open .closed-icon{display:none}
.logfab-badge{
  position:absolute;right:0;bottom:0;padding:0 2px;font-size:16px;line-height:1;color:#fff;text-shadow:2px 2px 0 #3f3f3f;pointer-events:none;
}

/* =============================== ground ================================= */
.turf{position:relative;z-index:0;height:48px;background:var(--tex-turf) 0 0/48px 48px repeat-x;background-color:#6d5035}
.turf::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:520px;pointer-events:none;
  background-image:linear-gradient(rgba(12,9,7,.58),rgba(12,9,7,.58)),var(--tex-dirt);background-size:auto,48px 48px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.8) 22%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.8) 22%,transparent 100%);
}

.layout{
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) var(--side);
  gap:32px;max-width:1640px;margin:0 auto;padding:36px 24px 72px;
}
.view{min-width:0;animation:viewIn .3s ease both}
.section{margin-bottom:56px}
.section:last-child{margin-bottom:0}
.sect-head{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:0 0 20px}
.sect-head h2{margin:0;font-size:32px;line-height:1.25;color:#fff;text-shadow:4px 4px 0 rgba(0,0,0,.6)}
.sect-head p{order:9;flex:0 0 100%;margin:0;padding-right:max(0px,calc(100% - 68ch));color:var(--ink-2);font-size:15.5px}
.sect-head .spacer{flex:1}
.sect-head select{width:auto}
h3.sub{
  display:flex;align-items:center;gap:14px;margin:0 0 16px;font-size:16px;line-height:1;color:var(--c-yellow);
  text-shadow:2px 2px 0 #3f3f15;
}
h3.sub::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 4px,transparent 4px 8px)}
.empty{
  padding:32px 20px;text-align:center;color:var(--c-gray);font-size:16px;line-height:1.5;
  background:rgba(0,0,0,.32);border:2px dashed rgba(255,255,255,.16);
}
.notice{
  display:flex;align-items:center;gap:14px;padding:12px 14px;margin-bottom:18px;
  background:#2a2210;border:2px solid #000;box-shadow:inset 2px 2px 0 #6b5518,inset -2px -2px 0 #130e03;
}
.notice b{display:block;font-size:16px;line-height:1.25;color:var(--ingot);margin-bottom:3px}
.notice span{display:block;font-size:14px;color:#dcd2b4}
.notice .mcbtn{margin-left:auto;flex:none}

/* panels: dark slate with a hard bevel */
.stat,.weekbar,.donrank-row,.don,.tier-body,.lb-wrap{
  background:var(--slate);border:2px solid #000;box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo);
}

/* item slot, as in any inventory */
.slot{
  width:52px;height:52px;flex:none;display:grid;place-items:center;background:var(--slot);
  border:2px solid;border-color:#373737 #fff #fff #373737;
}
.slot .ico-px{width:32px;height:32px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35))}

/* ================================ home ================================== */
.home-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start}
.home-grid{margin-bottom:56px}
.home-grid .section{margin-bottom:0}

/* what the app does, told as advancements */
.adv-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.adv{
  position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;min-height:72px;color:inherit;cursor:pointer;
  background:#212121;border:2px solid #000;box-shadow:inset 2px 2px 0 #555,inset -2px -2px 0 #111,0 0 0 rgba(0,0,0,.5);
  transition:transform .1s ease,box-shadow .1s ease,border-color .12s ease,background-color .12s ease;
}
.adv:focus-visible{outline:2px solid var(--c-yellow);outline-offset:2px}
.adv:active{transform:translateY(2px);box-shadow:inset 2px 2px 0 #555,inset -2px -2px 0 #111,0 0 0 rgba(0,0,0,.5)}
.adv p{transition:color .12s ease}
.adv .slot{width:48px;height:48px;background:none;border:0}
.adv-title{display:block;font-size:16px;line-height:1.25;color:var(--c-yellow);margin-bottom:4px}
.adv p{margin:0;font-size:14px;line-height:1.45;color:#e8e8e8}

.recent{display:flex;flex-direction:column}

/* =============================== members ================================ */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-bottom:20px}
.toolbar .grow{flex:1 1 240px}
.toolbar .pick{flex:0 1 220px}

.member-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:2px;padding:10px;
  background:rgba(0,0,0,.42);box-shadow:inset 0 4px 0 rgba(0,0,0,.35),inset 0 -4px 0 rgba(0,0,0,.35);
}
.member{
  position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:4px 14px;align-items:start;
  padding:10px;border:2px solid transparent;
}
.member:hover,.member:focus-within{background:#000;border-color:#8c8c8c}
.m-head{position:relative;width:64px;height:64px;display:grid;place-items:center;overflow:hidden}
.head3d{width:64px;height:64px;display:block}
.head{display:block;flex:none;image-rendering:pixelated;background:#2a2a2a}
.member.is-staff .m-head::after{                         /* enchantment glint: the council */
  content:"";position:absolute;inset:-40%;pointer-events:none;mix-blend-mode:screen;opacity:.34;
  background:repeating-linear-gradient(115deg,transparent 0 14px,rgba(168,92,255,.55) 14px 20px,transparent 20px 38px,rgba(110,60,220,.4) 38px 42px);
  animation:glint 5s linear infinite;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 78%);mask-image:radial-gradient(closest-side,#000 62%,transparent 78%);
}
.m-body{min-width:0}
.m-name{font-size:16px;line-height:1.25;color:var(--rank,#fff);text-shadow:2px 2px 0 rgba(0,0,0,.7);overflow-wrap:anywhere}
.m-rank{margin-top:2px;font-size:13.5px;line-height:1.3;color:var(--c-gray);font-weight:500}
.mstats{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:14px;font-weight:600;color:#e6e2d8;font-variant-numeric:tabular-nums}
.mstats span{display:inline-flex;align-items:center;gap:5px}
.mstats .ico-px{width:16px;height:16px}
.meta{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.m-note{grid-column:2 / -1;margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}
.m-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:44px}
.m-seen{font-size:12.5px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.m-tools{grid-column:2 / -1;display:flex;gap:6px;margin-top:6px}
.member.has-left{opacity:.55}
.member.has-left:hover{opacity:.95}

/* connection bars, the way the player list shows them */
.ping{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.ping i{display:block;width:2px;background:#3b3b3b;box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.ping i:nth-child(1){height:4px}.ping i:nth-child(2){height:7px}.ping i:nth-child(3){height:10px}
.ping i:nth-child(4){height:13px}.ping i:nth-child(5){height:16px}
.ping.on i{background:var(--c-green)}

.tag{
  display:inline-flex;align-items:center;gap:4px;padding:3px 6px 4px;font-size:16px;line-height:1;white-space:nowrap;
  color:#d6d6d6;background:rgba(255,255,255,.08);text-shadow:2px 2px 0 rgba(0,0,0,.55);
}
.tag.ok{color:var(--c-green);background:rgba(85,255,85,.1)}
.tag.warn{color:var(--c-gold);background:rgba(255,170,0,.12)}
.tag.bad{color:var(--c-red);background:rgba(255,85,85,.13)}
.tag.info{color:var(--c-aqua);background:rgba(85,255,255,.1)}
.tag.staff{color:var(--c-pink);background:rgba(255,85,255,.12)}

.rankmove{display:flex;gap:2px}
.rankmove.inline{margin-left:4px}
.rmv{
  width:24px;height:22px;padding:0;cursor:pointer;font-size:9px;line-height:1;color:#fff;
  border:2px solid #000;background:#6a6a70;box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.35);
}
.rmv.up:hover:not([disabled]){background:#3aaa30}
.rmv.down:hover:not([disabled]){background:#cd3428}
.rmv[disabled]{opacity:.3;cursor:not-allowed}

/* ========================= ranks: advancements ========================== */
.ladder{position:relative;display:flex;flex-direction:column;gap:18px;padding-left:36px}
.ladder::before{                                           /* the line that ties one advancement to the next */
  content:"";position:absolute;left:26px;top:30px;bottom:30px;width:2px;background:#fff;
  box-shadow:-2px 0 0 #000,2px 0 0 #000;
}
.tier{position:relative;display:grid;grid-template-columns:minmax(0,1fr);animation:riseIn .4s ease both}
.frame{
  position:absolute;left:-36px;top:-6px;z-index:2;width:56px;height:56px;display:grid;place-items:center;
  filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000);
}
.frame::before{
  content:"";position:absolute;inset:0;background:#c99a2e;
  box-shadow:inset 4px 4px 0 #f3d27a,inset -4px -4px 0 #8a6412;
}
.frame.goal::before{clip-path:polygon(0 22%,8% 22%,8% 8%,22% 8%,22% 0,78% 0,78% 8%,92% 8%,92% 22%,100% 22%,100% 100%,0 100%)}
.frame.challenge::before{clip-path:polygon(14% 14%,38% 14%,50% 0,62% 14%,86% 14%,86% 38%,100% 50%,86% 62%,86% 86%,62% 86%,50% 100%,38% 86%,14% 86%,14% 62%,0 50%,14% 38%)}
.frame.dim::before{background:#4a4a4f;box-shadow:inset 4px 4px 0 #6d6d74,inset -4px -4px 0 #2a2a2e}
.frame .ico-px{position:relative;width:32px;height:32px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4))}
.tier-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:44px;padding:6px 14px 6px 34px;margin-left:-4px;
  font-size:16px;line-height:1.25;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.55);
  background:var(--bar,#036a96);border:2px solid #000;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.35);
}
.tier-bar .t-en{font-family:var(--ui);font-size:14px;font-weight:600;color:rgba(255,255,255,.82);text-shadow:none;-webkit-font-smoothing:antialiased}
.tier-bar .count{margin-left:auto;color:rgba(255,255,255,.85)}
.tier-body{margin:-2px 0 0 12px;padding:14px 16px 16px 22px;background:#212121;box-shadow:inset 2px 2px 0 #4a4a4a,inset -2px -2px 0 #111}
.tier .t-desc{margin:0 0 12px;max-width:72ch;font-size:15px;color:#d9f2d0}
.tier.disc .t-desc{color:#f4d9d4}
.people{display:flex;flex-wrap:wrap;gap:6px}
.person{
  display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;font-size:16px;line-height:1;color:#fff;
  background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.14);text-shadow:2px 2px 0 rgba(0,0,0,.6);
}
.person .head{width:24px;height:24px}
.person.lead{border-color:var(--c-gold);color:var(--ingot)}
.empty-slot{color:var(--c-dark);font-family:var(--px);-webkit-font-smoothing:none;font-size:16px;line-height:1}

/* the rules, as a written book */
.rules-book{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;color:var(--paper-ink);
  background:var(--paper);border:2px solid #000;
  box-shadow:inset 2px 2px 0 #fff8e2,inset -2px -2px 0 #b9a66f,8px 0 0 -2px #6b3f1d,-8px 0 0 -2px #6b3f1d,0 6px 0 rgba(0,0,0,.4);
}
.rules-book .page{padding:26px 30px 28px}
.rules-book .page + .page{border-left:2px solid #cdbb88;box-shadow:inset 8px 0 8px -6px rgba(90,60,20,.28)}
.rules-book ol{margin:0;padding:0;list-style:none;counter-reset:rule var(--start,0)}
.rules-book li{counter-increment:rule;position:relative;padding-left:34px;margin:0 0 18px;font-size:15.5px;line-height:1.55}
.rules-book li:last-child{margin-bottom:0}
.rules-book li::before{content:counter(rule);position:absolute;left:0;top:1px;font-family:var(--px);-webkit-font-smoothing:none;font-size:24px;line-height:1;color:#8a2a1c}

/* =============================== tracker ================================ */
.weekbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;margin-bottom:16px}
.weekbar .wk{min-width:230px;text-align:center;font-size:16px;line-height:1.25;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.weekbar .wk small{display:block;margin-top:4px;font-family:var(--ui);-webkit-font-smoothing:antialiased;font-size:13px;font-weight:600;color:var(--ingot);text-shadow:none}
.weekbar .spacer{flex:1}

.tablewrap{overflow-x:auto;background:rgba(0,0,0,.5);border:2px solid #000;box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
table.grid{width:100%;border-collapse:collapse;min-width:980px}
table.grid th{
  position:sticky;top:0;z-index:2;text-align:left;white-space:nowrap;padding:12px 10px 10px;
  font-size:16px;line-height:1;color:var(--c-gray);background:#16171c;border-bottom:2px solid #000;
}
table.grid td{padding:9px 10px;border-bottom:2px solid rgba(255,255,255,.05);vertical-align:middle;font-size:14.5px;font-variant-numeric:tabular-nums}
table.grid tbody tr:hover{background:rgba(255,255,255,.05)}
table.grid tr.new-row td{animation:flashRow 1.8s ease}
table.grid select,table.grid input{min-height:34px;padding:5px 8px;font-size:14px}
table.grid select{padding-right:28px;background-position:calc(100% - 15px) 50%,calc(100% - 9px) 50%}
.cell-player{display:flex;align-items:center;gap:10px;min-width:170px}
.cell-player .nm{font-size:16px;line-height:1.25;color:var(--rank,#fff);text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.cell-player small{display:block;margin-top:1px;font-size:12.5px;color:var(--ink-3);font-weight:600}

.rate{display:inline-flex;gap:2px}
.rate button{
  width:32px;height:30px;padding:0 0 2px;cursor:pointer;font-size:16px;line-height:1;color:#d0d0d0;
  border:2px solid #000;background:#4d4d53;box-shadow:inset 2px 2px 0 rgba(255,255,255,.22),inset -2px -2px 0 rgba(0,0,0,.35);
}
.rate button:hover{color:#ffffa0;border-color:#fff}
.rate button[aria-pressed="true"]{color:#101010;text-shadow:none}
.rate button[data-val="-2"][aria-pressed="true"]{background:var(--r--2)}
.rate button[data-val="-1"][aria-pressed="true"]{background:var(--r--1)}
.rate button[data-val="0"][aria-pressed="true"]{background:var(--r-0)}
.rate button[data-val="1"][aria-pressed="true"]{background:var(--r-1)}
.rate button[data-val="2"][aria-pressed="true"]{background:var(--r-2)}
.rate.locked button{opacity:.5;cursor:default}
.rate.locked button:hover{color:#d0d0d0;border-color:#000}

.score{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.xpbar,.score .bar{display:block;width:84px;height:10px;background:#000;border:2px solid #000;box-shadow:0 0 0 2px rgba(255,255,255,.08);overflow:hidden}
.xpbar i,.score .bar i{display:block;height:100%;width:0;background:var(--xp);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.25);animation:fill .9s cubic-bezier(.2,.9,.3,1) both}
.xpbar.gold i{background:var(--ingot)}
.gold-cell{font-weight:700;color:var(--ingot);white-space:nowrap}
.gold-cell small{display:block;color:var(--ink-3);font-size:12px;font-weight:600}
.by-cell{font-size:13.5px;color:var(--ink-2);white-space:nowrap;font-weight:600}
.src{display:inline-block;padding:2px 5px 3px;font-size:16px;line-height:1;vertical-align:1px}
.src.auto{color:var(--c-aqua);background:rgba(85,255,255,.1)}
.src.manual{color:var(--c-gold);background:rgba(255,170,0,.12)}

/* ============================== donations ============================== */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.stat{display:flex;align-items:center;gap:14px;padding:12px;min-width:0}
.stat .stat-body{min-width:0;flex:1}
.stat b{display:block;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.stat b.num{font-size:32px;line-height:1}
.stat b.text{font-size:16px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-body > span{display:block;margin-top:6px;font-size:13.5px;line-height:1.25;color:var(--ink-2);font-weight:600}
.stat.gold b{color:var(--ingot)}.stat.grass b{color:var(--c-green)}.stat.lapis b{color:var(--c-aqua)}.stat.red b{color:var(--c-pink)}

/* the form is a container screen, like an anvil or a chest */
.donform,.modal-box{
  color:var(--gui-ink);background:var(--gui);border:2px solid #000;
  box-shadow:inset 2px 2px 0 var(--gui-hi),inset -2px -2px 0 var(--gui-lo),inset 4px 4px 0 #dcdcdc,inset -4px -4px 0 #7d7d7d;
}
.donform{padding:18px 18px 16px;margin-top:20px}
.donform-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.donform-head b{font-size:16px;line-height:1;color:var(--gui-ink)}
.donform-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.donform-row .fld{margin:0;flex:0 1 200px}
.donform-row .fld.grow{flex:1 1 240px}
.donform .hint{color:#4a4a4a;margin:12px 0 0}

.donrank{display:flex;flex-direction:column;gap:4px}
.donrank-row{display:flex;align-items:center;gap:12px;padding:8px 12px;animation:riseIn .3s ease both}
.donrank-row b{min-width:170px;font-size:16px;line-height:1.25;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.donrank-row .xpbar{flex:1;max-width:320px;height:12px}
.donrank-row .amt,.don .amt{margin-left:auto;font-family:var(--px);-webkit-font-smoothing:none;font-size:16px;line-height:1;color:var(--ingot);white-space:nowrap;text-shadow:2px 2px 0 #3f2a00}
.donation-list{display:flex;flex-direction:column;gap:4px;max-height:460px;overflow:auto}
.don{display:flex;align-items:center;gap:12px;padding:8px 12px}
.don b{font-size:16px;line-height:1.25;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.don .muted{font-size:12.5px;font-weight:500}

/* ================================ news ================================== */
.newsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px;align-items:start}
.post{
  position:relative;display:flex;flex-direction:column;padding:22px 24px 18px;color:var(--paper-ink);
  background:var(--paper);border:2px solid #000;
  box-shadow:inset 2px 2px 0 #fff8e2,inset -2px -2px 0 #b9a66f,0 6px 0 rgba(0,0,0,.45);
}
.post.tag-news{--ptag:#3a8a2e}.post.tag-announce{--ptag:#b57a00}.post.tag-event{--ptag:#2f6cc0}
.post.tag-war{--ptag:#b3261c}.post.tag-rules{--ptag:#7a3fb0}
.post-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.post-head .spacer{flex:1}
.ptag,.pin{display:inline-block;padding:4px 8px 5px;font-size:16px;line-height:1;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.4)}
.ptag{background:var(--ptag,#3a8a2e)}
.pin{color:#3a2a00;background:var(--ingot);text-shadow:none}
.pdate{font-size:13px;font-weight:600;color:#7c6c4c}
.ptitle{margin:0 0 12px;font-size:24px;line-height:1.3;color:#22190d;text-shadow:none}
.pbody{flex:1;font-size:16px;line-height:1.62;color:var(--paper-ink)}
.pbody p{margin:0 0 12px}
.pbody ul{margin:0 0 12px;padding-left:22px}
.pbody li{margin-bottom:4px}
.pbody li::marker{color:#8a2a1c}
.pbody code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;background:rgba(80,50,10,.12);padding:1px 5px;color:#6b2412}
.pbody b{color:#1d150a}
.pbody a{color:#1f57a8;text-decoration:underline}
.post-foot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;flex-wrap:wrap;border-top:2px dashed #c9b783}
.post-foot .spacer{flex:1}
.post-foot .muted{color:#7c6c4c;font-size:13px}
.pauthor{display:flex;align-items:center;gap:8px;font-size:16px;line-height:1;color:#3d2f1b}
.pauthor .head{width:24px;height:24px}
.newsgrid .post.pinned{grid-column:1 / -1}
.newsgrid .post.pinned .pbody{columns:2;column-gap:36px}
.newsgrid .post.pinned .pbody > *{break-inside:avoid}

/* ============================= leaderboard ============================== */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:end;max-width:720px;margin:0 auto 28px;padding-top:8px}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;animation:riseIn .5s cubic-bezier(.2,.85,.3,1.05) both}
.pod.p1{animation-delay:.1s}.pod.p3{animation-delay:.2s}
.pod-body{display:block;height:150px;width:auto;margin-bottom:-4px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.pod.p1 .pod-body{height:172px}
.pod-block{
  position:relative;width:100%;display:grid;place-items:center;border:2px solid #000;
  background-size:48px 48px;background-position:50% 0;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.4),inset -2px -2px 0 rgba(0,0,0,.35);
}
.pod.p1 .pod-block{height:144px;background-image:var(--tex-gold)}
.pod.p2 .pod-block{height:96px;background-image:var(--tex-iron)}
.pod.p3 .pod-block{height:60px;background-image:var(--tex-copper)}
.place{font-size:48px;line-height:1;color:rgba(0,0,0,.52);text-shadow:2px 2px 0 rgba(255,255,255,.35)}
.pod.p3 .place{font-size:32px}
.pod-info{width:100%;padding:12px 6px 0;text-align:center}
.pod .nm{font-size:16px;line-height:1.25;color:#fff;overflow-wrap:anywhere;text-shadow:2px 2px 0 rgba(0,0,0,.65)}
.pod .sc{margin-top:6px;font-size:32px;line-height:1;color:var(--c-red);text-shadow:2px 2px 0 #3f1515}
.pod.p1 .sc{color:var(--ingot);text-shadow:2px 2px 0 #3f2a00}
.pod .sub{margin-top:6px;font-size:13px;font-weight:600;color:var(--ink-3)}

.legend{display:flex;gap:6px 18px;flex-wrap:wrap;margin-bottom:14px}
.legend .lg{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.legend .lg i{width:12px;height:12px;display:block;border:2px solid #000}
.scorecell{display:flex;flex-direction:column;gap:6px;min-width:200px}
.scorecell b{font-family:var(--px);-webkit-font-smoothing:none;font-weight:400;font-size:16px;line-height:1;color:var(--c-red);text-shadow:2px 2px 0 #3f1515}
.stackbar{display:flex;width:200px;height:10px;background:#000;border:2px solid #000;box-shadow:0 0 0 2px rgba(255,255,255,.08);overflow:hidden}
.stackbar i{display:block;height:100%;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.25)}
.medal{display:inline-grid;place-items:center;width:32px;height:32px;font-size:16px;line-height:1;color:var(--c-gray)}
.medal.m1,.medal.m2,.medal.m3{color:rgba(0,0,0,.62);border:2px solid #000;background-size:32px 32px;box-shadow:inset 2px 2px 0 rgba(255,255,255,.4),inset -2px -2px 0 rgba(0,0,0,.3)}
.medal.m1{background-image:var(--tex-gold)}.medal.m2{background-image:var(--tex-iron)}.medal.m3{background-image:var(--tex-copper)}
.punish{white-space:nowrap}
.pb{display:inline-block;min-width:24px;padding:2px 5px 3px;margin-right:4px;text-align:center;font-size:16px;line-height:1}
.pb.ban{color:var(--c-red);background:rgba(255,85,85,.14)}
.pb.warn{color:var(--c-gold);background:rgba(255,170,0,.13)}

/* =========================== log: the chat ============================== */
.logpanel{
  position:sticky;top:calc(var(--topbar) + 14px);align-self:start;
  height:calc(100vh - var(--topbar) - 132px);min-height:420px;display:flex;flex-direction:column;overflow:hidden;
  background:rgba(8,8,11,.78);border:2px solid #000;box-shadow:inset 0 0 0 2px rgba(255,255,255,.07),0 6px 0 rgba(0,0,0,.35);
}
.logpanel.ping-me{animation:panelPing 1.4s ease}
.logpanel-head{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:2px solid #000;background:#16171c}
.logtabs{display:flex;gap:2px}
.logtabs button{
  height:32px;padding:0 12px 2px;cursor:pointer;font-size:16px;line-height:1;color:#c4c4c4;
  border:2px solid #000;background:#3c3d44;box-shadow:inset 2px 2px 0 rgba(255,255,255,.18),inset -2px -2px 0 rgba(0,0,0,.35);
  text-shadow:2px 2px 0 rgba(0,0,0,.5);
}
.logtabs button:hover{color:#ffffa0}
.logtabs button.on{color:#fff;background:#6c6d78;border-color:#fff}
.logpanel-meta{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:16px;line-height:1;color:var(--c-gray)}
.logpanel-head .iconbtn{display:none}
.logfilter{display:flex;flex-direction:column;gap:8px;padding:10px;border-bottom:2px solid #000;background:rgba(255,255,255,.03)}
.lf-row{display:flex;gap:6px;align-items:stretch}
.lf-row input,.lf-row select{min-height:34px;padding:5px 8px;font-size:14px}
.lf-row select{flex:1 1 0;min-width:0;padding-right:26px;background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%}
.lf-clear{flex:0 0 34px;cursor:pointer;font-size:16px;line-height:1;color:#777;background:#000;border:2px solid #555}
.lf-clear.on{color:var(--c-yellow);border-color:var(--c-yellow)}
.lf-chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{
  display:flex;align-items:center;gap:6px;padding:4px 8px 5px;cursor:pointer;font-size:16px;line-height:1;color:#777;
  background:rgba(255,255,255,.04);border:2px solid transparent;
}
.chip i{width:8px;height:8px;display:block;background:#444}
.chip:hover{color:#ffffa0}
.chip.on{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.chip.c-bank.on i{background:var(--c-gold)}.chip.c-chat.on i{background:#fff}
.chip.c-session.on i{background:var(--c-yellow)}.chip.c-member.on i{background:var(--c-green)}
.chip.c-system.on i{background:var(--c-gray)}

.logfeed{flex:1;overflow-y:auto;padding:6px 0;display:flex;flex-direction:column;scroll-behavior:smooth}
.logpanel-foot{padding:8px 10px;font-size:16px;line-height:1;color:var(--c-dark);border-top:2px solid #000;background:#16171c}

.entry{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;padding:3px 10px 3px;
  font-size:16px;line-height:20px;color:#fff;text-shadow:2px 2px 0 #2e2e2e;overflow-wrap:anywhere;
}
.entry:hover{background:rgba(255,255,255,.06)}
/* day heading inside a list: the rows under it only show the hour */
.day{
  display:flex;align-items:center;gap:10px;padding:12px 10px 5px;font-family:var(--px);-webkit-font-smoothing:none;
  font-size:16px;line-height:1;color:var(--c-yellow);text-shadow:2px 2px 0 #3f3f15;
}
.day:first-child{padding-top:5px}
.day::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 4px,transparent 4px 8px)}
.recent .day{padding:12px 12px 5px;background:rgba(0,0,0,.46)}
.recent .day:first-child{padding-top:8px}
.entry.in{animation:chatIn .4s ease both,entryFlash 2s ease}
.entry .t{color:var(--c-dark);text-shadow:2px 2px 0 #151515;white-space:nowrap}
.entry .who{color:var(--rank,#fff)}
.entry .tagk{color:var(--kc,var(--c-gray))}
.entry .msg{color:var(--mc,#fff)}
.entry .amt{color:var(--c-gold);text-shadow:2px 2px 0 #3f2a00}
.entry.k-bank_deposit{--kc:var(--c-gold);--mc:var(--c-gray)}
.entry.k-bank_withdraw{--kc:var(--c-red);--mc:var(--c-gray)}
.entry.k-bank_withdraw .amt{color:var(--c-red);text-shadow:2px 2px 0 #3f1515}
.entry.k-join,.entry.k-leave{--mc:var(--c-yellow)}
.entry.k-join .who,.entry.k-leave .who{color:var(--c-yellow)}
.entry.k-join,.entry.k-leave{text-shadow:2px 2px 0 #3f3f15}
.entry.k-town_join{--kc:var(--c-green);--mc:var(--c-green)}
.entry.k-town_leave,.entry.k-kick,.entry.k-ban,.entry.k-warn,.entry.k-mute{--kc:var(--c-red);--mc:#ffb4b4}
.entry.k-unban{--kc:var(--c-green);--mc:var(--c-gray)}
.entry.k-rank_change,.entry.k-rank_remove{--kc:var(--c-pink);--mc:#ffc4ff}
.entry.k-town_invite{--kc:var(--c-aqua);--mc:var(--c-gray)}
.entry.k-town_kick{--kc:var(--c-red);--mc:#ffb4b4}
.entry.k-system{--kc:var(--c-dark);--mc:var(--c-gray)}
.entry .flagbtn{background:none;border:0;color:var(--c-dark);cursor:pointer;font:inherit;padding:0 2px}
.entry .flagbtn:hover{color:var(--c-yellow)}
.entry.flagged{background:rgba(255,255,85,.1);box-shadow:inset 2px 0 0 var(--c-yellow)}
.recent .entry{background:rgba(0,0,0,.46);padding:4px 12px}

.log-backdrop{position:fixed;inset:0;z-index:48;display:none;background:rgba(4,6,8,.66)}
body.drawer-open .log-backdrop{display:block;animation:fade .2s ease both}
body.drawer-open{overflow:hidden}

/* =============================== modal ================================== */
.modal[hidden],.toast[hidden],.logfab-badge[hidden],.tip[hidden]{display:none !important}
.modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;
  background:linear-gradient(180deg,rgba(16,16,16,.78),rgba(16,16,16,.9));animation:fade .18s ease both;
}
.modal-box{width:min(480px,100%);margin:auto;animation:popIn .2s cubic-bezier(.2,.9,.3,1.2) both}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 4px 20px}
.modal-head b{font-size:16px;line-height:1.25;color:var(--gui-ink)}
.modal-head .iconbtn{color:var(--gui-ink)}
.modal-head .iconbtn:hover{color:#b3261c}
.modal-body{padding:10px 20px 20px}
.modal-body .hint{color:#4f4f4f}
.modal-body .row{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.modal-body .row .mcbtn{flex:1 1 120px}
.modal-body label.fld.check{display:flex;gap:10px;align-items:center}
.modal-body label.fld.check > span{margin:0}
.err{min-height:18px;margin-top:8px;font-size:14px;font-weight:700;color:#a3160c}

/* advancement toast */
.toast{
  position:fixed;right:16px;top:calc(var(--topbar) + 12px);z-index:70;display:flex;align-items:center;gap:12px;
  min-width:260px;max-width:min(420px,calc(100vw - 32px));padding:10px 16px 10px 10px;
  font-size:16px;line-height:1.25;color:#fff;background:#212121;border:2px solid #000;
  box-shadow:inset 2px 2px 0 #555,inset -2px -2px 0 #111,0 6px 0 rgba(0,0,0,.4);
  animation:toastIn .45s cubic-bezier(.2,.9,.3,1.1) both;
}
.toast .ico-px{width:32px;height:32px;flex:none}
.toast b{display:block;font-weight:400;color:var(--c-yellow);margin-bottom:4px}
.toast.bad b{color:var(--c-red)}
.toast span{display:block}

/* item tooltip */
.tip{
  position:fixed;z-index:80;left:0;top:0;pointer-events:none;max-width:320px;padding:6px 8px 7px;
  font-size:16px;line-height:1.25;color:#fff;text-shadow:2px 2px 0 #3f3f3f;
  background:rgba(16,0,16,.94);border:2px solid #25015b;box-shadow:0 0 0 2px rgba(16,0,16,.94);
}
.tip small{display:block;margin-top:4px;font:inherit;color:var(--c-gray);text-shadow:2px 2px 0 #2a2a2a}

/* =============================== footer ================================= */
.foot{
  position:relative;z-index:1;display:flex;gap:8px 24px;flex-wrap:wrap;justify-content:space-between;
  padding:26px 24px 132px;font-size:13.5px;font-weight:600;color:#8d8d8d;
  border-top:2px solid #000;background-image:linear-gradient(rgba(0,0,0,.52),rgba(0,0,0,.62)),var(--tex-bedrock);background-size:auto,48px 48px;
}

/* ============================= interaction ==============================
   Every control answers twice: it lights up under the pointer and it sinks
   2px when pressed. Motion stays in whole pixels and under a tenth of a second. */
.mcbtn,.lang button,.hotbar a,.logfab,.iconbtn,.rmv,.rate button,.chip,.logtabs button,.lf-clear,.ip,.clockbtn,
.splash,.flagbtn,.brand-flag,.head3d,input,select,textarea{
  transition:transform .07s ease,filter .12s ease,background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .07s ease;
}
.mcbtn:active,.lang button:active,.rmv:active:not([disabled]),.rate:not(.locked) button:active,.chip:active,
.logtabs button:active,.lf-clear:active,.iconbtn:active,.ip:active,.clockbtn:active,.flagbtn:active{transform:translateY(2px)}
.mcbtn[disabled]:active{transform:none}
.hotbar a:active .ni,.logfab:active .logfab-icon{transform:translateY(2px) scale(.88)}
.hotbar a.active .ni{animation:slotPop .32s cubic-bezier(.3,1.5,.5,1)}
.rate:not(.locked) button:active{filter:brightness(1.3)}
.splash:active{filter:brightness(1.6)}
.splash span{display:inline-block}
.splash span.swap{animation:splashSwap .28s cubic-bezier(.3,1.5,.5,1)}
.brand:active .brand-flag{transform:scale(.92)}

@media (hover:hover){
  .mcbtn:hover{filter:brightness(1.06)}
  .lang button:hover{background:rgba(70,78,150,.75);border-color:#fff}
  .lang button.on:hover{background:#ef3a41}
  .hotbar a:hover,.logfab:hover{background:rgba(255,255,255,.24)}
  .iconbtn:hover{transform:translateY(-1px)}
  .rmv:hover:not([disabled]){border-color:#fff}
  .chip:hover{background:rgba(255,255,255,.1)}
  .chip.on:hover{background:rgba(255,255,255,.18)}
  .logtabs button:hover{background:#4c4d58}
  .logtabs button.on:hover{background:#7a7b88}
  .lf-clear:hover{color:#fff;border-color:#fff}
  .lf-clear.on:hover{color:#fff;background:#3a3a12}
  .splash:hover{filter:brightness(1.3)}
  .ip:hover .ico-px,.clockbtn:hover .ico-px{transform:rotate(-12deg)}
  .ip .ico-px,.clockbtn .ico-px{transition:transform .15s ease}
  .brand:hover .brand-flag{transform:rotate(-6deg) scale(1.08)}
  .brand:hover .brand-text b{color:#ffffa0}
  input:hover,select:hover,textarea:hover{border-color:#d2d2d2}
  .member:hover .head3d{transform:translateY(-3px)}
  .pod:hover .pod-body{animation:hop .45s steps(6)}
  .tag[data-tip],.mstats [data-tip],.ping[data-tip],.xp[data-tip]{cursor:help}
  .flagbtn:hover{transform:scale(1.2)}
  .person:hover{border-color:rgba(255,255,255,.34)}
  .adv:hover{transform:translateY(-4px);border-color:#fff;background-color:#2b2b2b;
    box-shadow:inset 2px 2px 0 #6a6a6a,inset -2px -2px 0 #161616,0 6px 0 rgba(0,0,0,.55)}
  .adv:hover .slot .ico-px{animation:itemBob .5s steps(5) infinite alternate}
  .adv:hover .adv-title{color:#ffffa0}
  .adv:hover p{color:#fff}
  .adv:hover:active{transform:translateY(0);box-shadow:inset 2px 2px 0 #555,inset -2px -2px 0 #111,0 2px 0 rgba(0,0,0,.55)}
}

/* ============================== keyframes =============================== */
@keyframes viewIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes logoIn{from{opacity:0;transform:translateY(-18px) scale(1.04)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes chatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes entryFlash{0%{background:rgba(255,255,85,.2)}100%{background:transparent}}
@keyframes toastIn{from{transform:translateX(calc(100% + 24px))}to{transform:none}}
@keyframes splash{from{transform:rotate(-12deg) scale(1)}to{transform:rotate(-12deg) scale(1.06)}}
@keyframes splashTilt{from{transform:rotate(-3deg) scale(1)}to{transform:rotate(-3deg) scale(1.04)}}
@keyframes splashFlat{from{transform:rotate(-4deg) scale(1)}to{transform:rotate(-4deg) scale(1.05)}}
@keyframes nameFlash{0%{opacity:0;transform:translateY(4px)}10%,72%{opacity:1;transform:none}100%{opacity:0}}
@keyframes blink{0%{opacity:1}100%{opacity:.35}}
@keyframes glint{from{transform:translate(-18%,-18%)}to{transform:translate(18%,18%)}}
@keyframes fill{from{width:0}}
@keyframes itemBob{from{transform:translateY(1px) scale(1)}to{transform:translateY(-5px) scale(1.12)}}
@keyframes panelPing{0%,60%{box-shadow:inset 0 0 0 2px var(--c-yellow),0 0 0 4px rgba(255,255,85,.35),0 6px 0 rgba(0,0,0,.35)}100%{box-shadow:inset 0 0 0 2px rgba(255,255,255,.07),0 6px 0 rgba(0,0,0,.35)}}
@keyframes slotPop{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes splashSwap{0%{transform:scale(.55);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}70%{transform:translateY(-4px)}}
@keyframes flashRow{0%{background:rgba(255,255,85,.2)}100%{background:transparent}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================== responsive ============================== */
@media (max-width:1300px){
  .splash{position:static;display:block;margin:12px 0 0 8px;width:auto;max-width:100%;line-height:1.25;
    transform:rotate(-3deg);transform-origin:0 50%;animation-name:splashTilt}
  .layout{grid-template-columns:minmax(0,1fr)}
  .logpanel{
    position:fixed;top:0;right:0;bottom:0;left:auto;width:min(440px,94vw);height:100vh;height:100dvh;z-index:50;
    transform:translateX(104%);transition:transform .28s cubic-bezier(.2,.8,.3,1);background:rgba(8,8,11,.96);
  }
  .logpanel.open{transform:none}
  .logpanel-head .iconbtn{display:block}
  .logfab{display:grid}
  .logfab.is-open{z-index:56}
}
@media (max-width:1180px){
  .logo{font-size:64px;--s:8}
  .home-grid{grid-template-columns:minmax(0,1fr);gap:56px}
}
@media (max-width:980px){
  .hero-ui{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);padding:calc(var(--topbar) + 3vh) 24px 152px;gap:16px}
  .logo{font-size:48px;--s:6}
  .scoreboard{grid-column:1;grid-row:2;justify-self:start;align-self:start;min-width:240px}
  .scoreboard .online{display:none}
  .hud-chat{grid-row:3;max-width:100%}
  .hud-chat .cl:nth-last-child(n+4){display:none}
  .hero-lead{font-size:16px;margin:20px 0 18px}
  .statuspill .sp-text i{display:none}
  .brand-text i{display:none}
  .hero-foot{justify-content:space-between;padding-bottom:108px}
  .rules-book{grid-template-columns:1fr}
  .rules-book .page + .page{border-left:0;border-top:2px solid #cdbb88;box-shadow:none}
  .newsgrid .post.pinned .pbody{columns:1}
}
@media (max-width:640px){
  :root{--topbar:52px}
  .sky{min-height:560px}
  body.route-inner .sky{height:132px;min-height:132px}
  .hero-ui{padding:calc(var(--topbar) + 12px) 16px 118px;justify-items:center;text-align:center}
  .hero-main{display:flex;flex-direction:column;align-items:center;width:100%;max-width:100%}
  .logo-wrap{max-width:100%}
  .logo{font-size:32px;--s:4}
  .logo-sub{font-size:16px;letter-spacing:1px;margin:10px 0 0;line-height:1.25}
  .splash{margin:14px auto 0;max-width:94%;font-size:16px;text-align:center;text-shadow:2px 2px 0 #3f3f15;transform:rotate(-4deg);transform-origin:50% 50%;animation-name:splashFlat}
  .hero-lead{display:none}
  .title-menu{margin-top:18px;width:min(340px,100%)}
  .scoreboard{justify-self:center;width:min(340px,100%)}
  .scoreboard h2{display:none}
  .scoreboard dl{display:grid;grid-template-columns:1fr 1fr;padding:4px 0}
  .scoreboard .row{padding:5px 10px;gap:8px}
  .scoreboard .row:nth-child(n+5){display:none}
  .splash{margin-top:18px}
  .hud-chat{display:none}
  .hero-foot{justify-content:center;padding-bottom:104px}
  .hero-foot .clockbtn{display:none}
  .statuspill{display:none}
  .topbar{padding:0 10px;gap:8px}
  .layout{padding:24px 12px 56px}
  .sect-head h2{font-size:24px;text-shadow:3px 3px 0 rgba(0,0,0,.6)}
  .section{margin-bottom:44px}
  .member-grid{grid-template-columns:1fr;padding:6px}
  .adv-list{grid-template-columns:1fr}
  .ladder{padding-left:30px}
  .frame{left:-30px;width:48px;height:48px}
  .ladder::before{left:22px}
  .tier-body{padding:12px 12px 14px 18px}
  .weekbar .wk{min-width:0;flex:1 1 100%}
  .podium{gap:0}
  .pod-body{height:110px}.pod.p1 .pod-body{height:128px}
  .pod.p1 .pod-block{height:96px}.pod.p2 .pod-block{height:64px}.pod.p3 .pod-block{height:44px}
  .place{font-size:32px}.pod.p3 .place{font-size:24px}
  .pod .sc{font-size:24px}
  .donrank-row b{min-width:0;flex:1}
  .donrank-row .xpbar{display:none}
  .newsgrid{grid-template-columns:1fr}
  .post{padding:18px 16px 14px}
  .notice{flex-wrap:wrap}.notice .mcbtn{margin-left:0;width:100%}
  .hotbar a,.logfab{width:44px;height:44px}
  .hotbar-sel{width:52px;height:52px}
  .toast{left:12px;right:12px;min-width:0;max-width:none}
  .scorecell,.stackbar{min-width:0;width:140px}
  .foot{padding:22px 16px 124px}
}
@media (max-width:380px){
  .topbar{padding:0 8px;gap:6px}
  .brand{gap:8px}
  .lang button{padding:0 7px 2px}
  .topbar .mcbtn.small{padding:0 8px 2px}
  .hotbar a,.logfab{width:40px;height:40px}
  .hotbar-sel{width:48px;height:48px}
  .hotbar .ni,.hotbar .ni .ico-px,.logfab .ico-px{width:24px;height:24px}
}
/* short windows: the chat must never climb into the menu */
@media (max-height:860px) and (min-width:641px){
  .hero-ui{padding-top:calc(var(--topbar) + 2vh)}
  .hero-lead{display:none}
  .title-menu{margin-top:22px}
  .hud-chat .cl:nth-last-child(n+5){display:none}
}
@media (max-height:700px) and (min-width:641px){
  .hud-chat{display:none}
}
@media (max-width:640px) and (max-height:700px){
  .hero-foot{display:none}
}
@media (max-width:350px){
  .brand-text{display:none}
  .hero-ui{padding-left:10px;padding-right:10px}
}
/* big monitors: the title screen grows with the window */
@media (min-width:1800px) and (min-height:900px){
  .sky{max-height:1240px}
  .hero-ui{padding-left:72px;padding-right:72px}
  .logo{--s:12;font-size:96px}
  .logo-sub{font-size:32px;letter-spacing:6px;margin-top:18px}
  .hero-main{max-width:1040px}
  .splash{font-size:32px;max-width:min(640px,28vw);left:calc(100% - 170px);text-shadow:4px 4px 0 #3f3f15}
  .hero-lead{font-size:19px;max-width:54ch}
  .title-menu{width:480px;gap:10px}
  .title-menu .mcbtn{min-height:48px}
}
@media (max-height:540px){
  .sky{min-height:0;height:100vh;height:100svh}
  body.route-inner .sky{height:96px;min-height:96px}
  .hero-ui{padding:calc(var(--topbar) + 2px) 16px 92px;gap:8px 20px;align-content:start}
  .logo{--s:4;font-size:32px}
  .logo-sub{font-size:16px;letter-spacing:1px;margin:6px 0 0 4px}
  .hero-lead,.hud-chat,.hero-foot{display:none}
  .splash{display:none}
  .title-menu{margin-top:10px;width:min(400px,100%)}
  .title-menu .wide{grid-column:auto}
  .scoreboard{align-self:start;min-width:220px}
  .scoreboard .row{padding:3px 10px}
  .scoreboard .online{display:none}
  .hud-name{display:none}
  .layout{padding-top:20px}
}
@media (max-height:540px) and (max-width:980px){
  .scoreboard{display:none}
}

/* ---------------------------------------------- admin journal + debts */
.jlist { display: flex; flex-direction: column; gap: 6px; }
.jrow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--panel-2, #2b2b2b);
  border: 2px solid transparent; border-top-color: rgba(255, 255, 255, .12);
  border-left-color: rgba(255, 255, 255, .12);
  border-bottom-color: rgba(0, 0, 0, .45); border-right-color: rgba(0, 0, 0, .45);
}
.jrow.done { opacity: .55; }
.jrow .jmain { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.jrow .jnote { font-size: 11px; color: var(--muted, #9aa0a6); overflow-wrap: anywhere; }
.jrow .jts { font-size: 11px; color: var(--muted, #9aa0a6); min-width: 82px; }
.jrow .jby { font-size: 11px; color: var(--muted, #9aa0a6); }
.jrow .amt { white-space: nowrap; font-weight: 700; color: var(--gold, #f5c542); }
.mcbtn.tiny { padding: 3px 8px; font-size: 11px; }
@media (max-width: 720px) {
  .jrow { flex-wrap: wrap; gap: 6px; }
  .jrow .jts { min-width: 0; width: 100%; }
  .jrow .jmain { flex-basis: 100%; }
}

/* ------------------------------------- admin journal: toolbar and lists */
.sect-head.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 10px 0 12px; padding: 8px; background: rgba(0, 0, 0, .18);
}
.toolbar .chipbar { display: flex; flex-wrap: wrap; gap: 6px; }
.toolbar .chipbar.right { margin-left: auto; }
.toolbar .tb-lbl { font-size: 11px; color: var(--muted, #9aa0a6); align-self: center; }
.toolbar .tb-search { flex: 1 1 180px; min-width: 140px; }
.toolbar .tb-search.grow { flex: 2 1 260px; }
.toolbar select { max-width: 200px; }
.chip i { font-style: normal; opacity: .65; font-size: 11px; }

.dlist, .nlist, .jlist { display: flex; flex-direction: column; gap: 6px; }

/* debts: name | amount | note | meta | buttons */
.drow {
  display: grid; gap: 4px 12px; align-items: center; padding: 8px 10px;
  grid-template-columns: minmax(130px, 1fr) 96px minmax(0, 2fr) auto auto;
  background: var(--panel-2, #2b2b2b);
  border: 2px solid transparent;
  border-top-color: rgba(255, 255, 255, .1); border-left-color: rgba(255, 255, 255, .1);
  border-bottom-color: rgba(0, 0, 0, .45); border-right-color: rgba(0, 0, 0, .45);
}
.drow.done { opacity: .5; }
.drow.late { border-left-color: #c0392b; }
.drow .d-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.drow .d-amt { font-weight: 700; color: var(--gold, #f5c542); white-space: nowrap; }
.drow .d-amt small { font-size: 10px; opacity: .6; margin-left: 3px; }
.drow .d-note { color: var(--muted, #cfd3d7); overflow-wrap: anywhere; }
.drow .d-meta, .drow .d-act { display: flex; align-items: center; gap: 6px; }

/* the action list: time | badge | what | amount | who */
.jday {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 6px;
  font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted, #9aa0a6);
}
.jday::after { content: ""; flex: 1; height: 2px; background: rgba(255, 255, 255, .08); }
.jday i { font-style: normal; opacity: .6; }
.jrow {
  display: grid; gap: 4px 10px; align-items: center; padding: 6px 10px;
  grid-template-columns: 44px minmax(88px, auto) minmax(0, 1fr) 84px minmax(70px, auto);
  background: rgba(255, 255, 255, .03);
}
.jrow:nth-child(odd) { background: rgba(255, 255, 255, .055); }
.jrow .jts { font-size: 11px; color: var(--muted, #9aa0a6); }
.jrow .jmain { display: flex; flex-direction: column; min-width: 0; }
.jrow .jnote { font-size: 11px; color: var(--muted, #9aa0a6); overflow-wrap: anywhere; }
.jrow .amt { text-align: right; color: var(--gold, #f5c542); font-size: 12px; }
.jrow .jby { font-size: 11px; color: var(--muted, #9aa0a6); text-align: right; }

/* notes */
.nrow {
  display: grid; gap: 4px 10px; align-items: center; padding: 8px 10px;
  grid-template-columns: 26px minmax(0, 1fr) minmax(90px, auto) auto auto;
  background: var(--panel-2, #2b2b2b);
}
.nrow.pinned { border-left: 3px solid var(--gold, #f5c542); }
.nrow .nmain { display: flex; flex-direction: column; min-width: 0; }
.nrow .nbody { color: var(--muted, #cfd3d7); overflow-wrap: anywhere; }

.owedbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.owed { padding: 3px 8px; background: rgba(0, 0, 0, .25); font-size: 12px; }
.more { display: flex; justify-content: center; margin-top: 12px; }
.sub.small { font-size: 13px; margin-top: 16px; }

@media (max-width: 860px) {
  .drow { grid-template-columns: 1fr auto; }
  .drow .d-note { grid-column: 1 / -1; }
  .drow .d-meta { grid-column: 1; flex-wrap: wrap; }
  .drow .d-act { grid-column: 2; justify-content: flex-end; }
  .jrow { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .jrow .jby { grid-column: 2 / -1; text-align: left; }
  .jrow .amt { text-align: left; }
  .nrow { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .nrow .jby { grid-column: 2 / -1; text-align: left; }
  .toolbar .chipbar.right { margin-left: 0; }
  .toolbar select, .toolbar .tb-search { flex: 1 1 100%; max-width: none; }
}
.nrow.shared { border-left: 3px solid var(--lapis, #3b6ea5); }
.nrow.pinned.shared { border-left-color: var(--gold, #f5c542); }