/* ===========================================================
   STIKORD.DK — brand stylesheet
   Neo-brutalistisk dansk partyspil. Mobil-først + desktop.
   =========================================================== */
:root{
  --bg:#FFF3DC; --ink:#1A1410; --paper:#FFFEF9;
  --pink:#FF5C8A; --teal:#21C7B6; --yellow:#FFC93C; --blue:#5B8DEF; --red:#FF6B5B;
  --r:20px; --r-sm:14px;
  --sh-sm:4px 4px 0 var(--ink); --sh:6px 6px 0 var(--ink); --sh-lg:8px 8px 0 var(--ink);
  --font-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --font-body:"Space Grotesk",system-ui,-apple-system,Roboto,sans-serif;
  --bw:4px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  background-color:var(--bg); color:var(--ink);
  background-image:radial-gradient(rgba(26,20,16,.05) 1.5px, transparent 1.5px);
  background-size:22px 22px;
  font-family:var(--font-body); font-weight:600; line-height:1.45; overflow-x:hidden;
}
h1,h2,h3,p{margin:0}
main{max-width:1000px; margin:0 auto; padding:20px 16px 100px}
.hidden{display:none !important}

/* ── Layout-containere ── */
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; gap:10px}
.center{text-align:center}
.col{max-width:540px; margin:0 auto; width:100%}
.col-wide{max-width:920px; margin:0 auto; width:100%}
.home{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:16px}

.lobby-grid{display:grid; gap:16px}

@media (min-width:760px){
  main{padding:40px 24px 120px}
}
@media (min-width:840px){
  .lobby-grid{grid-template-columns:340px 1fr;
    grid-template-areas:"code players" "controls players"; align-items:start}
  .a-code{grid-area:code} .a-players{grid-area:players} .a-controls{grid-area:controls}
  #players{display:grid; grid-template-columns:1fr 1fr; gap:8px}
}

/* ── Brand-lockup ── */
.brandlock{text-align:center; padding:4px 0 2px}
.logo{font-family:var(--font-display); font-weight:800; letter-spacing:-.04em; line-height:.85;
  font-size:clamp(46px,13vw,74px); text-shadow:3px 3px 0 rgba(26,20,16,.12)}
.logo.sm{font-size:clamp(26px,7vw,34px); text-shadow:2px 2px 0 rgba(26,20,16,.1)}
.logo .a{color:var(--pink)} .logo .b{color:var(--teal)}
.badge{display:inline-block; transform:rotate(-3deg); margin-top:12px;
  background:var(--yellow); border:3px solid var(--ink); border-radius:999px;
  padding:5px 14px; font-family:var(--font-display); font-weight:700; font-size:13px;
  box-shadow:3px 3px 0 var(--ink)}
.tagline{margin-top:14px; font-weight:700; font-size:clamp(14px,3.4vw,17px)}
.foot{margin-top:6px; line-height:1.5}

/* ── Kort ── */
.card{background:var(--paper); border:var(--bw) solid var(--ink); border-radius:var(--r);
  padding:20px; box-shadow:var(--sh)}
@media (min-width:760px){ .card{padding:22px} }
.pop-pink{background:var(--pink)} .pop-teal{background:var(--teal)} .pop-yellow{background:var(--yellow)}

/* ── Tekst-etiketter ── */
.eyebrow,.label{font-weight:800; font-size:12px; letter-spacing:.07em; text-transform:uppercase; opacity:.62}
.label{margin-bottom:8px}
.muted{opacity:.6; font-size:13px; font-weight:600}
.msg{color:var(--red); font-weight:700; font-size:13px; min-height:1.1em; margin:0}
.sentence{font-family:var(--font-display); font-weight:800; line-height:1.15; margin-top:6px;
  font-size:clamp(21px,5.2vw,27px)}

/* ── Knapper ── */
.btn{width:100%; border:var(--bw) solid var(--ink); border-radius:var(--r-sm);
  padding:15px 20px; font-family:var(--font-display); font-weight:800; font-size:18px;
  letter-spacing:-.01em; cursor:pointer; background:var(--pink); color:var(--ink);
  box-shadow:var(--sh-sm); transition:transform .06s, box-shadow .06s}
