/* ============================================================
   pless.uk — shared design system
   One source of truth for the whole site. Edit tokens here.
   ============================================================ */
:root{
  --bg:        #15140f;   /* warm near-black            */
  --bg-2:      #1d1b15;   /* raised surface             */
  --bg-3:      #262219;   /* card surface               */
  --ink:       #f5f0e6;   /* primary text               */
  --ink-soft:  #b6ad9c;   /* secondary text             */
  --ink-faint: #6f685b;   /* labels / hints             */
  --line:      #38332a;   /* hairline borders           */

  --blue:   #4ea8ff;      /* saltire glow / primary     */
  --amber:  #ffb43d;      /* warm accent                */
  --coral:  #ff5d5d;      /* games pop                  */
  --green:  #6ee787;      /* arcade green               */
  --violet: #c08cff;      /* extra cartridge colour     */

  --maxw: 1060px;
  --radius: 14px;
  --shadow: 0 18px 50px -18px rgba(0,0,0,.7);

  --font-display: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  --font-body:    "Spline Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(16px,1.05vw,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 18% -10%, rgba(78,168,255,.10), transparent 45%),
    radial-gradient(circle at 92% 8%, rgba(255,180,61,.08), transparent 40%),
    linear-gradient(transparent 0 31px, rgba(255,255,255,.012) 31px 32px);
  background-size:auto,auto,100% 32px;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(21,20,15,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{font-family:var(--font-mono);font-weight:700;letter-spacing:.02em;
  font-size:1rem;display:flex;align-items:center;gap:9px}
.brand .dot{width:9px;height:9px;border-radius:2px;background:var(--green);
  box-shadow:0 0 12px var(--green);animation:blink 2.6s steps(1,end) infinite}
@keyframes blink{0%,70%{opacity:1}71%,100%{opacity:.25}}
.nav-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:24px;font-family:var(--font-mono);font-size:.82rem}
.nav-links a{color:var(--ink-soft);transition:color .2s;position:relative;padding-bottom:3px}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--blue);border-radius:2px}
@media(max-width:640px){.nav-links{gap:16px;font-size:.74rem}}

/* ---------- hero ---------- */
.hero{padding:clamp(70px,12vh,140px) 0 clamp(50px,8vh,90px)}
.eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-bottom:22px;
  display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--blue)}
.hero h1{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.7rem,7.5vw,5.4rem);line-height:.98;letter-spacing:-.02em;margin-bottom:26px}
.hero h1 .wee{color:var(--amber);font-style:italic}
.hero .lede{font-size:clamp(1.1rem,2vw,1.4rem);color:var(--ink-soft);max-width:40ch;line-height:1.5}
.hero .cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.hero-portrait{width:100%;max-width:200px;justify-self:center;margin:0}
.hero-portrait img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45)) drop-shadow(0 0 34px rgba(78,168,255,.16))}
@media(min-width:600px){.hero-portrait{max-width:260px}}
@media(min-width:900px){
  .hero .wrap{grid-template-columns:1.15fr .85fr;gap:52px}
  .hero-portrait{justify-self:end;max-width:380px}
}

.btn{font-family:var(--font-mono);font-size:.85rem;font-weight:700;
  padding:13px 22px;border-radius:9px;border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:9px;transition:.22s;background:var(--bg-2)}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--blue);color:#06121f;border-color:var(--blue);
  box-shadow:0 8px 28px -8px var(--blue)}
.btn.primary:hover{box-shadow:0 14px 36px -8px var(--blue)}
.btn .arr{transition:transform .22s}
.btn:hover .arr{transform:translateX(3px)}

/* entrance */
.rise{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- generic section ---------- */
section{padding:clamp(56px,9vh,104px) 0;position:relative}
.page-head{padding:clamp(56px,10vh,96px) 0 clamp(20px,4vh,40px)}
.sec-label{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.sec-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.01em;margin-bottom:8px}
.page-head .sec-title{font-size:clamp(2.3rem,6vw,3.6rem)}
.page-head .wee{color:var(--coral);font-style:italic}
.lead-para{color:var(--ink-soft);max-width:60ch;font-size:clamp(1.05rem,1.6vw,1.2rem);margin-top:8px}
.divider{height:1px;background:var(--line);margin:0 auto;max-width:var(--maxw)}

/* ---------- summary band ---------- */
.summary{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.summary .wrap{padding-top:46px;padding-bottom:46px}
.summary p{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.35;max-width:30ch;letter-spacing:-.01em}
.summary .lede-sub{font-family:var(--font-body);font-weight:400;font-size:1.05rem;
  color:var(--ink-soft);max-width:60ch;margin-top:18px;letter-spacing:0}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:54px;align-items:start}
@media(max-width:780px){.about-grid{grid-template-columns:1fr;gap:34px}}
.about-body p{margin-bottom:18px;color:var(--ink-soft)}
.about-body p strong{color:var(--ink);font-weight:600}
.facts{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:26px}
.facts h3{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px}
.facts dl{display:grid;gap:14px}
.facts dt{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.08em}
.facts dd{color:var(--ink);font-size:.96rem;margin-top:2px}

/* ---------- games ---------- */
.games-section{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.games-section::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(rgba(255,255,255,0) 0 2px, rgba(0,0,0,.04) 2px 4px)}
.games-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:38px}
.games-head .sec-title .wee{color:var(--coral);font-style:italic}
.games-head p{color:var(--ink-soft);max-width:42ch}

