/* =========================================================
   TapkaCraft: Minecraft-client style site
   ========================================================= */

:root{
  --bg:#100c0a;
  /* Minecraftia, which the reference pen embeds, has no Czech hacek glyphs:
     6 of the 10 menu labels would render broken. Pixelify Sans is the pixel
     face that does carry them, so it takes every piece of UI text. */
  --font-brand:'Pixelify Sans','Press Start 2P','Inter',monospace;
  --font-ui:'Pixelify Sans','Inter',monospace;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --panel-btn:rgba(15,15,10,.55);
  --line:rgba(255,255,255,.22);
  --ink:#f2ece2;
  --muted:rgba(242,236,226,.72);
  --muted-2:rgba(242,236,226,.42);
  --gold:#e8a53d;
  --ember:#ff7a24;
  --ember-dim:#a83c10;
  --stone:#6d665e;
  --green:#7fd88f;
  --red:#ff2d4d;
}

/* ===== reset ===== */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font:inherit;background:none;border:none;color:inherit;}
ul{list-style:none;}

::selection{background:var(--red);color:#fff;}
::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#1a1b22;border:2px solid var(--bg);border-radius:7px;}
::-webkit-scrollbar-thumb:hover{background:var(--red);}
html{scrollbar-color:#1a1b22 var(--bg);}

/* iOS reads a quick second tap on a small element as "zoom to fit this", so
   double-tapping a 110px news tile blew the page up 3.5x into clipped text.
   Turn the gesture off on things meant to be tapped. Pinch zoom is untouched,
   so anyone who needs to magnify the page still can. */
button, a, .srow, .wrow, .tile, .addr{touch-action:manipulation;}

a:focus-visible, button:focus-visible,
.srow:focus-visible, .wrow:focus-visible, .tile:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}

/* ===== grain overlay (sits above the whole UI) ===== */
.grain{
  position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   STAGE: single Minecraft-client shell. Every "screen" is a
   full-viewport panel toggled by JS; the panorama + vignette
   stay mounted behind all of them, like a real game client.
   ========================================================= */
.mc-app{position:relative;min-height:100vh;min-height:100svh;}
/* Minecraft keeps its panorama in full colour and then blurs and darkens it
   so the menu reads on top. Same treatment here, applied once on the parent
   rather than per layer, which is also four times less blurring to do. */
.mc-bg{
  position:fixed; inset:0; z-index:0; overflow:hidden; background:#0b0d0a;
  filter:blur(3px) brightness(.6) saturate(.95);
  transition:filter .25s ease;
}
.mc-bg.dim{filter:blur(5px) brightness(.34) saturate(.7);}
.mc-bg i{
  position:absolute; inset:-3%;
  background-size:cover; background-position:center;
  opacity:0; will-change:opacity,transform;
  animation:panoCycle 56s linear infinite;
}
.mc-bg i:nth-child(1){background-image:url('../assets/img/pano-1.jpg');animation-delay:0s;}
.mc-bg i:nth-child(2){background-image:url('../assets/img/pano-2.jpg');animation-delay:14s;}
.mc-bg i:nth-child(3){background-image:url('../assets/img/pano-3.jpg');animation-delay:28s;}
.mc-bg i:nth-child(4){background-image:url('../assets/img/pano-4.jpg');animation-delay:42s;}
@keyframes panoCycle{
  0%{opacity:0;transform:scale(1.03);}
  3%{opacity:1;}
  22%{opacity:1;}
  25%{opacity:0;transform:scale(1.10);}
  100%{opacity:0;transform:scale(1.03);}
}
/* A panorama that never stops moving is a nuisance to anyone who asked the
   system to stop animations, so it holds on the first frame instead. */
@media (prefers-reduced-motion: reduce){
  .mc-bg i{animation:none;}
  .mc-bg i:nth-child(1){opacity:1;}
}
/* Light hand now: the panorama is already blurred and dimmed, so this only
   has to seat the corner text and stop the menu floating on bright sky. */
.mc-scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,8,6,.34) 0%, rgba(6,8,6,.18) 40%, rgba(6,8,6,.62) 100%);
}

.mc-screen{
  position:fixed; inset:0; z-index:2;
  display:none; flex-direction:column; align-items:center;
  text-align:center;
}
.mc-screen.is-active{display:flex;}