.btn:active{transform:translate(4px,4px); box-shadow:none}
.btn:disabled{background:#DED7C8; box-shadow:none; opacity:.7; cursor:default}
.btn.pink{background:var(--pink)} .btn.teal{background:var(--teal)} .btn.yellow{background:var(--yellow)}
.btn.blue{background:var(--blue)} .btn.red{background:var(--red)}
.iconbtn{border:var(--bw) solid var(--ink); border-radius:var(--r-sm); padding:0 18px;
  font-family:var(--font-display); font-weight:800; font-size:18px; background:var(--teal);
  cursor:pointer; box-shadow:var(--sh-sm); flex:0 0 auto; transition:transform .06s, box-shadow .06s}
.iconbtn:active{transform:translate(4px,4px); box-shadow:none}
.iconbtn.pop-pink{background:var(--pink)}
.linkbtn{background:none; border:none; font-family:var(--font-body); font-weight:800;
  text-decoration:underline; opacity:.55; cursor:pointer; padding:8px; width:100%;
  font-size:14px; color:inherit}
.linkbtn:active{opacity:.85}
.links{justify-content:center; gap:18px}
.links .linkbtn{width:auto}

@media (hover:hover){
  .btn:hover{transform:translate(-2px,-2px); box-shadow:var(--sh)}
  .btn:disabled:hover{transform:none; box-shadow:none}
  .iconbtn:hover{transform:translate(-2px,-2px); box-shadow:var(--sh)}
  .opt:hover{transform:translateY(-2px)}
  .chip:hover{transform:translateY(-1px)}
  .linkbtn:hover{opacity:1}
  .soundtoggle:hover{transform:translate(-2px,-2px); box-shadow:var(--sh)}
}

/* ── Felter ── */
input,textarea{width:100%; border:var(--bw) solid var(--ink); border-radius:var(--r-sm);
  padding:14px 16px; font-family:var(--font-body); font-weight:600; font-size:17px;
  background:var(--paper); color:var(--ink); box-shadow:var(--sh-sm); outline:none}
input::placeholder,textarea::placeholder{color:rgba(26,20,16,.4)}
input:focus,textarea:focus{border-color:var(--teal)}
input.bad{border-color:var(--red)}
textarea{resize:vertical; line-height:1.4}

/* ── Vælgere ── */
.seg{display:grid; gap:8px}
.seg.three{grid-template-columns:repeat(3,1fr)}
.seg.two{grid-template-columns:repeat(2,1fr)}
.opt{border:var(--bw) solid var(--ink); border-radius:var(--r-sm); padding:12px 6px;
  font-family:var(--font-display); font-weight:800; font-size:13px; background:var(--paper);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:transform .06s, box-shadow .06s}
.opt .em{font-size:22px}
.opt.sel{background:var(--teal); box-shadow:var(--sh-sm)}
[data-chaos].sel{background:var(--red)}

/* ── Chips ── */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:3px solid var(--ink); border-radius:999px; padding:6px 13px; font-weight:800;
  font-size:14px; background:var(--paper); transition:transform .06s}

/* ── Spillerliste / score ── */
.plist{display:flex; flex-direction:column; gap:8px}
.prow{display:flex; align-items:center; gap:8px; font-weight:800}
.prow .tag{font-size:11px; font-weight:800; border:3px solid var(--ink); border-radius:999px;
  padding:1px 8px; background:var(--yellow)}
.prow .off{opacity:.4}
.score .bar{flex:1; height:18px; border:3px solid var(--ink); border-radius:999px; overflow:hidden; background:var(--bg)}
.score .fill{height:100%; background:var(--pink)}
.score .num{width:30px; text-align:right; font-family:var(--font-display); font-weight:800}


/* ── Diverse ── */
.code{font-family:var(--font-display); font-weight:800; letter-spacing:.12em; text-align:center;
  font-size:clamp(46px,14vw,62px)}
.big-emoji{font-size:clamp(56px,16vw,74px); text-align:center; line-height:1}
.waiting{font-family:var(--font-display); font-weight:800; font-size:20px; text-align:center; padding:22px 0}