.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.cart{position:relative;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-3);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s,box-shadow .28s}
.cart:hover{transform:translateY(-6px);border-color:var(--c);box-shadow:0 22px 48px -22px var(--c)}
.cart .screen{height:128px;position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 80% -20%, color-mix(in srgb,var(--c) 40%,transparent), transparent 60%),var(--bg);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.cart .screen::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(var(--c) 1px,transparent 1px),linear-gradient(90deg,var(--c) 1px,transparent 1px);
  background-size:16px 16px;mask:radial-gradient(120% 80% at 50% 120%,#000,transparent 75%);
  -webkit-mask:radial-gradient(120% 80% at 50% 120%,#000,transparent 75%)}
.cart .glyph{position:relative;z-index:0;font-family:var(--font-display);font-weight:800;font-size:2.6rem;
  color:var(--c);letter-spacing:-.03em;text-shadow:0 0 22px color-mix(in srgb,var(--c) 60%,transparent)}
.cart .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cart .screen::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(transparent 50%,rgba(0,0,0,.06) 50%) 0 0/100% 3px;mix-blend-mode:multiply}
.cart .body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.cart .tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.cart h3{font-family:var(--font-display);font-weight:700;font-size:1.28rem;margin-bottom:8px;line-height:1.1}
.cart p{font-size:.9rem;color:var(--ink-soft);flex:1;margin-bottom:16px}
.cart .foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cart .path{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart .play{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--c);display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.cart .play .arr{transition:transform .22s}
.cart:hover .play .arr{transform:translateX(4px)}
.cart .full{position:absolute;inset:0;z-index:2}

/* ---------- cv ---------- */
.cv-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media(max-width:780px){.cv-grid{grid-template-columns:1fr;gap:34px}}
.cv-col h3{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cv-org{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:2px}
.cv-org-meta{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);margin-bottom:18px;letter-spacing:.04em}
.role{margin-bottom:26px;position:relative;padding-left:22px}
.role::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:var(--amber)}
.role .when{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint)}
.role .what{font-family:var(--font-display);font-weight:700;font-size:1.12rem;margin:3px 0 2px}
.role .where{color:var(--ink-soft);font-size:.92rem;margin-bottom:7px}
.role .desc{font-size:.9rem;color:var(--ink-soft)}
.role ul{list-style:none;margin-top:8px;display:grid;gap:7px}
.role ul li{font-size:.89rem;color:var(--ink-soft);position:relative;padding-left:16px}
.role ul li::before{content:"›";position:absolute;left:0;color:var(--amber);font-weight:700}
.skills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.chip{font-family:var(--font-mono);font-size:.76rem;padding:7px 12px;border:1px solid var(--line);
  border-radius:7px;color:var(--ink-soft);background:var(--bg-2)}
.cv-note{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint);
  border-left:2px solid var(--amber);padding-left:12px;margin-top:8px}

/* credentials & affiliations */
.creds-block{margin-top:52px;border-top:1px solid var(--line);padding-top:34px}
.creds-block h3{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:22px}
.creds{display:flex;flex-wrap:wrap;gap:16px}
.cred{display:flex;align-items:center;gap:16px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 20px;min-width:240px;flex:1 1 240px;transition:border-color .25s}
.cred:hover{border-color:var(--ink-faint)}
.cred-logo{width:58px;height:58px;flex-shrink:0;border-radius:10px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.cred-logo.lockup{width:auto;min-width:128px;padding:0 14px}
.cred-logo.lockup img{height:38px;width:auto;padding:0}
.cred-logo img{width:100%;height:100%;object-fit:contain;padding:7px}
.cred-fallback{display:none;font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;color:#15140f}
.cred-meta strong{display:block;font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.15}
.cred-meta span{display:block;font-size:.82rem;color:var(--ink-soft);margin-top:2px}
.cred-meta .post{font-family:var(--font-mono);font-size:.7rem;color:var(--amber);letter-spacing:.08em;margin-top:5px}

/* ---------- footer ---------- */
footer.site{padding:64px 0 54px;text-align:center;border-top:1px solid var(--line)}
footer.site .big{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:18px}
footer.site .links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;font-family:var(--font-mono);font-size:.85rem;margin-bottom:34px}
footer.site .links a{color:var(--ink-soft);transition:color .2s;border-bottom:1px solid transparent;padding-bottom:2px}
footer.site .links a:hover{color:var(--blue);border-color:var(--blue)}
footer.site .copy{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint)}

