.topbar{
  min-height:76px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,2fr) auto;
  gap:12px;
  align-items:center;
  padding:10px 12px;
}
.brand,.brand:visited{display:flex;align-items:center;gap:12px;min-width:0;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.logo-box{width:50px;height:50px;flex:none;display:flex;align-items:center;
  justify-content:center;border:3px solid var(--line);background:var(--yellow);
  box-shadow:3px 3px 0 var(--shadow)}
.brand-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.brand-tx > b{font-size:18px;font-weight:500;letter-spacing:1px}
.brand-tx > i{font-size:11px;font-style:normal;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.hero-mini{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;min-width:0}
.stat-line{font-size:11px;min-width:0;
  }
.stat-line > span:first-child{display:block;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-line b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-line.solo{align-self:center}
.panel-b > .stat-line + .stat-line{margin-top:8px}
.bar{display:block;height:10px;border:2px solid var(--line);background:var(--white);
  margin-top:3px;position:relative}
.bar > i{display:block;height:100%}
.bar .hp,.bar .fit{background:var(--peach)}
.bar .mp{background:var(--sky)}
.bar .xp,.bar .lv{background:var(--mint)}
.bar .mob{background:var(--red)}

.hero-cry{display:flex;align-items:center}
.hero-cry p{font-size:12px;color:var(--muted);line-height:1.6}

.top-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  justify-content:flex-end}
.chip,.chip:visited{display:flex;align-items:center;gap:5px;
  border:2px solid var(--line);background:var(--white);color:var(--ink);
  padding:6px 8px;min-height:32px;font-size:11px;
  box-shadow:2px 2px 0 var(--shadow);font-variant-numeric:tabular-nums;
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip b{font-weight:700;color:var(--ink)}
.chip .spr{flex:none}
.chip-buy,.chip-buy:visited{background:var(--violet)}
.chip-mail,.chip-mail:visited{background:var(--peach)}
.chip-go,.chip-go:visited{background:var(--yellow)}
.chip-live,.chip-live:visited{background:var(--mint2)}
.chip-live i{width:6px;height:6px;background:var(--green);
  border:1px solid var(--line);flex:none}
@media (hover:hover){
  .chip:hover{text-decoration:none;color:var(--ink);
    transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow)}
}

.nav{padding:10px;display:flex;flex-direction:column;gap:6px;
  position:sticky;top:calc(12px + var(--ah-stick, 0px));max-height:calc(100vh - 24px - var(--ah-stick, 0px));overflow-y:auto;
  scrollbar-width:thin;z-index:20}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:var(--hair)}
.nav-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:1px;
  margin:2px 0 -1px;
  }
.nav-main,.nav-rest{display:contents}
.nav-t,.nav-l,.nav-veil{display:none}
.nav a,.nav a:visited{display:flex;align-items:center;gap:8px;flex:none;
  border:2px solid var(--line);background:var(--white);padding:10px 9px;
  text-align:left;box-shadow:2px 2px 0 var(--shadow);color:var(--ink);
  min-height:40px;white-space:nowrap;position:relative}
.nav-rest a,.nav-rest a:visited{min-height:36px;padding:7px 9px}
.nav-rest .nav-title{margin-top:4px}
.nav-group{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:1px;margin:6px 0 0;padding:0 4px}
.nav a > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav a .spr{flex:none;opacity:.75}
.nav a.active{background:var(--mint2)}
.nav a.active .spr{opacity:1}
.nav .badge{margin-left:auto;background:var(--peach);border:1px solid var(--line);
  padding:0 4px;font-size:11px;color:var(--ink)}
@media (hover:hover){
  .nav a:hover{text-decoration:none;color:var(--ink);
    transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow)}
}

.side{padding:10px;display:grid;grid-template-rows:auto 1fr auto;gap:10px;
  min-height:0;position:sticky;top:calc(12px + var(--ah-stick, 0px));max-height:calc(100vh - 24px - var(--ah-stick, 0px));
  overflow:hidden;z-index:20}
.side:not(:has(.buff)){grid-template-rows:auto 1fr}

.profile{border:2px solid var(--line);background:var(--white);padding:9px;min-width:0}
.profile-grid{display:grid;grid-template-columns:72px 1fr;gap:10px;
  align-items:center;margin-bottom:9px}
.avatar{height:72px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line);background:var(--yellow)}
.avatar:hover{text-decoration:none}
.pwho{min-width:0;display:flex;flex-direction:column;gap:3px}
.pwho b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwho b a,.pwho b a:visited{color:var(--ink)}
.pwho small{font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwho .tag{align-self:flex-start;font-style:normal}
.profile .stat-line{margin-bottom:5px}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:11px;margin-top:9px}
.kv a,.kv a:visited{display:flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--hair);padding:5px 4px;min-height:32px;background:var(--field);
  color:var(--ink);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv a .spr{flex:none}