/* ===== title screen ===== */
/* The menu is one compact block like Minecraft's, centred in the window.
   Without the cap the buttons are pinned to the bottom edge, so on a tall
   monitor they drift far away from the wordmark. */
.mc-screen[data-screen="title"]{justify-content:center;}
.hero-content{
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding-top:100px; width:100%; height:100%; max-height:640px;
}
.hero-brand{position:relative;display:inline-block;text-align:center;}
.hero-title{margin:0;line-height:0;}
.hero-logo{
  width:min(560px,78vw); height:auto; display:block;
  /* No pixelated here, unlike the buttons. Their texture is 200px wide and
     gets blown up, where nearest neighbour is what keeps it crisp. The logo
     goes the other way, 1340px down to 560, and nearest neighbour drops pixel
     columns unevenly and chews the letterforms. The artwork already carries
     its own hard edges, so smooth downscaling is what preserves them. */
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.55)) drop-shadow(0 0 48px rgba(255,110,30,.32));
}
.hero-subtitle{
  font-family:var(--font-ui); font-weight:500;
  font-size:.9rem; letter-spacing:.1em;
  color:rgba(242,236,226,.62); margin-top:22px; text-shadow:2px 2px rgba(0,0,0,.6);
}
/* Anchored just past the wordmark's right edge rather than a fixed negative
   offset, so it can never land on the letters when the pixel font loads. */
.hero-splash{
  position:absolute; top:24px; left:calc(100% + 10px); right:auto;
  transform-origin:left center; transform:rotate(-16deg);
  font-family:'Pixelify Sans','Inter',monospace; font-weight:600; font-size:.85rem;
  color:#ffe14d; text-shadow:2px 2px 0 rgba(0,0,0,.7); white-space:nowrap;
  animation:splashBounce 1.3s ease-in-out infinite;
}
@keyframes splashBounce{0%,100%{transform:rotate(-16deg) translateY(0);}50%{transform:rotate(-16deg) translateY(-6px);}}
@keyframes splashBounceMobile{0%,100%{transform:translateX(-50%) rotate(-16deg) translateY(0);}50%{transform:translateX(-50%) rotate(-16deg) translateY(-6px);}}

.btnstack{margin-top:auto;margin-bottom:14px;display:flex;flex-direction:column;gap:6px;width:420px;max-width:86vw;}
/* ===== buttons: dark panel, brass corner fittings =====
   The corners are eight strips painted into one pseudo element rather than
   four extra nodes, so a button stays a single element and the fittings can
   never be selected, tabbed to, or read aloud. They sit on inset:-2px so they
   cap the border instead of floating inside it. */