/* ---------- signpost cards (home) ---------- */
.signposts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:38px}
.signpost{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:26px;
  transition:transform .25s,border-color .25s;display:block}
.signpost:hover{transform:translateY(-4px);border-color:var(--blue)}
.signpost .n{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);letter-spacing:.1em}
.signpost h3{font-family:var(--font-display);font-weight:700;font-size:1.35rem;margin:10px 0 6px}
.signpost p{font-size:.9rem;color:var(--ink-soft);margin-bottom:14px}
.signpost .go{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--blue);display:inline-flex;gap:6px;align-items:center}
.signpost .go .arr{transition:transform .22s}
.signpost:hover .go .arr{transform:translateX(4px)}

/* ---------- memberships (plain text, no branding) ---------- */
.memberships{margin-top:20px;font-size:.92rem;color:var(--ink-soft)}

/* ---------- blog index ---------- */
.post-list{display:grid;gap:4px;margin-top:8px}
.post-item{display:block;padding:26px 0;border-bottom:1px solid var(--line);transition:border-color .2s}
.post-item:first-child{border-top:1px solid var(--line)}
.post-item:hover h3{color:var(--blue)}
.post-meta{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint);letter-spacing:.04em;margin-bottom:8px}
.post-item h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.7rem);
  line-height:1.15;margin-bottom:8px;transition:color .2s}
.post-item p{color:var(--ink-soft);font-size:.96rem;max-width:62ch;margin-bottom:12px}
.post-tags,.article .tags{display:flex;flex-wrap:wrap;gap:8px}
.tg{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:lowercase;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:6px;padding:4px 9px}

/* ---------- single post / article ---------- */
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.article{padding:clamp(48px,9vh,86px) 0}
.article .back{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-faint);
  display:inline-flex;align-items:center;gap:7px;margin-bottom:30px;transition:color .2s}
.article .back:hover{color:var(--blue)}
.article h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2rem,5vw,3rem);line-height:1.05;margin-bottom:16px}
.article .meta{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint);
  letter-spacing:.04em;margin-bottom:14px}
.article .tags{margin-bottom:40px}
.article .body{font-size:clamp(1.05rem,1.5vw,1.15rem);line-height:1.7}
.article .body p{margin-bottom:22px;color:#ddd5c7}
.article .body h2{font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  letter-spacing:-.01em;margin:42px 0 14px}
.article .body ul{list-style:none;margin:0 0 22px;display:grid;gap:10px}
.article .body ul li{position:relative;padding-left:20px;color:#ddd5c7}
.article .body ul li::before{content:"›";position:absolute;left:0;color:var(--amber);font-weight:700}
.article .body a:not(.btn){color:var(--blue);border-bottom:1px solid color-mix(in srgb,var(--blue) 40%,transparent)}
.article .body blockquote{border-left:2px solid var(--amber);padding-left:18px;margin:0 0 22px;
  color:var(--ink-soft);font-style:italic}
.article .body code{font-family:var(--font-mono);font-size:.86em;background:var(--bg-2);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.article .end{margin-top:48px;padding-top:28px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint)}

/* ---------- about portrait (arcade / CRT frame) ---------- */
.about-side{display:flex;flex-direction:column;gap:22px}
.portrait{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:#0e0c09;
  box-shadow:0 0 0 1px rgba(78,168,255,.22), var(--shadow), 0 0 60px -22px rgba(78,168,255,.45)}
.portrait img{width:100%;height:auto;display:block;filter:saturate(1.03) contrast(1.03)}
/* CRT scanlines + warm vignette, drawn in CSS so the photo file stays untouched */
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(transparent 50%, rgba(0,0,0,.05) 50%) 0 0 / 100% 3px,
    radial-gradient(120% 120% at 50% 30%, transparent 55%, rgba(14,12,9,.6) 100%);
  mix-blend-mode:multiply}
.portrait .tag{position:absolute;left:12px;bottom:12px;z-index:2;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:rgba(14,12,9,.7);border:1px solid var(--line);
  padding:5px 9px;border-radius:7px;backdrop-filter:blur(3px)}
.portrait .tag b{color:var(--amber);font-weight:700}

/* ---------- dot breaker (header easter egg) ---------- */
.dotbreaker-backdrop{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(21,20,15,.82);backdrop-filter:blur(8px);
}
.dotbreaker-backdrop.show{display:flex;animation:db-in .18s ease-out}
@keyframes db-in{from{opacity:0}to{opacity:1}}
.dotbreaker-modal{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;max-width:560px;width:100%;
  animation:db-pop .22s cubic-bezier(.34,1.4,.64,1);
}
@keyframes db-pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.dotbreaker-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dotbreaker-title{font-family:var(--font-mono);font-weight:700;font-size:.85rem;
  letter-spacing:.08em;display:flex;align-items:center;gap:9px}
.dotbreaker-title .dot{width:9px;height:9px;border-radius:2px;background:var(--green);
  box-shadow:0 0 12px var(--green)}
.dotbreaker-close{background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--ink-soft);font-family:var(--font-mono);font-size:.8rem;
  width:28px;height:28px;cursor:pointer;transition:color .2s,border-color .2s}
