/* rpg.uanet.net, in the uanet.net look: paper, ink, blue and yellow, 3px borders,
   offset shadows. Behind «>_ Для олдів», an amber CRT terminal. Every page holds
   both views; <html data-mode="term"> picks the terminal one. */

@font-face{font-family:"Unbounded";src:url(/static/fonts/unbounded-900.d31b185de5.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Fixel Text";src:url(/static/fonts/fixel-text-var.31bbb33e57.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu Mono";src:url(/static/fonts/ubuntu-mono-400.b9dea9f111.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu Mono";src:url(/static/fonts/ubuntu-mono-700.6a22633fab.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#fffdf5;--ink:#14123a;--blue:#2338ff;--sun:#ffd43b;--pink:#ff6fae;--mint:#3ddc9f;--sky:#bfe3ff;--mute:#4b4870;--line:#e4e1d3;--card:#ffffff;
  --t-bg:#140f09;--t-fg:#f4c27a;--t-dim:#a88550;--t-hi:#ffe2b0;--t-link:#7fd1c7;--t-line:#3a2c18;--t-red:#ff8a65;--t-green:#9be28a;--t-gold:#ffd166;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Fixel Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Ubuntu Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 var(--body)}
[hidden]{display:none!important}
a{color:var(--blue)}
a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.container{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
@media (min-width:760px){.container{padding-left:40px;padding-right:40px}}
code,.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* ---------- the two views ---------- */
.term-view{display:none}
html[data-mode="term"]{color-scheme:dark}
html[data-mode="term"] body{background:var(--t-bg);color:var(--t-fg)}
html[data-mode="term"] .paper-view{display:none}
html[data-mode="term"] .term-view{display:block;animation:crt .45s ease-out}

/* ---------- header and footer ---------- */
.site-header{border-bottom:3px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:10}
.site-nav{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding-block:14px}
.logo{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);font:900 20px/1 var(--display);letter-spacing:-.03em}
.logo i{width:14px;height:14px;border-radius:50%;background:var(--blue);box-shadow:7px 0 0 var(--sun);flex:none}
.logo b{background:var(--ink);color:var(--sun);padding:5px 8px 4px;border-radius:8px;font-size:14px;letter-spacing:0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-right:auto}
.tabs a{font:700 15px/1 var(--body);color:var(--ink);text-decoration:none;padding:10px 14px;border-radius:999px;border:2px solid transparent}
.tabs a:hover{border-color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.olds-btn{font:700 15px/1 var(--mono);border-radius:999px;padding:10px 14px;background:var(--t-bg);color:var(--t-fg);border:0;cursor:pointer}
.olds-btn:hover{background:#2a1f10}
.updated{font:14px var(--mono);color:var(--mute)}
.updated.is-stale{color:#b3261e}
@media (max-width:700px){.site-header{position:static}.tabs{order:3;width:100%}.tabs a{padding:8px 11px;font-size:14px}}
.site-footer{border-top:3px solid var(--ink);margin-top:clamp(36px,6vw,72px);padding-block:20px;font:15px var(--mono);color:var(--mute)}
.site-footer .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.site-footer a{color:inherit}

/* ---------- shared ---------- */
main{display:block}
.section{padding-block:clamp(36px,6vw,72px)}
.section.flush-top{padding-top:0}
h1,h2{font-family:var(--display);font-weight:900;letter-spacing:-.04em;text-wrap:balance;margin:0}
h1{font-size:clamp(36px,6vw,72px);line-height:.95;margin-bottom:18px}
h2{font-size:clamp(26px,3.6vw,40px);line-height:1;margin-bottom:22px}
h3,.panel-title{font:800 20px/1.2 var(--body);letter-spacing:normal;margin:0 0 8px}
.lede{font-size:clamp(17px,1.8vw,20px);color:var(--mute);max-width:56ch;margin:0}
.page-intro{margin-bottom:28px}
.section-intro{margin-bottom:22px}
.box{background:var(--card);border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink)}
.padded{padding:clamp(16px,2.4vw,24px)}
.chip{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--body);padding:6px 10px;border-radius:999px;border:2px solid var(--ink);white-space:nowrap;background:var(--card)}
.chip.online{background:var(--mint)}
.chip.offline{background:#ecebe4;color:var(--mute);border-color:#9b98ad}
.chip.good{background:var(--sky)}
.chip.neutral{background:var(--card)}
.chip.evil{background:var(--pink)}
.chip.npc{background:var(--sun)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.note{font-size:15px;color:var(--mute)}
.back{display:inline-block;margin-bottom:14px;font-weight:700;text-decoration:none}
.notice{padding-top:20px}
.warn{background:var(--sun);border:3px solid var(--ink);border-radius:14px;padding:12px 16px;font-weight:600}
.empty{padding:28px;text-align:center;color:var(--mute)}
.player-class{color:var(--mute)}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:clamp(24px,4vw,48px);align-items:end}
.circ{position:relative;display:inline-block;padding:0 .08em}
.circ svg{position:absolute;left:-.16em;top:-.02em;width:calc(100% + .32em);height:calc(100% + .12em);overflow:visible}
.stats{display:grid;gap:0}
.stats div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:2px dashed var(--line)}
.stats div:last-child{border-bottom:0}
.stats dt{color:var(--mute);margin:0}
.stats dd{margin:0;font-weight:800;text-align:right}
.teaser{padding-bottom:clamp(36px,6vw,72px)}
.quest-teaser{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;background:var(--blue);color:#fff;border:3px solid var(--ink);border-radius:18px;padding:18px 22px;box-shadow:6px 6px 0 var(--ink);text-decoration:none}
.quest-teaser b{font:900 20px/1.15 var(--display);letter-spacing:-.02em}
.quest-teaser .teaser-action{font-weight:700;background:var(--sun);color:var(--ink);border-radius:999px;padding:8px 14px;white-space:nowrap}
.how{background:var(--sun);border-block:3px solid var(--ink)}
.how .note{margin:22px 0 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;margin:0;padding:0}
.step{padding:20px}
.step-number{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--sun);font:900 18px var(--display);margin-bottom:10px}
.step p{margin:0 0 10px;color:var(--mute);font-size:16px}
.command{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--sun);border:2px solid var(--ink);border-radius:10px;padding:8px 10px;font:700 16px/1.35 var(--mono);overflow-wrap:anywhere}
.command code{flex:1 1 auto;min-width:0}
.copy{font:700 13px var(--body);background:var(--ink);color:var(--sun);border:0;border-radius:7px;padding:6px 9px;cursor:pointer}
.penalty-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.penalty-cards .box{padding:16px 18px;box-shadow:4px 4px 0 var(--ink)}
.penalty-cards b{display:block;font-size:18px}
.penalty-cards code{font-size:15px;color:var(--mute)}
.events{list-style:none;margin:0;padding:0}
.events li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:14px 20px;border-top:2px dashed var(--line)}
.events li:first-child{border-top:0}
.events time{font:700 15px var(--mono);color:var(--mute);white-space:nowrap}
.events a{font-weight:700;color:var(--ink);text-decoration-color:var(--blue);text-decoration-thickness:2px}
@media (max-width:860px){.hero{grid-template-columns:1fr}.steps{grid-template-columns:1fr}}

/* ---------- ranking ---------- */
.ranking{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.ranking th{font:700 13px var(--body);text-transform:uppercase;letter-spacing:.06em;text-align:left;color:var(--mute);padding:12px 14px;border-bottom:3px solid var(--ink);background:var(--paper)}
.ranking td{padding:12px 14px;border-bottom:2px dashed var(--line);vertical-align:middle}
.ranking tr:last-child td{border-bottom:0}
.ranking .rank{font:900 18px var(--display);width:1%}
.ranking .name a{font-weight:800;font-size:18px;color:var(--ink);text-decoration:none}
.ranking .name a:hover{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:3px}
.ranking .level{font:900 20px var(--display)}
.ranking .countdown{font:700 16px var(--mono);white-space:nowrap}
.ranking tr.first td{background:#fff3c4}
.ranking tr.second td{background:#e3f2ff}
.ranking tr.third td{background:#ffe3ef}
.ranking .podium .medal{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:3px solid var(--ink);background:var(--card)}
.ranking .first .medal{background:var(--sun)}
.ranking .second .medal{background:var(--sky)}
.ranking .third .medal{background:var(--pink)}
.ranking .tags{white-space:nowrap}
.ranking .tags .chip+.chip{margin-left:6px}
@media (max-width:760px){
  .ranking,.ranking tbody{display:block;border:0;box-shadow:none;background:none;border-radius:0}
  .ranking thead{display:none}
  .ranking tr{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"rank name level" "rank class class" "rank countdown countdown" "rank tags tags";gap:4px 12px;align-items:center;background:var(--card);border:3px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);padding:12px 14px;margin-bottom:14px}
  .ranking tr.first{background:#fff3c4}
  .ranking tr.second{background:#e3f2ff}
  .ranking tr.third{background:#ffe3ef}
  .ranking td{display:block;padding:0;border:0;background:none!important}
  .ranking .rank{grid-area:rank;align-self:start}
  .ranking .name{grid-area:name}
  .ranking .level{grid-area:level;text-align:right}
  .ranking .player-class{grid-area:class}
  .ranking .countdown{grid-area:countdown}
  .ranking .tags{grid-area:tags;white-space:normal;display:flex;gap:6px;flex-wrap:wrap}
  .ranking .tags .chip+.chip{margin-left:0}
  .ranking .countdown::before{content:"до рівня ";font:500 13px var(--body);color:var(--mute)}
  .ranking .level::before{content:"рів. ";font:500 13px var(--body);color:var(--mute)}
}
.npc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.npc-card{padding:16px 18px;box-shadow:4px 4px 0 var(--ink);display:grid;gap:6px;background:#fffbe6;align-content:start}
.npc-card>div{display:flex;gap:6px;flex-wrap:wrap}
.npc-card a{font-weight:800;font-size:18px;color:var(--ink);text-decoration:none}
.npc-card b{font-size:18px}

/* ---------- player ---------- */
.profile{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.profile-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.chip.rank-chip{background:var(--sun)}
.countdown-box{margin-bottom:28px}
.big-countdown{font:700 clamp(26px,3.4vw,36px)/1 var(--mono)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 24px;margin:0}
.facts div{padding:10px 0;border-bottom:2px dashed var(--line)}
.facts dt{font:600 13px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.facts dd{margin:2px 0 0;font-weight:800;font-size:18px}
.items-heading{margin-top:44px}
.items{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.item{border:3px solid var(--ink);border-radius:14px;padding:12px;background:var(--card);display:grid;gap:2px;align-content:start;min-height:96px}
.item small{font:600 12px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.item b{font:900 26px/1 var(--display)}
.item.unique{background:var(--sun);box-shadow:4px 4px 0 var(--blue);grid-column:span 2}
.item.unique em{font-style:normal;font-weight:800;font-size:15px;line-height:1.2}
.item.unique small::after{content:" · унікальний";color:var(--ink)}
.item-sum{margin-top:14px;font-weight:700}
.item-sum b{font:900 22px var(--display)}
.profile-side{display:grid;gap:24px}
.penalties{width:100%;border-collapse:collapse}
.penalties td{padding:9px 0;border-bottom:2px dashed var(--line);font-size:15px}
.penalties td:last-child{text-align:right;font:700 15px var(--mono);white-space:nowrap;padding-left:10px}
.penalties tr.zero td{color:#9b98ad}
.penalties tr.total td{border-bottom:0;font-weight:800;padding-top:12px}
.minimap{display:block;color:inherit;text-decoration:none}
.minimap svg{display:block;width:100%;height:auto;border-radius:12px}
@media (max-width:900px){.profile{grid-template-columns:1fr}.items{grid-template-columns:repeat(2,1fr)}}

/* ---------- map ---------- */
.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.map-frame svg{display:block;width:100%;height:auto;border-radius:12px}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.legend li{display:flex;gap:10px;align-items:center}
.legend svg{flex:none}
.legend-note{margin:14px 0 0}
.ground-heading{margin-top:22px}
.ground-items{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:15px}
.ground-items code{color:var(--mute)}
@media (max-width:900px){.map-layout{grid-template-columns:1fr}}
/* markers the pages put on the map, over the terrain from terrain.go */
.map-player-dot{fill:var(--paper);stroke-dasharray:3 2}
.map-player.online .map-player-dot{fill:var(--blue);stroke-dasharray:none}
.map-player.npc .map-player-dot{fill:var(--sun);stroke-dasharray:none}
.map-quest-point path{fill:var(--sun)}
.map-quest-point.passed path{fill:#e8e4d4}

/* ---------- quest ---------- */
.chip.quest-badge{background:var(--sun);margin-bottom:16px}
.quest-goal{font:900 clamp(24px,3.6vw,40px)/1.1 var(--display);letter-spacing:-.03em;margin:14px 0 18px;text-wrap:balance}
.quest-players{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.quest-stages{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.quest-stages div{border:3px solid var(--ink);border-radius:14px;padding:12px 14px;background:var(--card)}
.quest-stages div.current{background:var(--sun);box-shadow:4px 4px 0 var(--ink)}
.quest-stages div.passed{opacity:.55}
.quest-stages small{display:block;font:600 12px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.quest-map{max-width:760px}
.quest-deadline{max-width:560px}
.no-quest{text-align:center;padding:clamp(36px,7vw,80px) 20px}
.no-quest h1{margin-bottom:12px}
.no-quest .lede{margin:0 auto}

/* ---------- the terminal ---------- */
.term-view{min-height:100vh;font:16px/1.5 var(--mono);color:var(--t-fg);position:relative}
.term-view::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.term-screen{max-width:980px;padding-block:24px 48px;display:grid;gap:26px}
.term-screen>*{min-width:0;max-width:100%}
.term-view a{color:var(--t-link);text-decoration:none;border-bottom:1px dotted var(--t-link)}
.term-view a:hover{color:var(--t-hi);border-color:var(--t-hi)}
.term-view pre{margin:0;font:inherit;white-space:pre;overflow-x:auto}
.term-view pre.wrapped{white-space:pre-wrap;overflow-wrap:anywhere}
.term-view .ascii-logo{color:var(--t-hi);text-shadow:0 0 12px rgba(255,180,90,.35);font-size:clamp(10px,2.2vw,16px);line-height:1.1}
.term-nav{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--t-line);padding-bottom:12px}
.term-nav a[aria-current="page"]{color:var(--t-bg);background:var(--t-fg);border-color:transparent;padding:0 4px}
.term-nav .updated{margin-left:auto;font:inherit;color:var(--t-dim)}
.term-nav .updated.is-stale{color:var(--t-red)}
.term-nav button{font:inherit;background:none;border:1px solid var(--t-dim);color:var(--t-fg);padding:4px 10px;cursor:pointer}
.term-nav button:hover{background:var(--t-fg);color:var(--t-bg)}
.prompt{color:var(--t-dim)}
.prompt b{color:var(--t-link);font-weight:700}
.ascii-table,.ascii-map{color:var(--t-dim)}
.t-fg{color:var(--t-fg)}
.t-hi{color:var(--t-hi)}
.t-dim{color:var(--t-dim)}
.t-ok{color:var(--t-green)}
.t-bad{color:var(--t-red)}
.t-gold{color:var(--t-gold)}
.cursor{display:inline-block;width:.6em;height:1.1em;background:var(--t-fg);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@keyframes crt{0%{opacity:0;filter:brightness(3) blur(3px)}15%{opacity:1}35%{opacity:.6}55%{opacity:1;filter:brightness(1.5)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.cursor,html[data-mode="term"] .term-view{animation:none}}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:10px;font:600 14px var(--body);z-index:20}