/* POC: the Theatre home page (/poc). Its own stylesheet: nothing here touches the rest of the site. */
:root { --bg: #08080a; --p1: #121216; --p2: #1b1b21; --line: #2a2a33; --dim: #9a9aa6; --gold: #4dbbdf; --text: #f4f4f6; --red: #e5484d; color-scheme: dark; }
* { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 Manrope, system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; } button, input { font: inherit; }

.ttop { position: absolute; z-index: 10; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 26px; padding: 18px max(44px, env(safe-area-inset-left)); background: linear-gradient(180deg, rgba(8,8,10,.9), transparent); }
.tlogo { display: flex; align-items: center; gap: 10px; font: 400 31px/1 "Jersey 10", Manrope, sans-serif; letter-spacing: .02em; white-space: nowrap; } .tlogo span { padding-top: 2px; }
.tlogo img { width: 32px; height: 32px; image-rendering: pixelated; } .tlogo i { font-style: normal; color: var(--gold); }
.tnav { display: flex; gap: 22px; font-weight: 600; color: #c9c9d1; } .tnav a:hover, .tnav a.on { color: #fff; }
/* the search: wide, in the middle of the bar, always in reach (the bar stays and turns solid on scroll) */
.ttop { position: fixed; transition: background .25s, box-shadow .25s; } .ttop.solid { background: rgba(10,10,12,.94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.tsrch { position: relative; flex: 0 1 520px; margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; border-radius: 12px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14); color: #d4d4dc; } .tsrch:focus-within { background: #15151a; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(77,187,223,.18); }
.tsrch input { flex: 1; min-width: 0; padding: 11px 0; border: 0; background: transparent; color: var(--text); font-size: 15px; outline: none; } .tsrch input::placeholder { color: #c9c9d1; }
.tsrch kbd { padding: 1px 7px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); color: #c9c9d1; font: 600 12px Manrope, sans-serif; }
.tsugg { position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: 70vh; overflow: auto; padding: 8px; border-radius: 14px; background: #121216; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.tsugg[hidden] { display: none; } .tsugg .gt { display: block; padding: 8px 10px 4px; color: var(--gold); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.tsugg a { display: grid; gap: 1px; padding: 8px 10px; border-radius: 9px; color: var(--text); } .tsugg a span { font-weight: 600; } .tsugg a small { color: var(--dim); font-size: 12.5px; }
.tsugg a:hover, .tsugg a.on { background: rgba(77,187,223,.1); } .tsugg a.all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; color: var(--gold); font-weight: 600; }
.tsugg .none { margin: 0; padding: 10px; color: var(--dim); }
.tsbtn { display: none; margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; cursor: pointer; }

/* the hero: real moments playing, one after another */
.thero { position: relative; height: min(78vh, 700px); min-height: 520px; overflow: hidden; background: #000; }
.tv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: 0; transition: opacity .8s; }
.tv.on { opacity: 1; }
.tshade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.62) 38%, rgba(8,8,10,.08) 72%), linear-gradient(0deg, var(--bg) 0%, transparent 32%); }
.thin { position: absolute; z-index: 2; left: max(44px, env(safe-area-inset-left)); bottom: 110px; max-width: 620px; transition: opacity .4s; } .thin.fade { opacity: 0; }
.ttag { display: inline-flex; padding: 5px 10px; border-radius: 6px; background: var(--red); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.thin h1 { font: 700 clamp(34px, 4.6vw, 62px)/1.03 Manrope, sans-serif; letter-spacing: -.02em; margin: 16px 0 12px; text-wrap: balance; }
.thin p { color: #d4d4dc; font-size: 17px; margin: 0 0 10px; } .tmeta { color: var(--dim); font-size: 14px; margin-bottom: 22px; }
.tbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.tplay { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 10px; background: var(--text); color: #000; font-weight: 700; }
.tplay:hover { background: var(--gold); } .tghost { padding: 13px 20px; border-radius: 10px; background: rgba(255,255,255,.14); font-weight: 600; } .tghost:hover { background: rgba(255,255,255,.22); }
.tdots { position: absolute; z-index: 3; right: max(44px, env(safe-area-inset-right)); bottom: 118px; display: flex; gap: 8px; }
.tdots button { width: 34px; height: 18px; padding: 7px 0; border: 0; background: none; cursor: pointer; } .tdots i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.tdots .on i { background: linear-gradient(90deg, var(--gold) var(--p, 0%), rgba(255,255,255,.3) var(--p, 0%)); }

/* the hook: is your name on tape? */
.thook { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 34px; align-items: center; margin: -64px 44px 10px; padding: 34px;
  border-radius: 20px; background: linear-gradient(110deg, #0a1a1f, #121216 58%); border: 1px solid #1a3a45; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.thook h2 { font: 700 clamp(28px, 3vw, 40px)/1.08 Manrope, sans-serif; margin: 0 0 18px; } .thook h2 b { color: var(--gold); }
.tfind { display: flex; gap: 8px; } .tfind input { flex: 1; min-width: 0; padding: 15px 16px; border-radius: 12px; border: 1px solid #204c5a; background: #0b0b0e; color: var(--text); font-size: 17px; outline: none; }
.tfind input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(77,187,223,.18); }
.tfind button { padding: 0 22px; border: 0; border-radius: 12px; background: var(--gold); color: #000; font-weight: 700; font-size: 16px; cursor: pointer; }
.tres { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .tres:empty { display: none; }
.tres a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid transparent; }
.tres a:hover, .tres a:focus { border-color: var(--gold); background: rgba(77,187,223,.08); outline: none; }
.tres b { font-size: 16px; } .tres small { grid-column: 1; color: var(--dim); font-size: 13px; }
.tres em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; text-align: right; color: var(--gold); font-weight: 700; font-size: 15px; line-height: 1.2; } .tres em span { display: block; color: var(--dim); font-weight: 500; font-size: 12px; }
.tres .none { padding: 11px 14px; color: var(--dim); }
.thint { color: var(--dim); font-size: 13.5px; margin: 10px 0 0; }
.tcard { display: block; } .tcard img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.6); transform: rotate(1.5deg); background: #15130f; aspect-ratio: 1200 / 630; }
.tcard span { display: block; margin-top: 14px; color: var(--dim); font-size: 13.5px; text-align: center; }

/* streaming-style rows */
.trow { padding: 0 44px; margin: 30px 0 0; }
.trh { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; } .trh h2 { font: 700 22px Manrope, sans-serif; margin: 0; } .trh span { color: var(--dim); font-size: 14px; }
.trh a { margin-left: auto; color: var(--gold); font-weight: 600; font-size: 14px; white-space: nowrap; }
.tstrip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 5); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.tstrip::-webkit-scrollbar { display: none; }
.tc { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; scroll-snap-align: start; background: var(--p1); }
.tc .tp { position: absolute; inset: 0; background-size: cover; background-position: center; image-rendering: pixelated; transition: transform .35s; }
.tc:hover .tp { transform: scale(1.06); } .tc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.88), transparent 58%); }
.tc b, .tc small { position: absolute; z-index: 2; left: 12px; right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc b { bottom: 26px; font-weight: 700; } .tc small { bottom: 8px; color: #c4c4cc; font-size: 12.5px; }
.tc .ty, .tc .tk { position: absolute; z-index: 2; top: 10px; padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: 12px; }
.tc .ty { left: 10px; background: rgba(0,0,0,.72); } .tc .tk { right: 10px; background: var(--red); }

.tfoot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin: 46px 44px 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.tmb { padding: 12px 16px; border-radius: 12px; border: 1px solid #1a3e4a; background: linear-gradient(100deg, #0b1c22, #151317 70%); color: #d8d8de; } .tmb b { color: var(--gold); }

@media (max-width: 1100px) { .tstrip { grid-auto-columns: calc((100% - 24px) / 3); } }
@media (max-width: 760px) {
  .ttop { gap: 14px; padding: 12px 16px; } .tnav { display: none; }
  .tsrch { display: none; } .tsbtn { display: block; } .tsrch kbd { display: none; }
  body.searching .tsrch { display: flex; position: fixed; z-index: 20; left: 12px; right: 12px; top: 10px; margin: 0; background: #15151a; border-color: var(--gold); }
  body.searching .tsugg { max-height: calc(100vh - 90px); }
  .thero { height: 68vh; min-height: 460px; } .thin { left: 16px; right: 16px; bottom: 92px; } .thin p { font-size: 15px; } .tmeta { display: none; }
  .tshade { background: linear-gradient(0deg, rgba(8,8,10,.97) 0%, rgba(8,8,10,.55) 55%, rgba(8,8,10,.15) 100%); }
  .tdots { right: auto; left: 16px; bottom: 70px; }
  .thook { grid-template-columns: 1fr; margin: -40px 12px 10px; padding: 22px 18px; gap: 22px; }
  .tfind button { padding: 0 16px; }
  .trow { padding: 0 16px; } .tstrip { grid-auto-columns: 72%; } .trh span { display: none; }
  .tfoot { margin: 36px 16px 30px; }
}

/* legends: the row on the home page, the index, a legend's life on tape */
.lgstrip { grid-auto-columns: calc((100% - 36px) / 4); }
.lg { position: relative; display: block; aspect-ratio: 4 / 3.4; border-radius: 14px; overflow: hidden; scroll-snap-align: start; background: var(--p1); border: 1px solid #14313b; }
.lg .lgp { position: absolute; inset: 0; background-size: cover; background-position: center; image-rendering: pixelated; transition: transform .4s; }
.lg:hover .lgp { transform: scale(1.05); } .lg:hover { border-color: var(--gold); }
.lg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,8,10,.96) 8%, rgba(8,8,10,.35) 55%, transparent 80%); }
.lgt { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 2px; }
.lgt b { font: 700 24px/1.1 Manrope, sans-serif; } .lgt small { color: var(--gold); font-weight: 600; } .lgt em { font-style: normal; color: #c4c4cc; font-size: 13px; }
.lgindex { padding: 110px 44px 10px; } .lghead { max-width: 760px; margin-bottom: 26px; }
.lghead h1 { font: 700 clamp(34px, 4.4vw, 56px)/1.04 Manrope, sans-serif; margin: 14px 0 10px; } .lghead p { color: #c9c9d1; font-size: 17px; margin: 0; }
.lggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.lghero { height: min(70vh, 620px); }
.lgmain { padding: 0 44px; max-width: 1240px; }
.lgstats { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: -54px; }
.lgstats div { padding: 14px 16px; border-radius: 14px; background: rgba(18,18,22,.92); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.lgstats b { display: block; font: 700 26px Manrope, sans-serif; color: var(--gold); } .lgstats span { color: var(--dim); font-size: 13px; }
.lgyears { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; } .lgyears a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; } .lgyears a:hover { border-color: var(--gold); color: var(--gold); }
.lgh { font: 700 24px Manrope, sans-serif; margin: 34px 0 6px; }
.lgyear { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.lgy b { position: sticky; top: 16px; font: 700 30px Manrope, sans-serif; color: var(--gold); }
.lgfacts { margin: 4px 0 10px; color: #d4d4dc; font-size: 16px; }
.lgmom { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
.lgmom a { display: grid; gap: 1px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid transparent; } .lgmom a:hover { border-color: var(--gold); }
.lgmom b { font-weight: 650; } .lgmom span { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgrecs { grid-auto-columns: calc((100% - 36px) / 4); }
.lgrecs .ty { background: var(--gold) !important; color: #000; }
.lgmates { color: #d4d4dc; line-height: 2; } .lgmates a { color: var(--text); font-weight: 650; } .lgmates a:hover { color: var(--gold); } .lgmates small { color: var(--dim); }
.lgmore { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); line-height: 2; } .lgmore a { color: var(--text); font-weight: 600; } .lgmore a:hover { color: var(--gold); }
@media (max-width: 1100px) { .lgstrip, .lgrecs { grid-auto-columns: calc((100% - 24px) / 3); } .lgstats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .lgstrip { grid-auto-columns: 78%; } .lgrecs { grid-auto-columns: 72%; }
  .lgindex { padding: 86px 16px 10px; } .lggrid { grid-template-columns: 1fr; }
  .lgmain { padding: 0 16px; } .lgstats { grid-template-columns: 1fr 1fr; margin-top: -30px; } .lgstats div:last-child { grid-column: span 2; }
  .lgyear { grid-template-columns: 1fr; gap: 6px; } .lgy b { position: static; font-size: 26px; }
}

/* hover previews: the moving moment over the card's picture */
.tc .tpv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: 0; transition: opacity .25s; }
.tc.pvon .tpv { opacity: 1; } .tc.pvon .tp { transform: none; }

/* the bar's share button and, below 1240 px, the menu behind a button */
.tshare { flex: none; padding: 10px 14px; border-radius: 10px; background: var(--gold); color: #000; font-weight: 700; font-size: 14px; white-space: nowrap; } .tshare:hover { background: #7fd4ef; }
.tsrch { flex: 1 1 0; max-width: 440px; min-width: 200px; } .tnav { flex: none; white-space: nowrap; } .tlogo { flex: none; }
.tburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 10px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); cursor: pointer; }
.tburger i { display: block; height: 2px; background: #fff; border-radius: 2px; }
.tmenu { display: none; }
@media (max-width: 1200px) {
  .tnav, .tshare { display: none; } .tburger { display: flex; }
  body.tmenuon .tmenu { display: grid; position: fixed; z-index: 15; left: 0; right: 0; top: 64px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; padding: 10px 16px 14px;
    background: rgba(10,10,12,.97); border-bottom: 1px solid var(--line); }
  .tmenu a { padding: 11px 12px; border-radius: 10px; font-weight: 650; } .tmenu a:hover { background: var(--p2); }
}
@media (max-width: 760px) { .tburger { margin-left: 0; } .tsbtn { margin-left: auto; } body.tmenuon .tmenu { top: 62px; } }

/* a Tibia story in the Theatre look: their busiest recording slowly moving behind the story, the card beside it */
.sthero { height: auto; min-height: min(78vh, 680px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 34px; align-items: center; padding: 110px 44px 90px; }
.sthero .thin { position: relative; left: auto !important; right: auto !important; bottom: auto !important; z-index: 2; max-width: 640px; }
.stbg { position: absolute; inset: -4%; background-size: cover; background-position: center; image-rendering: pixelated; animation: stdrift 26s ease-in-out infinite alternate; }
@keyframes stdrift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
@media (prefers-reduced-motion: reduce) { .stbg { animation: none; } }
.sthero h1 { font: 700 clamp(40px, 5.4vw, 72px)/1.02 Manrope, sans-serif; margin: 14px 0 12px; overflow-wrap: anywhere; }
.stlead { font-size: 20px !important; color: #fff !important; font-weight: 600; max-width: 560px; }
.sthero .tplay { border: 0; cursor: pointer; font: 700 15px Manrope, sans-serif; } .sthero .tplay svg { width: 16px; height: 16px; }
.stcard { position: relative; z-index: 2; display: block; } .stcard img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.7); transform: rotate(1.5deg); transition: transform .3s; }
.stcard:hover img { transform: rotate(0) scale(1.01); }
.fromnote { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: rgba(77,187,223,.14); border: 1px solid #20596b; font-size: 15px; } .fromnote a { color: var(--gold); font-weight: 650; }
.stmain .lgstats { margin-top: -40px; } .stmain .lgstats:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.stcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 30px; align-items: start; margin-top: 26px; }
.stlines p { margin: 0 0 8px; color: #d4d4dc; font-size: 17px; }
.tellthem { padding: 16px 18px; border-radius: 14px; background: var(--p1); border: 1px solid var(--line); }
.tellthem > b { display: block; font-size: 14px; margin-bottom: 8px; } .tellthem ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tellthem li { display: flex; align-items: center; gap: 10px; } .tellthem li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; } .tellthem li a:hover { color: var(--gold); }
.tellthem button { padding: 7px 12px; border-radius: 9px; border: 1px solid #20596b; background: transparent; color: var(--gold); font: 650 13.5px Manrope, sans-serif; cursor: pointer; } .tellthem button:hover { background: rgba(77,187,223,.1); }
.tellthem small { display: block; margin-top: 8px; color: var(--dim); font-size: 12.5px; }
.sttoast { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: #15151a; border: 1px solid var(--gold); color: var(--text); font-size: 14.5px; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.sttoast[hidden] { display: none; }
.strow { padding: 0; margin-top: 34px; }
.stagain { margin: 40px 0 0; max-width: 640px; } .stagain h2 { font: 700 24px Manrope, sans-serif; margin: 0 0 12px; }
.stland .tfind { max-width: 640px; } .stland .thint a { color: var(--gold); } .sthits { max-width: 640px; margin: 0 0 14px !important; }
@media (max-width: 1000px) { .sthero { grid-template-columns: 1fr; padding: 96px 16px 70px; gap: 26px; } .stcols { grid-template-columns: 1fr; } .stmain .lgstats { margin-top: -30px; } }
@media (max-width: 760px) { .sthero h1 { font-size: 42px; } .stlead { font-size: 18px !important; } .stmain .lgstats { grid-template-columns: 1fr 1fr; } }

/* walk old Tibia (/walk): the world big, the controls and the recordings beside it */
.wk { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; padding: 86px 24px 30px; max-width: 1600px; margin: 0 auto; }
.wkstage { position: relative; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 960 / 704; align-self: start; }
.wkstage canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; outline: none; cursor: crosshair; } .wkstage.ghost canvas { filter: saturate(.6) brightness(.95); }
.wkload { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 12px; background: #0b0b0d; color: var(--dim); } .wkload[hidden] { display: none; }
.wkload .spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #3a3a42; border-top-color: var(--gold); animation: wkspin .9s linear infinite; } @keyframes wkspin { to { transform: rotate(360deg); } }
.wkhud { position: absolute; left: 12px; top: 12px; z-index: 2; display: grid; padding: 8px 12px; border-radius: 10px; background: rgba(8,8,10,.75); pointer-events: none; }
.wkhud b { font: 700 17px Manrope, sans-serif; } .wkhud span { color: var(--dim); font-size: 12.5px; }
.wkfloor { position: absolute; right: 12px; top: 12px; z-index: 2; display: flex; gap: 6px; }
.wkfloor button, .wkpad button { border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(8,8,10,.75); color: var(--text); font: 650 13px Manrope, sans-serif; cursor: pointer; }
.wkfloor button { padding: 7px 10px; } .wkfloor button:hover, .wkpad button:hover { border-color: var(--gold); }
.wkpad { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: none; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 52px); gap: 6px; }
.wkpad button { font-size: 20px; touch-action: none; user-select: none; } .wkpad [data-d="0"] { grid-column: 2; grid-row: 1; } .wkpad [data-d="3"] { grid-column: 1; grid-row: 2; }
.wkpad [data-d="2"] { grid-column: 2; grid-row: 2; } .wkpad [data-d="1"] { grid-column: 3; grid-row: 2; }
@media (pointer: coarse) { .wkpad { display: grid; } }
.wkside h1 { font: 700 30px/1.1 Manrope, sans-serif; margin: 12px 0 8px; } .wkside p { color: #c9c9d1; margin: 0 0 12px; }
.wkside h2 { font: 700 19px Manrope, sans-serif; margin: 18px 0 8px; }
.wkopts { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--p1); border: 1px solid var(--line); }
.wkopts select { margin-left: 8px; padding: 6px 8px; border-radius: 8px; background: #0b0b0e; color: var(--text); border: 1px solid var(--line); }
.wkghost { display: flex; gap: 8px; align-items: center; color: #c9c9d1; font-size: 14px; }
.wktowns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }
.wktowns button { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: #c9c9d1; font: 600 12.5px Manrope, sans-serif; cursor: pointer; } .wktowns button:hover { border-color: var(--gold); color: var(--text); }
.wknear { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 46vh; overflow: auto; }
.wknear a { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 6px; border-radius: 10px; } .wknear a:hover { background: var(--p1); }
.wknear img { width: 88px; aspect-ratio: 480 / 352; object-fit: cover; border-radius: 6px; image-rendering: pixelated; background: #000; }
.wknear b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wknear small { display: block; color: var(--dim); font-size: 12px; } .wknear em { font-style: normal; color: var(--gold); font-size: 12.5px; font-weight: 600; }
.wknear .none { color: var(--dim); font-size: 14px; padding: 6px 2px; }
.wkmb { display: block; margin-top: 18px; }
@media (max-width: 1000px) { .wk { grid-template-columns: 1fr; padding: 72px 0 24px; gap: 14px; } .wkstage { border-radius: 0; border-left: 0; border-right: 0; } .wkside { padding: 0 16px; } }

/* old Tibia from above (/earth, lib/earth.js) */
.ea { position: fixed; inset: 0; overflow: hidden; background: rgb(17,44,169); touch-action: none; }
.ea #eac { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.ea #eac:active { cursor: grabbing; }
.eap { position: absolute; image-rendering: pixelated; opacity: 0; pointer-events: none; transition: opacity .9s ease; box-shadow: 0 0 0 2px rgba(77,187,223,.95), 0 0 80px rgba(0,0,0,.55); border-radius: 2px; }
.eap.on { opacity: 1; }
.eahead, .eanow { position: absolute; left: 32px; bottom: 32px; max-width: 470px; padding: 22px 24px; border-radius: 16px; background: rgba(8,8,10,.8); backdrop-filter: blur(12px); box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.eanow { left: 50%; bottom: 18px; transform: translateX(-50%); width: min(1000px, calc(100% - 140px)); max-width: none; padding: 14px 18px; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
.eahead h1 { font: 700 32px/1.08 Manrope, sans-serif; margin: 12px 0 8px; letter-spacing: -.01em; }
.eahead p { color: #c9c9d2; margin: 0 0 16px; line-height: 1.5; }
.eahead .tplay { border: 0; cursor: pointer; font: 700 15px Manrope, sans-serif; }
.eatowns { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0 !important; }
.eatowns button { padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); font: 600 12px Manrope, sans-serif; cursor: pointer; }
.eatowns button:hover { background: rgba(255,255,255,.16); }
.eanow[hidden], .eahead[hidden] { display: none !important; }
.eanow .eakind { grid-row: 1 / 3; align-self: center; } .eanow small { grid-column: 2; } .eabtns { grid-column: 3; grid-row: 1 / 3; }
.eakind { align-self: flex-start; padding: 4px 9px; border-radius: 6px; background: var(--red); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.eanow b { font: 700 19px/1.2 Manrope, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eanow small { color: var(--dim); font-size: 13px; }
.eabtns { display: flex; flex-wrap: wrap; gap: 8px; }
.eabtns .tplay, .eabtns .tghost { padding: 10px 16px; font: 700 14px Manrope, sans-serif; border: 0; color: inherit; cursor: pointer; } .eabtns .tplay { color: #000; }
.eamsg { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; background: rgba(8,8,10,.85); font-weight: 600; font-size: 14px; }
.eazoom { position: absolute; right: 24px; bottom: 120px; display: flex; flex-direction: column; gap: 6px; }
.eazoom button { width: 42px; height: 42px; border-radius: 10px; border: 0; background: rgba(8,8,10,.8); color: var(--text); font: 600 22px Manrope, sans-serif; cursor: pointer; }
.eazoom button:hover { background: rgba(30,30,36,.95); }
@media (max-width: 700px) {
  .eahead, .eanow { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 16px; }
  .eanow { transform: none; width: auto; grid-template-columns: minmax(0, 1fr); padding: 12px 14px; } .eanow .eakind { grid-row: auto; justify-self: start; } .eanow small, .eabtns { grid-column: 1; grid-row: auto; }
  .eanow b { white-space: normal; font-size: 17px; } .eabtns { margin-top: 6px; } .eabtns .tplay, .eabtns .tghost { padding: 9px 12px; font-size: 13px; }
  .eahead h1 { font-size: 22px; } .eahead p { font-size: 13px; margin-bottom: 12px; } .eatowns { display: none; }
  .eazoom { right: 12px; bottom: auto; top: 76px; } .eamsg { top: 70px; }
}
.tflinks { display: flex; flex-wrap: wrap; gap: 8px 18px; width: 100%; } .tflinks a { color: var(--dim); font-size: 13.5px; } .tflinks a:hover { color: var(--text); }
.tlegal { width: 100%; margin: 0; color: #6f6f7a; font-size: 12.5px; }