.timer{display:inline-block; border:var(--bw) solid var(--ink); border-radius:999px;
  padding:4px 20px; margin-bottom:10px; font-family:var(--font-display); font-weight:800;
  font-size:24px; background:var(--yellow); box-shadow:var(--sh-sm)}
.timer.low{background:var(--red); color:#fff; animation:pulse .6s infinite alternate}
@keyframes pulse{from{transform:scale(1)} to{transform:scale(1.08)}}

.divider{display:flex; align-items:center; gap:10px; opacity:.5; font-weight:800;
  font-size:12px; text-transform:uppercase; letter-spacing:.06em}
.divider::before,.divider::after{content:""; flex:1; height:3px; background:var(--ink); border-radius:2px}

/* ── Banner & lyd-knap ── */
.banner{position:fixed; top:0; left:0; right:0; z-index:50; padding:12px 16px;
  background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800;
  text-align:center; border-bottom:var(--bw) solid var(--ink)}
.soundtoggle{position:fixed; top:10px; right:10px; z-index:55; border:var(--bw) solid var(--ink);
  border-radius:var(--r-sm); background:var(--paper); font-size:20px; line-height:1;
  padding:7px 10px; box-shadow:var(--sh-sm); cursor:pointer; transition:transform .06s, box-shadow .06s}
.soundtoggle:active{transform:translate(4px,4px); box-shadow:none}

/* ── Modaler (bottom-sheet på mobil, centreret på desktop) ── */
.overlay{position:fixed; inset:0; background:rgba(26,20,16,.5); z-index:60;
  display:flex; align-items:flex-end; justify-content:center}
.sheet{background:var(--paper); border:var(--bw) solid var(--ink); border-radius:24px 24px 0 0;
  width:100%; max-width:480px; max-height:88vh; overflow-y:auto; padding:20px;
  box-shadow:0 -6px 0 var(--ink)}
.sheet h2{font-family:var(--font-display); font-weight:800}
@media (min-width:640px){
  .overlay{align-items:center; padding:24px}
  .sheet{border-radius:var(--r); box-shadow:var(--sh-lg); max-height:86vh}
}

/* ── Maskot & grafiske accenter ── */
.home{position:relative}
.mascot{display:block; margin:0 auto 2px; height:auto;
  width:clamp(98px,22vw,150px); animation:bob 3.2s ease-in-out infinite;
  filter:drop-shadow(0 6px 0 rgba(26,20,16,.08))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-7px) rotate(1.5deg)}}