.kv a b{font-weight:500}
.kv a:hover{text-decoration:none;color:var(--ink);border-color:var(--line);
  background:var(--mint2)}

.buff{display:flex;flex-direction:column;gap:5px;
  border-color:var(--warn);background:var(--warn-bg)}
.buff-t{font-weight:700;font-size:11px;letter-spacing:1px;color:var(--warn);
  }
.buff a,.buff a:visited{display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:6px;color:var(--warn);font-size:11px}
.buff a:hover{text-decoration:none;filter:brightness(.92)}
.buff i{font-style:normal;font-variant-numeric:tabular-nums}

.chat{border:2px solid var(--line);background:var(--white);
  display:grid;grid-template-rows:auto 1fr auto;min-height:0}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 9px;border-bottom:2px solid var(--line);background:var(--sky);
  font-size:11px;color:var(--ink);
  }
.chat-t{font-weight:700;letter-spacing:1px}
.online,.online:visited{display:flex;align-items:center;gap:5px;color:var(--ink);
  font-size:11px;font-variant-numeric:tabular-nums}
.online:hover{text-decoration:none;color:var(--ink);filter:brightness(.9)}
.online i{width:6px;height:6px;background:var(--green);border:1px solid var(--line);flex:none}

.chat-log{padding:7px;overflow-y:auto;min-height:0;font-size:11px;line-height:1.45;
  scrollbar-width:thin}
.chat-log::-webkit-scrollbar{width:6px}
.chat-log::-webkit-scrollbar-thumb{background:var(--hair)}
.chat-line{display:grid;grid-template-columns:auto 1fr;gap:7px;
  padding:5px 4px;border-bottom:1px dashed var(--hair)}
.chat-line:last-child{border-bottom:none}
.chat-line .spr{opacity:.75;margin-top:2px}
.chat-line span{min-width:0;overflow-wrap:break-word;color:var(--ink);text-wrap:pretty}
.chat-line time{grid-column:2;color:var(--log-time);font-size:11px;
  font-variant-numeric:tabular-nums}
.chat-line.war{box-shadow:inset 4px 0 0 var(--red)}
.chat-line.war .spr{opacity:1}
.chat-line.good{box-shadow:inset 4px 0 0 var(--green)}
.chat-line.soft{box-shadow:inset 4px 0 0 var(--hair)}
.chat-line time{grid-row:2}
.chat-line .chat-cheer,.chat-line .chat-cheered{grid-column:2;grid-row:2;justify-self:end;align-self:center;margin:0}
.chat-line .chat-cheer .out{min-height:24px;padding:0 10px;font-size:12px}
.chat-line .chat-cheered{font-size:12px;font-weight:500;color:var(--muted)}
.chat-empty{padding:16px 9px;text-align:center;color:var(--muted);font-size:11px}
.chat-more,.chat-more:visited{display:block;padding:8px;text-align:center;
  border-top:2px solid var(--line);background:var(--yellow);
  color:var(--ink);font-size:11px}
.chat-more:hover{text-decoration:none;color:var(--ink);filter:brightness(1.06)}