.bevel3d{
  border:2px solid #4a3d2a;
  box-shadow:inset 0 1px 0 rgba(255,235,190,.07), inset 0 -2px 0 rgba(0,0,0,.45);
}
.bevel3d:active{
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55);
}
.mbtn, .sbtn{
  position:relative;
  background:rgba(24,20,16,.88);
  color:#e6dcc8; text-shadow:2px 2px 0 #000;
  border-radius:0;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.mbtn::before, .sbtn::before{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background:
    linear-gradient(var(--fit),var(--fit)) left  top    / var(--fit-l) var(--fit-w) no-repeat,
    linear-gradient(var(--fit),var(--fit)) left  top    / var(--fit-w) var(--fit-l) no-repeat,
    linear-gradient(var(--fit),var(--fit)) right top    / var(--fit-l) var(--fit-w) no-repeat,
    linear-gradient(var(--fit),var(--fit)) right top    / var(--fit-w) var(--fit-l) no-repeat,
    linear-gradient(var(--fit),var(--fit)) left  bottom / var(--fit-l) var(--fit-w) no-repeat,
    linear-gradient(var(--fit),var(--fit)) left  bottom / var(--fit-w) var(--fit-l) no-repeat,
    linear-gradient(var(--fit),var(--fit)) right bottom / var(--fit-l) var(--fit-w) no-repeat,
    linear-gradient(var(--fit),var(--fit)) right bottom / var(--fit-w) var(--fit-l) no-repeat;
}
.mbtn{
  --fit:#c9a25a; --fit-l:14px; --fit-w:3px;
  font-family:var(--font-ui); font-weight:600; font-size:1rem; cursor:pointer;
  border:none;
  padding:15px 22px; display:flex; align-items:center; justify-content:center; gap:10px;
  letter-spacing:.01em; text-decoration:none;
}
.mbtn:hover{ background:rgba(58,42,22,.92); border-color:#c9a25a; color:#ffe9a8; }
.mbtn.primary{ background:rgba(96,44,16,.9); border-color:#8a5a24; color:#ffd9a0; }
.mbtn.primary:hover{ background:rgba(126,58,20,.94); border-color:#e8a53d; color:#fff0c8; }
/* Fittings on neighbouring buttons were meeting in the gap and reading as a
   grid of crosses rather than as corners, so the row breathes wider and the
   narrower buttons get shorter fittings. */
.btnrow{display:flex;gap:14px;}
.btnrow .mbtn{flex:1;font-size:.86rem;padding:15px 10px;--fit-l:10px;}

.smallbtns{display:flex;gap:8px;margin-top:12px;width:420px;max-width:86vw;justify-content:center;}
.sbtn{
  /* shorter fittings: 14px on a 46px square would eat a third of each side */
  cursor:pointer;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  font-size:1.15rem; border:none; text-decoration:none;
}
/* Six icon buttons side by side would carry 24 fittings in one short strip.
   They keep the panel and the border and drop the corners. */
.sbtn::before{content:none;}
.sbtn:hover{ background:rgba(58,42,22,.92); border-color:#c9a25a; color:#ffe9a8; }

.sbtn svg{width:21px;height:21px;display:block;}
@media (max-width:640px){.sbtn svg{width:18px;height:18px;}}

.corner-left{position:absolute;z-index:2;left:14px;bottom:10px;font-size:.7rem;color:rgba(244,241,232,.55);}
.corner-right{position:absolute;z-index:2;right:14px;bottom:10px;font-size:.7rem;color:rgba(244,241,232,.55);text-align:right;max-width:260px;}

.status-line{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 4px;font-size:.8rem;color:var(--muted);}
.status-line .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);}
.status-line .dot.off{background:#8b8378;box-shadow:none;}

/* =========================================================
   SUB-SCREEN PANEL: shared by every non-title screen
   ========================================================= */
/* ===== codex panel =====
   Every non-title screen is one framed panel: an index down the left, the
   detail for whatever is selected on the right. Nothing expands in place, so
   picking a different entry never moves the page under the reader. */
.mp-panel{
  position:relative; z-index:2; width:600px; max-width:90vw;
  margin-top:72px; max-height:78vh; overflow-y:auto;
  background:rgba(14,11,9,.9); border:2px solid #4a3d2a;
  padding:24px 26px 28px;
}
.mp-panel::before{
  content:""; position:absolute; inset:-2px; pointer-events:none; --f:#c9a25a;
  background:
    linear-gradient(var(--f),var(--f)) left  top   /22px 3px no-repeat,
    linear-gradient(var(--f),var(--f)) left  top   /3px 22px no-repeat,
    linear-gradient(var(--f),var(--f)) right top   /22px 3px no-repeat,
    linear-gradient(var(--f),var(--f)) right top   /3px 22px no-repeat,
    linear-gradient(var(--f),var(--f)) left  bottom/22px 3px no-repeat,
    linear-gradient(var(--f),var(--f)) left  bottom/3px 22px no-repeat,
    linear-gradient(var(--f),var(--f)) right bottom/22px 3px no-repeat,
    linear-gradient(var(--f),var(--f)) right bottom/3px 22px no-repeat;
}
.mp-panel > .mp-title{color:#ffe9a8;}
.mp-panel > .mp-title + .mp-lead{margin-bottom:6px;}
/* the rule under the heading fades out, so it reads as a flourish and not as
   a table border */
.mp-panel > .mp-lead{
  padding-bottom:16px; margin-bottom:20px;
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,#c9a25a,rgba(201,162,90,0)) 1;
}

.mp-panel.cdx-panel{width:880px;max-width:92vw;text-align:left;}

/* ===== server list =====
   Pripojit se is laid out the way the game's own multiplayer screen is: an
   icon square on the left, the name over its address, the player count and
   ping bars hard right, and the selected entry rimmed in white rather than
   in the site's ember, because that is what the game does. */
.serverlist{width:660px;text-align:left;}
.serverlist .srow{
  background:rgba(0,0,0,.55); border:2px solid transparent; border-radius:0;
  box-shadow:none; padding:8px 10px; gap:12px; align-items:flex-start; margin-bottom:4px;
}
.serverlist .srow:hover{background:rgba(255,255,255,.1);}
.serverlist .srow.is-selected{
  border-color:#fff; background:rgba(0,0,0,.55); box-shadow:none;
}
.serverlist .srow .icn{
  width:64px;height:64px;flex:0 0 64px;background:#000;border:none;border-radius:0;
}
.serverlist .srow .icn img{width:64px;height:64px;object-fit:cover;image-rendering:pixelated;}
.serverlist .srow > div:not(.icn):not(.srow-right){flex:1 1 auto;min-width:0;}
.serverlist .name{
  font-family:var(--font-ui);font-weight:500;font-size:1.02rem;color:#fff;
  text-shadow:2px 2px 0 #3f3f3f;
}
.serverlist .sub{color:#9c9c9c;font-size:.86rem;margin-top:4px;}
/* count above bars, both hard right, exactly where the game puts them */
.serverlist .srow-right{
  flex-direction:column;align-items:flex-end;gap:6px;align-self:flex-start;margin-left:auto;
}
.serverlist .players{
  font-family:var(--font-ui);font-size:.82rem;color:#9c9c9c;text-shadow:2px 2px 0 #3f3f3f;
}
.serverlist .ping i{background:#7fd88f;}
/* the how-to sits under the chosen entry like the game's own server blurb */
.serverlist .detail{
  background:rgba(0,0,0,.42);border:2px solid #2b2b2b;margin-top:2px;margin-bottom:14px;
}

/* ===== TAB player list =====
   The roster is laid out like the list the game shows while TAB is held: a
   centred header, names in two columns with a coloured rank prefix and ping
   bars, unfilled seats greyed the way an offline player is. Rank colours are
   the server's own rarity ladder, so the palette teaches the system before a
   visitor ever joins. */
.tablist{width:720px;text-align:left;}
.tabl{background:rgba(0,0,0,.62);padding:14px 16px;margin-bottom:14px;}
.tabl-head{
  text-align:center;color:#fff;font-family:var(--font-ui);font-size:1rem;
  text-shadow:2px 2px 0 #3f3f3f;margin-bottom:3px;
}
.tabl-sub{text-align:center;color:#a8a8a8;font-family:var(--font-ui);font-size:.8rem;margin-bottom:14px;}
.tabl-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 20px;}

.tabl .wrow{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.09);border:none;border-radius:0;box-shadow:none;
  padding:5px 8px;margin:0;cursor:pointer;min-width:0;
}
.tabl .wrow:hover{background:rgba(255,255,255,.18);}
.tabl .wrow.is-selected{background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 2px #fff;}
.tabl .wrow img{width:22px;height:22px;flex:0 0 22px;border:none;border-radius:0;background:none;}
.tabl .tag{
  font-family:var(--font-ui);font-size:.76rem;flex:0 0 auto;
  text-shadow:2px 2px 0 #3f3f3f;white-space:nowrap;
}
.tabl .tag::before{content:"[";}
.tabl .tag::after{content:"]";}
.tabl .pname{
  flex:1 1 auto;min-width:0;font-family:var(--font-ui);font-size:.84rem;color:#fff;
  text-shadow:2px 2px 0 #3f3f3f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tabl .ping{display:flex;gap:2px;align-items:flex-end;height:12px;flex:0 0 auto;}
.tabl .ping i{width:2px;background:#4fbf5f;}
.tabl .ping i:nth-child(1){height:3px;}
.tabl .ping i:nth-child(2){height:5px;}
.tabl .ping i:nth-child(3){height:7px;}
.tabl .ping i:nth-child(4){height:9px;}
.tabl .ping i:nth-child(5){height:12px;}
/* an unfilled seat reads the way an offline player does in game */
.tabl .wrow.is-free{opacity:.45;}
.tabl .wrow.is-free .ping i{background:#6a6a6a;}
.tabl .wrow.is-free .tag{color:#9a9a9a;}

.tabl .r-owner .tag{color:#ff5c5c;}
.tabl .r-headadmin .tag{color:#ffb03a;}
.tabl .r-admin .tag{color:#c86bff;}
.tabl .r-designer .tag{color:#5b9dff;}

.tablist .detail{background:rgba(0,0,0,.42);border:2px solid #2b2b2b;}

/* ===== tier comparison table =====
   Rows are rewards, columns are tiers, so the difference between 99 and 499
   is one glance rather than three lists held in the head. The table scrolls
   inside its own box: four columns cannot honestly fit a phone, and shrinking
   the type until they do is worse than a swipe. */
.scroller{overflow-x:auto;margin-bottom:18px;}
.tiertable{border-collapse:collapse;width:100%;min-width:520px;font-size:.86rem;}
.tiertable th, .tiertable td{padding:11px 12px;text-align:center;border-bottom:1px solid #2c2620;}
.tiertable tbody th[scope="row"]{
  text-align:left;font-weight:400;color:#c5bbaa;width:44%;
}
.tiertable thead th{
  border-bottom:2px solid #4a3d2a;padding-bottom:14px;vertical-align:bottom;
}
.tiertable thead th.hot{background:rgba(70,48,20,.4);}
.tt-name{display:block;font-family:var(--font-ui);font-size:.9rem;color:#ffe9a8;}
.tt-price{display:block;font-family:var(--font-ui);font-size:1.15rem;color:#fff;margin-top:4px;}
.tt-badge{
  display:block;font-family:var(--font-ui);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:#c9a25a;margin-top:5px;
}
.tiertable tbody tr:hover{background:rgba(255,255,255,.035);}
.tiertable .y{color:#7fd88f;font-size:1.05rem;}
.tiertable .n{color:#4a423a;}
.tiertable .v{color:#ffd9a0;font-family:var(--font-ui);font-size:.9rem;}
.tiertable tbody tr:last-child th, .tiertable tbody tr:last-child td{border-bottom:none;}
@media (max-width:640px){
  .tabl-grid{grid-template-columns:1fr;}
  .tabl .tag{font-size:.7rem;}
}
.cdx{display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:start;}
.cdx-idx{display:flex;flex-direction:column;gap:4px;
  border-right:2px solid #33291c;padding-right:18px;}
.cdx-pane{min-height:220px;}
.cdx-pane > .detail{margin:0;border:none;background:none;box-shadow:none;padding:0;}
.cdx-sep{
  font-family:var(--font-ui);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8a7a5c;margin:16px 0 6px;padding-left:12px;
}

/* index entries: a flat list, the selected one lit and flagged with a rail */
.cdx-idx .srow, .cdx-idx .wrow, .cdx-idx .tile{
  background:none;border:none;box-shadow:none;border-radius:0;
  border-left:3px solid transparent;
  padding:9px 12px;margin:0;gap:10px;justify-content:flex-start;text-align:left;
  flex-direction:row;align-items:center;aspect-ratio:auto;
}
.cdx-idx .srow:hover, .cdx-idx .wrow:hover, .cdx-idx .tile:hover{
  background:rgba(58,42,22,.5);color:#ffe9a8;
}
.cdx-idx .is-selected{
  background:rgba(70,48,20,.7)!important;border-left-color:#c9a25a!important;
  border-color:transparent;box-shadow:none!important;
}
.cdx-idx .name, .cdx-idx .tname{
  font-family:var(--font-ui);font-weight:500;font-size:.92rem;letter-spacing:0;text-transform:none;
}
.cdx-idx .is-selected .name, .cdx-idx .is-selected .tname{color:#ffe9a8;}
.cdx-idx .sub{font-size:.74rem;}
.cdx-idx .srow .icn, .cdx-idx .tile .ticn{
  background:none;border:none;border-radius:0;width:24px;height:24px;
  font-size:1.1rem;flex:0 0 auto;overflow:visible;
}
.cdx-idx img{width:26px;height:26px;}
/* the tile and option grids collapse to the same single column in here */
.cdx-idx .tilegrid{display:flex;flex-direction:column;gap:4px;}

/* the pane carries the reading text, so it gets a comfortable measure */
.cdx-pane .detail p, .cdx-pane .detail li{text-align:left;}
.cdx-pane .detail ol, .cdx-pane .detail ul{text-align:left;}
.cdx-pane .kicker{margin-bottom:10px;}
.cdx-pane .detail > b{
  font-family:var(--font-ui);font-weight:600;font-size:1.15rem;color:#ffe9a8;
  text-shadow:2px 2px 0 #000;margin-bottom:10px;
}

@media (max-width:820px){
  .cdx{grid-template-columns:1fr;gap:14px;}
  .cdx-idx{border-right:none;padding-right:0;
    border-bottom:2px solid #33291c;padding-bottom:14px;}
  .cdx-pane{min-height:0;}
}
.back{
  font-family:var(--font-ui); font-weight:500; font-size:.95rem; letter-spacing:.02em;
  color:var(--muted); background:transparent; border:none; cursor:pointer;
  padding:8px 0 22px; display:flex; align-items:center; gap:6px;
  text-shadow:2px 2px rgba(0,0,0,.6);
}
.back:hover{color:#ffffa0;}
.mp-title{font-family:var(--font-ui);font-weight:600;letter-spacing:.02em;font-size:1.5rem;margin:0 0 8px;
  color:var(--ink);text-shadow:2px 2px rgba(0,0,0,.7);}
.mp-lead{color:var(--muted);font-size:.86rem;margin:0 0 26px;}

.srow, .wrow{
  cursor:pointer; display:flex; align-items:center; gap:14px;
  background:rgba(28,22,18,.72); border:2px solid #000; border-radius:0;
  box-shadow:inset -2px -3px rgba(0,0,0,.42), inset 2px 2px rgba(255,255,255,.16);
  padding:12px 16px; margin-bottom:10px;
}
.srow:hover, .wrow:hover{background:rgba(48,36,28,.78);}
.srow.is-selected, .wrow.is-selected, .tile.is-selected{
  border-color:var(--ember); background:rgba(255,122,36,.14);
  box-shadow:inset -2px -3px rgba(0,0,0,.42), inset 2px 2px rgba(255,255,255,.16),
             0 0 14px rgba(255,122,36,.3);
}
/* Dark chip, not a light one. Apple draws a lot of these emoji in mid grey,
   and mid grey on a pale translucent square is the one combination that
   disappears; against near black the same glyph reads. Measured against the
   real Apple rendering: the microphone, tools and silhouettes all sat near
   2:1 on the old backing. */
.srow .icn{flex:0 0 auto;width:42px;height:42px;background:rgba(0,0,0,.55);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.2rem;overflow:hidden;border-radius:2px;}
.srow .icn img{width:100%;height:100%;object-fit:cover;}
.wrow img{flex:0 0 auto;width:42px;height:42px;border-radius:3px;background:rgba(255,255,255,.06);border:1px solid var(--line);object-fit:cover;}
.srow .name, .wrow .name{font-weight:700;font-size:.94rem;}
/* a trial run is worth saying on the row itself, not buried in the panel */
.trial{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:2px;
  background:rgba(232,165,61,.16); border:1px solid rgba(232,165,61,.45);
  color:var(--gold); font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; vertical-align:1px;
}
.srow .sub, .wrow .sub{color:var(--muted);font-size:.78rem;margin-top:2px;}
.srow-right{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:10px;}
.srow .players{font-size:.74rem;color:var(--muted);}
.srow .ping{display:flex;gap:3px;align-items:flex-end;height:16px;}
.srow .ping i{display:block;width:3px;background:var(--green);border-radius:1px;}

.detail{
  background:rgba(10,7,5,.82); border:2px solid #000; border-radius:0;
  box-shadow:inset 2px 2px rgba(255,255,255,.08);
  padding:20px 22px; margin-top:-2px; margin-bottom:12px; display:none;
}
.detail.is-open{display:block;}
/* Inter, not the pixel font: Press Start 2P ships no Czech accented glyphs,
   so ODEMČEN / KČ / DONÁTOR rendered as mangled marks. */
.detail .kicker{
  display:block; font-family:var(--font-ui); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--ember); margin-bottom:12px; text-shadow:2px 2px rgba(0,0,0,.6);
}
.detail .addr{
  font-family:'Courier New',monospace;font-size:.98rem;color:var(--green);
  background:#0e0b08;padding:10px 14px;border-radius:2px;display:inline-block;margin-bottom:14px;
  cursor:pointer;border:1px solid transparent;transition:border-color .2s ease,color .2s ease;
}
.detail .addr:hover{border-color:var(--green);}
.detail .addr.copied{color:#fff;border-color:var(--green);}
.detail .addr.copied::after{content:" ✓";color:var(--green);}
.detail ol, .detail ul{margin:0;padding-left:18px;color:var(--muted);font-size:.85rem;line-height:1.9;}
.detail ul{list-style:none;padding-left:0;}
/* Numbered steps read left: the markers sit on the left edge, so centred text
   leaves them stranded away from the line they belong to. The tick lists stay
   centred, they carry their own marker inline. */
.detail ol{text-align:left;}
.detail ol li{padding-left:4px;}
.detail ul li::before{content:"✓ ";color:var(--green);}
.detail p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.7;}
/* a second paragraph in a detail is an aside: it needs the gap the shared
   margin:0 removes, and sits back a step so it does not compete. */
.detail p + p{margin-top:10px;}
.detail p.aside{color:var(--muted-2);font-size:.8rem;}
.detail b{display:block;font-size:.98rem;color:var(--ink);margin-bottom:6px;}
.detail-photo{width:100%;height:auto;border-radius:2px;border:1px solid var(--line);margin-bottom:14px;display:block;}

/* ===== tile grid (novinky / pokroky) ===== */
.tilegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px;}
.tile{cursor:pointer;background:rgba(28,22,18,.72);border:2px solid #000;border-radius:0;
  box-shadow:inset -2px -3px rgba(0,0,0,.42), inset 2px 2px rgba(255,255,255,.16);
  padding:16px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;}
.tile:hover{background:rgba(48,36,28,.78);}
/* same reason: the tile icon had no backing at all, so it sat straight on the
   panorama showing through the tile */
.ticn{font-size:1.3rem;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);border:1px solid var(--line);border-radius:2px;}
.tname{font-weight:600;font-size:.74rem;line-height:1.3;}

/* ===== plain list (co nabízíme) ===== */
/* Not clickable, and the icon+text pair sits centred as a unit rather than
   the icon hugging the left edge with the text floating in the middle.
   The text column keeps a fixed basis so every icon lands on the same
   vertical line instead of zig-zagging with each label's length. */
.plainlist .srow{cursor:default;justify-content:center;}
.plainlist .srow > div:not(.icn){flex:0 1 440px;text-align:center;}

/* ===== events group on the features screen =====
   The systems above are read-only, so they use the centred .plainlist look.
   Events are tappable and carry a paragraph each, so they take the ordinary
   row style instead: icon on the left, text left-aligned and free to fill the
   row, which is what a full sentence needs. */
.grouphead{
  font-family:var(--font-body); font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  font-size:.95rem; margin:26px 0 4px; padding-top:24px; border-top:1px solid var(--line);
}
.groupnote{color:var(--muted-2);font-size:.8rem;margin:0 0 16px;}
.eventlist .srow > div:not(.icn){flex:1 1 auto;min-width:0;text-align:left;}
.eventlist .srow .sub{line-height:1.45;}
/* The other detail panels hold one short line, so the screen's centring suits
   them. These run two or three lines and go ragged centred. */
.eventlist .detail p{text-align:left;}

/* ===== rules list ===== */
.rulerow{display:flex;gap:14px;align-items:flex-start;padding:14px 2px;border-bottom:1px solid var(--line);}
.rulerow:last-child{border-bottom:none;}
.rulenum{
  flex:0 0 auto;width:28px;height:28px;border-radius:2px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-brand);font-size:.62rem;color:var(--gold);
}
.rulerow p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.6;}
.rulerow p b{color:var(--ink);}

/* Snow over the title screen only, behind the menu so nothing it draws can
   land on a label and make it harder to read. */
/* ===== vote screen =====
   Rows that leave the site. Same shell as a selectable row, but they never
   take an is-selected state, so the arrow is what says "this goes out". */
a.srow.linkrow{text-decoration:none;color:inherit;}
a.srow.linkrow .go{margin-left:auto;flex:0 0 auto;color:var(--muted-2);font-size:1.05rem;}
a.srow.linkrow:hover{border-color:var(--gold);background:rgba(232,165,61,.08);}
a.srow.linkrow:hover .go{color:var(--gold);}

/* ===== online player popover =====
   Minecraft shows the names behind the player count on hover; this does the
   same, and opens on tap for phones. Fixed positioning so the panel is not
   clipped by the scrolling screen it sits in. */
.playerpop{
  /* top/left are pinned here, not just when it opens: without them it fell
     back to its static position, which is the end of the document past the
     bottom edge, and iOS counts that as page to scroll to. */
  position:fixed; top:0; left:0; z-index:20; max-width:min(280px,80vw);
  background:rgba(10,10,12,.96); border:2px solid var(--line); border-radius:2px;
  padding:10px 12px; opacity:0; pointer-events:none; transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease;
}
.playerpop.is-open{opacity:1;transform:translateY(0);}
.playerpop h4{
  font-family:var(--font-body); font-size:.6rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.14em; color:var(--gold); margin:0 0 8px;
}
.playerpop ul{margin:0;padding:0;list-style:none;}
.playerpop li{font-size:.82rem;color:var(--ink);line-height:1.65;text-align:left;}
.playerpop .more{margin:6px 0 0;color:var(--muted);font-size:.74rem;text-align:left;}
/* only hinted when there is actually a list behind it */
.players.has-list{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;}

/* ===== language screen ===== */
.srow .flag{font-size:1.3rem;}

/* =========================================================
   SUPPORT extras: a real payment link + supporters list.
   Not part of the reference mockup (which only models the
   tier picker), added because the page needs an actual way
   to pay; kept in the same visual language as everything else.
   ========================================================= */
/* shared by the Podpora payment link and the Náš tým recruitment link */
.panel-cta{margin:24px 0 4px;}
.panel-cta .mbtn{width:100%;}
.panel-note{margin:16px 2px 0;color:var(--muted-2);font-size:.8rem;line-height:1.6;}
/* the note colour is deliberately faint; lift anything bold in it so a hard
   requirement (the age limit) is not the least readable thing on screen */
.panel-note b{color:var(--muted);}
.supporters{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);}
.supporters h3{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;font-weight:700;}
.supporters-empty{color:var(--muted);font-size:.85rem;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:480px){
  /* On a phone the 640px box was taller than the content, so the wordmark sat
     at its top and the buttons at its bottom with 200px of dead sky between
     them, and the menu started past the middle of the screen. Let the column
     take its natural height instead and let the title screen centre it, so
     the wordmark and the menu travel together as one block. */
  .hero-content{padding-top:0;height:auto;max-height:none;padding-bottom:26px;}
  /* margin-top:auto has nothing to push against now, so the gap is set here.
     It has to clear the splash, which on a phone hangs below the subtitle. */
  .btnstack{margin-top:76px;margin-bottom:0;}
  .hero-title{font-size:1.9rem;}
  .hero-subtitle{font-size:.7rem;letter-spacing:.1em;}
  /* no room beside the wordmark on a phone, so it sits under the subtitle.
     left:50% only puts its left edge at the centre, so it grew rightwards and
     the longest lines ran off a 375px screen and got clipped. The bounce
     keyframes rewrite transform wholesale, so the centring translate has to
     live inside them rather than on the element. */
  /* The 4px that used to clear the subtitle no longer does: rotating a long
     line about its centre lifts the left end by roughly half its width times
     sin(16deg), which put it back on top of the tagline. */
  .hero-splash{font-size:.72rem;top:calc(100% + 24px);left:50%;right:auto;
    transform-origin:center center;animation-name:splashBounceMobile;}
  .btnstack{gap:5px;margin-bottom:10px;}
  .mbtn{padding:13px 14px;font-size:.8rem;}
  .btnrow .mbtn{font-size:.68rem;padding:13px 6px;}
  .sbtn{width:40px;height:40px;font-size:1rem;}
  .mp-panel{margin-top:56px;max-height:calc(100vh - 70px);}
  .mp-title{font-size:1.1rem;}
  .tilegrid{grid-template-columns:repeat(3,1fr);gap:6px;}
  .tile{padding:12px 4px;}
  .corner-left, .corner-right{font-size:.6rem;}
  .corner-right{max-width:150px;}
}

/* A short window (a phone on its side) cannot fit the title column, and the
   screen is fixed to the viewport, so the bottom row simply vanished with no
   way to reach it. Give the column its natural height there and let the screen
   scroll; margin:auto rather than justify-content so an overflowing column can
   still be scrolled back to the top. */
@media (max-height:540px){
  .mc-screen[data-screen="title"]{justify-content:flex-start;overflow-y:auto;}
  .hero-content{height:auto;max-height:none;padding-top:0;margin:auto 0;padding-block:20px;}
  .btnstack{margin-top:26px;margin-bottom:0;}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .hero-splash{animation:none;transform:rotate(-16deg);}
  /* the mobile centring rides on the keyframes, so restore it by hand here */
  @media (max-width:480px){.hero-splash{transform:translateX(-50%) rotate(-16deg);}}
  html{scroll-behavior:auto;}
}