.dotbreaker-close:hover{color:var(--ink);border-color:var(--ink-faint)}
.dotbreaker-modal canvas{width:100%;height:auto;display:block;border-radius:8px;
  background:var(--bg);border:1px solid var(--line);touch-action:none;cursor:none}
.dotbreaker-hint{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);
  text-align:center;margin-top:10px}

/* ---------- konami cheats modal ---------- */
.konami-backdrop{
  position:fixed;inset:0;z-index:210;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(21,20,15,.85);backdrop-filter:blur(8px);cursor:pointer;
}
.konami-backdrop.show{display:flex;animation:db-in .15s ease-out}
.konami-modal{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:44px 40px;max-width:640px;text-align:center;
  animation:konami-slam .3s cubic-bezier(.22,1.6,.5,1);
}
@keyframes konami-slam{
  0%{transform:scale(1.6);opacity:0}
  60%{transform:scale(.97);opacity:1}
  100%{transform:scale(1)}
}
.konami-big{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(2rem,7vw,3.4rem);
  letter-spacing:.06em;color:var(--green);text-shadow:0 0 24px var(--green);
  animation:konami-flash .5s steps(2) 3;
}
@keyframes konami-flash{50%{opacity:.35}}
.konami-small{
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);
  margin-top:18px;line-height:1.7;
}

/* ---------- sudo terminal ---------- */
.sudo-backdrop{
  position:fixed;inset:0;z-index:220;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(21,20,15,.85);backdrop-filter:blur(8px);
}
.sudo-backdrop.show{display:flex;animation:db-in .15s ease-out}
.sudo-term{
  width:100%;max-width:680px;background:#0d0c09;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);overflow:hidden;
}
.sudo-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;
  background:var(--bg-3);border-bottom:1px solid var(--line)}
.sudo-dot{width:11px;height:11px;border-radius:50%}
.sudo-dot.r{background:#ff5d5d}.sudo-dot.y{background:#ffb43d}.sudo-dot.g{background:#6ee787}
.sudo-title{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);margin-left:8px}
.sudo-body{padding:16px 18px;height:340px;overflow-y:auto;
  font-family:var(--font-mono);font-size:.78rem;line-height:1.75;color:var(--ink-soft)}
.sudo-line b{color:var(--ink);font-weight:400}
.sudo-line.green{color:var(--green)}
.sudo-line.faint{color:var(--ink-faint)}
.sudo-prog{color:var(--green)}
.sudo-caret{animation:sudo-blink 1s steps(1) infinite;color:var(--green)}
@keyframes sudo-blink{50%{opacity:0}}
.sudo-close-hint{opacity:.7}

/* ---------- achievement toast ---------- */
.ach-toast{
  position:fixed;right:18px;bottom:18px;z-index:230;max-width:340px;
  background:var(--bg-2);border:1px solid var(--green);border-radius:12px;
  box-shadow:var(--shadow),0 0 24px rgba(110,231,135,.25);
  padding:14px 18px;transform:translateY(140%);opacity:0;
  transition:transform .5s cubic-bezier(.22,1.4,.4,1),opacity .4s;
}
.ach-toast.show{transform:translateY(0);opacity:1}
.ach-head{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--green);margin-bottom:5px}
.ach-name{font-family:var(--font-display);font-weight:700;font-size:.92rem;line-height:1.45;color:var(--ink)}
.ach-desc{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);margin-top:4px}