.deco{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.deco .d{position:absolute}
.d1{top:6px; left:-4px; transform:rotate(-12deg)}
.d2{top:54px; right:2px}
.d3{top:286px; right:-12px}
.d4{bottom:128px; left:-10px; transform:rotate(6deg)}
.d5{bottom:46px; right:14px}

@media (prefers-reduced-motion: reduce){
  .mascot{animation:none}
  .timer.low{animation:none}
}

/* ── Ikon-assets (erstatter alle emojis) ── */
.ico{display:inline-block; height:1.2em; width:auto; vertical-align:-0.22em}
.btn .ico,.iconbtn .ico,.linkbtn .ico{height:1.15em; vertical-align:-0.16em}
.opt .opt-ico{display:block; width:32px; height:32px; margin-bottom:2px}
.rank-ico{width:22px; height:22px; vertical-align:-0.32em}
.mini-ico{width:17px; height:17px; vertical-align:-0.2em; margin-left:3px}
.status-ico{width:16px; height:16px; vertical-align:-0.22em}
.sound-ico{display:block; width:24px; height:24px}
.t-ico{height:0.95em; vertical-align:-0.12em}
.inline-ico{width:22px; height:22px; vertical-align:-0.35em}

/* ── Avatar (maskot + hat) ── */
.avatar{position:relative; display:inline-block; line-height:0; flex:0 0 auto}
.avatar .av-img{width:100%; height:auto; display:block;
  filter:drop-shadow(0 2px 0 rgba(26,20,16,.18))}
.result-badge{display:block; margin:0 auto 4px; filter:drop-shadow(0 2px 0 rgba(26,20,16,.14))}
.shop-av{width:68px} .shop-av-lg{width:84px}
.name-av{width:30px; height:30px; object-fit:contain; vertical-align:middle; flex:0 0 auto}
@keyframes namehop{0%,100%{transform:translateY(0)} 28%{transform:translateY(-7px)} 50%{transform:translateY(0)} 70%{transform:translateY(-3px)}}
.name-av.hop{animation:namehop .55s ease}

/* ── Konto-bjælke på forsiden ── */
.acctbar{display:flex; align-items:center; gap:12px; background:var(--paper);
  border:var(--bw) solid var(--ink); border-radius:var(--r); box-shadow:var(--sh); padding:10px 14px}
.acctinfo{flex:1; display:flex; flex-direction:column; line-height:1.15; min-width:0}
.acctinfo b{font-family:var(--font-display); font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.coins{display:inline-flex; align-items:center; gap:4px; font-weight:800; color:#B07A12; font-size:12px; opacity:.85}
.coins.big{font-size:18px; margin-top:3px}
.coin-ico{height:1.15em; width:auto; vertical-align:-0.22em}
.acctbtns{display:flex; flex-direction:column; gap:0; align-items:flex-end; flex:0 0 auto}
.loginlink{margin-top:-2px; font-size:14px}

/* ── Butik ── */
.shophead{display:flex; align-items:center; gap:14px; background:var(--paper);
  border:var(--bw) solid var(--ink); border-radius:var(--r); box-shadow:var(--sh); padding:12px 14px}
.shopgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.shopitem{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:16px; box-shadow:var(--sh-sm); padding:14px 8px}
.shopitem.on{background:#E7FAF5}
.si-name{font-family:var(--font-display); font-weight:700; font-size:15px}
.shopitem .iconbtn{padding:0 14px; height:38px; font-size:15px}
@media (min-width:560px){ .shopgrid{grid-template-columns:repeat(3,1fr)} }

/* ── Kompakt forside-menu + undersider ── */
.home.menu, .home.sub { max-width: 480px; }
.home.menu { gap: 14px; }
.brandmini { display:flex; flex-direction:column; align-items:center; gap:3px; padding:0; text-align:center; }
.mascot-sm { display:block; width:50px; height:50px; }
.brandmini .logo { font-size: clamp(34px, 9vw, 48px); }
.brandmini .tagline { margin-top: 2px; }
.menu-actions { display:flex; flex-direction:column; gap:10px; }
.subhead { display:flex; align-items:center; gap:8px; margin:2px 0 10px; }
.subhead h2 { font-family:var(--font-display); font-weight:900; font-size:clamp(22px,6vw,28px); }
.backbtn { display:inline-flex; align-items:center; gap:3px; background:none; border:none;
  font-family:var(--font-body); font-weight:800; font-size:15px; color:var(--ink); cursor:pointer; padding:6px 8px 6px 0; }
.backbtn svg { display:block; }
.backbtn:active { transform: translateX(-2px); }


/* ── skribbl-stil forside ── */
:root { --green: #43C26A; }
.btn.green { background: var(--green); }
.btn.big { font-size: clamp(20px, 5.4vw, 26px); padding: 16px; letter-spacing: -.01em; }
.home.land { max-width: 440px; gap: 12px; }
.play-card { gap: 12px; }

/* lille række af hat-avatarer som dekoration (skribbl-agtigt) */
.hatrow { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin-top: 4px; }
.av-row { width: 34px; }

/* identitet (navn eller konto) */
.ident { display: flex; align-items: center; gap: 10px; }
.ident-info { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ident-info b { font-family: var(--font-display); font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* avatar-vælger */
.picker { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 0 2px; }
.picker-av { display: inline-block; }
.av-xl { width: 90px; }
.arw { width: 46px; height: 46px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 50%; box-shadow: var(--sh-sm);
  color: var(--ink); cursor: pointer; }
.arw:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }

/* kode-deltag række */
.joinrow { gap: 8px; }
.joinrow #code { flex: 1; text-align: center; letter-spacing: 4px; font-weight: 800; }
.joinrow .iconbtn { flex: 0 0 auto; }

/* ───────── Tegne- & gættespil ───────── */
.draw-grid{display:grid; gap:12px}
@media(min-width:880px){ .draw-grid{grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:16px} }
.game-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.game-top .rnd,.game-top .drw{font-family:var(--font-display); font-weight:800; font-size:14px;
  border:3px solid var(--ink); border-radius:999px; padding:5px 12px; background:var(--paper)}
.game-top .drw{background:var(--pink)}
.canvas-wrap{position:relative; width:100%}
#board{display:block; width:100%; background:#fff; border:var(--bw) solid var(--ink);
  border-radius:var(--r); box-shadow:var(--sh); touch-action:none; cursor:crosshair}
.canvas-tag{position:absolute; top:10px; left:10px; background:var(--yellow); border:3px solid var(--ink);
  border-radius:999px; padding:3px 11px; font-family:var(--font-display); font-weight:800; font-size:12px}
.tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.swatches{display:flex; gap:6px; flex-wrap:wrap}
.sw{width:30px; height:30px; border:3px solid var(--ink); border-radius:8px; cursor:pointer; padding:0}
.sw.sel{transform:translateY(-2px); box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink)}
.sizes{display:flex; gap:6px}
.sz{width:34px; height:34px; border:3px solid var(--ink); border-radius:8px; background:var(--paper);
  display:grid; place-items:center; cursor:pointer; padding:0}
.sz span{background:var(--ink); border-radius:999px; display:block}
.sz.sel{background:var(--yellow)}
.tbtn{border:3px solid var(--ink); border-radius:10px; background:var(--paper); cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:13px; padding:7px 12px}
.tbtn.sel{background:var(--teal)}
.tbtn:active{transform:translate(2px,2px)}
.drawer-panel .draw-sentence{font-family:var(--font-display); font-weight:800;
  font-size:clamp(18px,4.5vw,24px); line-height:1.25; margin-top:6px; word-break:break-word}
.dw-cur{background:var(--yellow); border-radius:6px; padding:0 4px; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.draw-next{margin-top:10px; font-weight:700}
.progress-card .progress-line{font-family:var(--font-display); font-weight:800;
  font-size:clamp(18px,4.5vw,22px); line-height:1.35; margin-top:6px; word-break:break-word; letter-spacing:.5px}
.p-hint{opacity:.5}
.chat{border:var(--bw) solid var(--ink); border-radius:var(--r-sm); background:var(--paper);
  padding:10px; height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; font-size:14px}
@media(min-width:880px){ .chat{height:280px} }
.chat-empty{color:#9a8f80; text-align:center; margin:auto; font-weight:700}
.cmsg{line-height:1.35; word-break:break-word}
.cmsg.correct{display:flex; gap:6px; align-items:center; background:#E8FBF4;
  border:2px solid var(--teal); border-radius:8px; padding:4px 8px; font-weight:800}
.cmsg.correct i{color:var(--teal); font-style:normal; font-weight:900}
.c-ico{height:1.2em; flex:0 0 auto}

/* ── Admin: sætningseditor ── */
.admin-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:2px}
.atab{font-family:var(--font-display); font-weight:800; font-size:14px; padding:6px 14px;
  border:3px solid var(--ink); border-radius:var(--r-sm); background:var(--paper); cursor:pointer}
.atab.on{background:var(--pink)}
#admin-text{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; line-height:1.55}
#admin-preview{max-height:42vh; overflow-y:auto; margin-top:2px}
.prev-row{padding:4px 2px; border-bottom:1px dashed rgba(26,20,16,.15); font-size:14px; line-height:1.45}
.prev-row .tg{background:var(--yellow); border-radius:4px; padding:0 3px; font-weight:800}
.prev-row .gl{opacity:.45}

.prev-row .grp{border:2px solid var(--ink); border-radius:6px; padding:0 4px}
.hint-mark{font-size:13px; color:var(--ink); opacity:.75; margin-top:-2px}
.hint-mark code{font-family:ui-monospace,Menlo,Consolas,monospace; background:var(--paper);
  border:1px solid rgba(26,20,16,.25); border-radius:4px; padding:0 4px; font-size:12px}

/* ── Effekter: navnefarve, chat-bobler, gæt-effekter ── */
.fx-name{ color:var(--nc); text-shadow:0 0 7px var(--nc); font-weight:800; }
.cmsg.bub-pink{ background:#FFE1EC; border:2px solid #FF5C8A; border-radius:12px; padding:3px 9px; }
.cmsg.bub-blue{ background:#E2ECFF; border:2px solid #5B8DEF; border-radius:12px; padding:3px 9px; }
.cmsg.bub-neon{ background:#0F1418; color:#EAFBF7; border:2px solid #21C7B6; border-radius:12px; padding:3px 9px; box-shadow:0 0 8px rgba(33,199,182,.5); }
.fxprev{ display:inline-flex; align-items:center; justify-content:center; min-width:60px; height:40px; font-size:15px; }
.fxprev-bub{ padding:4px 9px; font-size:13px; }
.fxprev-guess{ display:inline-flex; align-items:center; justify-content:center; min-width:60px; height:40px; font-size:11px; font-weight:800; border:2px dashed var(--ink); border-radius:8px; padding:0 6px; text-align:center; }

/* engangs gæt-effekt: fuldskærm, klik-igennem, rydder op selv */
.gfx{ position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }
.gfx-confetti span, .gfx-stars span{ position:absolute; left:50%; top:44%; width:11px; height:11px; opacity:0;
  animation:gfxburst 1.15s ease-out forwards; animation-delay:calc(var(--i) * 11ms); }
.gfx-confetti span{ background:hsl(calc(var(--i) * 40), 85%, 60%); border-radius:2px; }
.gfx-stars span{ background:#FFC93C; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
@keyframes gfxburst{
  0%{ opacity:1; transform:translate(-50%,-50%) rotate(0) scale(.4); }
  100%{ opacity:0; transform:translate(calc(-50% + (var(--i) - 8) * 36px), calc(-50% + ((var(--i) % 5) - 2) * 70px - 60px)) rotate(300deg) scale(1); }
}
.gfx-ring::after{ content:""; position:absolute; left:50%; top:46%; width:30px; height:30px; margin:-15px;
  border:5px solid #21C7B6; border-radius:50%; animation:gfxring 1s ease-out forwards; }
@keyframes gfxring{ 0%{ transform:scale(.2); opacity:.9; } 100%{ transform:scale(7); opacity:0; } }

/* ── Achievements: toast + profilkort ── */
.pname{ cursor:pointer; }
.ach-toast{ position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-12px); z-index:10000;
  display:flex; align-items:center; gap:10px; background:var(--paper); border:3px solid var(--ink);
  border-radius:14px; padding:10px 16px; box-shadow:0 6px 0 var(--ink); max-width:92vw;
  opacity:0; animation:achin .35s ease-out forwards; }
.ach-toast.out{ animation:achout .4s ease-in forwards; }
@keyframes achin{ to{ opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes achout{ to{ opacity:0; transform:translateX(-50%) translateY(-12px); } }
.ach-toast b{ font-family:var(--font-display); font-size:15px; }
.at-sub{ font-size:12px; opacity:.7; }
.profhead{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.profhead .name-av{ width:46px; height:46px; }
.achlist{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; }
.achrow{ display:flex; align-items:center; gap:10px; padding:7px 9px; border:2px solid rgba(26,20,16,.12); border-radius:10px; opacity:.6; }
.achrow.got{ opacity:1; border-color:var(--ink); background:#FFF7E6; }
.achrow b{ font-family:var(--font-display); font-size:14px; }
.ach-ico{ flex:0 0 auto; }

/* Mine achievements: fremgangsbjælke */
.achbar{ height:7px; background:rgba(26,20,16,.12); border-radius:5px; overflow:hidden; margin:4px 0 2px; }
.achfill{ height:100%; background:var(--teal); border-radius:5px; }
.at-done{ font-size:12px; font-weight:800; color:var(--teal); margin-top:2px; }