.footer{min-height:54px;padding:8px 10px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.quick{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.q-set{display:contents}
.quick a,.quick a:visited{display:flex;align-items:center;white-space:nowrap;
  border:2px solid var(--line);background:var(--white);color:var(--ink);
  padding:6px 9px;min-height:32px;box-shadow:2px 2px 0 var(--shadow);font-size:11px}
.quick a.on{background:var(--mint2)}
@media (hover:hover){
  .quick a:hover{text-decoration:none;color:var(--ink);
    transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow)}
}
.server{font-size:11px;color:var(--muted);line-height:1.6;text-align:right;
  }

.rating{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:2px solid var(--line);padding-top:8px;margin-top:2px}
.rating img{width:214px;max-width:100%;height:auto;background:#fff;flex:none;
  border:2px solid var(--line)}
.rating-b{display:flex;flex-wrap:wrap;gap:2px 12px;min-width:0;
  font-size:11px;color:var(--muted);line-height:1.6;
  }
.rating-b b{color:var(--ink)}
.foot-lite .rating{border-top-width:1px;padding-top:6px}

.foot-lite{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:8px 14px;padding:4px 2px}
.foot-lite .quick a,.foot-lite .quick a:visited{border:none;background:none;
  box-shadow:none;min-height:26px;padding:2px 6px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px}
.foot-lite .quick a.on{background:none;color:var(--ink);font-weight:700}
.foot-lite .quick{gap:2px}
@media (hover:hover){
  .foot-lite .quick a:hover{transform:none;box-shadow:none;color:var(--link-a)}
}
.foot-lite .server{font-size:11px}
.app-solo{grid-template-rows:1fr auto}
.app-solo > .foot-lite{width:min(680px,100%);margin-inline:auto}
@media (max-width:760px){
  .foot-lite{grid-template-columns:1fr}
  .foot-lite .server{text-align:left}
}

@media (min-width:1051px){
  .topbar{grid-template-columns:minmax(0,1fr) auto}
  .hero-mini{display:none}
}

@media (max-width:1050px){
  .brand-tx > i{display:none}
  .main{grid-template-columns:170px minmax(0,1fr)}
  .nav{position:static;max-height:none;overflow:visible}
  .side{grid-column:1 / -1;grid-template-columns:280px 1fr;grid-template-rows:auto;
    position:static;max-height:none;overflow:visible;align-items:start}
  .side:not(:has(.buff)){grid-template-columns:280px 1fr;grid-template-rows:auto}
  .chat{min-height:220px;max-height:340px}
  .buff{grid-column:1}
}

@media (max-width:760px){
  .nav-t:focus-visible + .nav-l{outline:2px solid var(--link-a);outline-offset:-2px}
  .topbar{grid-template-columns:minmax(0,1fr);padding:8px;gap:8px}
  .brand,.hero-mini,.top-actions{grid-column:auto;min-width:0}
  .top-actions{justify-content:flex-start}
  .top-actions .chip:nth-child(n+6){display:none}
  .chip,.quick a,.kv a{min-height:44px}
  .brand-tx > i{display:none}
  .logo-box{width:40px;height:40px}
  .app{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .nav{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;
    display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:0;
    max-height:none;overflow:visible;border-width:3px 0 0;
    box-shadow:0 -3px 0 var(--shadow);
    padding-bottom:env(safe-area-inset-bottom)}
  .nav::before{display:none}
  .nav-title{display:none}
  .nav-main{display:contents}
  .nav > .nav-main > a,.nav > .nav-main > a:visited,.nav-l{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;font-size:11px;text-align:center;padding:7px 3px;min-height:58px;
    white-space:normal;line-height:1.2;position:relative;cursor:pointer;
    border:none;border-right:1px solid var(--line);background:var(--paper);
    box-shadow:none;color:var(--ink);transform:none}
  .nav-l{border-right:none}
  .nav > .nav-main > a.active,.nav-l.active{background:var(--mint2);
    box-shadow:inset 0 3px 0 var(--green)}
  .nav .badge{position:absolute;top:4px;right:calc(50% - 20px);margin:0}

  .nav-t{display:block;position:absolute;width:1px;height:1px;opacity:0;
    pointer-events:none;margin:0}
  .nav-l{display:flex}
  .nav-veil{display:none}
  .nav-t:checked ~ .nav-veil{display:block;position:fixed;inset:0;z-index:41;
    background:rgba(20,16,10,.45);cursor:default}

  .nav-rest{display:none}
  .nav-t:checked ~ .nav-rest{display:grid;grid-template-columns:repeat(3,1fr);
    gap:5px;position:fixed;left:0;right:0;bottom:calc(61px + env(safe-area-inset-bottom));
    z-index:42;padding:10px;background:var(--paper);
    border-top:3px solid var(--line);box-shadow:0 -4px 0 var(--shadow);
    max-height:60vh;overflow-y:auto}
  .nav-rest > a,.nav-rest > a:visited{display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;min-height:60px;
    padding:8px 4px;font-size:11px;text-align:center;line-height:1.2;
    white-space:normal;border:2px solid var(--line);background:var(--white);
    color:var(--ink);box-shadow:2px 2px 0 var(--shadow);position:relative}
  .nav-rest > a.active{background:var(--mint2)}
  .nav-rest .nav-title{display:block;grid-column:1 / -1;margin:0 0 2px}
  .nav-rest .nav-group{grid-column:1 / -1;margin:4px 0 0;padding:0}
  .side{display:grid;grid-template-columns:1fr;grid-template-rows:auto;margin-top:7px}
  .side:not(:has(.buff)){grid-template-columns:1fr}
  .chat{min-height:240px;max-height:none}
  .footer{grid-template-columns:1fr}
  .server{text-align:left}
}

@media (max-width:479px){
  .nav > .nav-main > a,.nav-l{font-size:11px;padding:6px 2px}
  .nav-rest{grid-template-columns:repeat(2,1fr)}
}

.pubbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;width:min(680px,100%);margin:10px auto 0;padding:8px 10px;border:3px solid var(--line);background:var(--paper)}
.pub-logo:hover{text-decoration:none}
.pub-nav{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto;min-width:0}
.pub-nav a,.pub-nav a:visited{padding:4px 6px;font-size:12px;color:var(--ink)}
.pub-nav a.on{background:var(--mint2)}
.pub-go{display:flex;gap:6px;flex:none}
.pub-go .bt{width:auto;min-height:36px;padding:6px 10px}
.pub-go .bt b{font-size:12px}
.app-solo:has(> .pubbar){grid-template-rows:auto 1fr auto}