@font-face { font-family: m5x7; src: url('/site/m5x7.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Outfit; src: url('/site/outfit.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --sky: #6fb0ea; --navy: #1b2952; --deep: #10183a; --gold: #ffc42e; --flame: #f59a2e; --ember: #c9561a; --cream: #fff1d6; --soil: #17120f; --cave: #3a120b; --ice: #12224a; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { cursor: url('/site/cursor/point-auto.png') 1 1, auto; }
a, button, summary, input, [data-name] { cursor: url('/site/cursor/hover-pointer.png') 8 1, pointer; }
body::after { content: url('/site/cursor/hover-pointer.png') url('/site/cursor/click.png'); position: absolute; width: 0; height: 0; overflow: hidden; }
a:active, button:active, summary:active { cursor: url('/site/cursor/click.png') 2 1, pointer; }
body { margin: 0; background: var(--soil); color: var(--cream); font: 400 19px/1.55 Outfit, 'Hiragino Sans', 'PingFang SC', 'Apple SD Gothic Neo', 'Noto Sans CJK JP', sans-serif; -webkit-font-smoothing: antialiased; }
img, canvas { image-rendering: pixelated; }
a { color: var(--gold); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 46px; }
h2 { font-size: 36px; color: var(--gold); margin-bottom: 10px; }
h3 { font-size: 28px; color: var(--gold); } h3 a { text-decoration: none; }
p { margin: 0 0 12px; max-width: 34em; }
.top { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; gap: 24px; padding: 14px clamp(16px, 4vw, 48px); }
.top img { display: block; width: 150px; height: auto; }
.top > a:first-child { position: relative; flex: none; display: block; }
.top > a:first-child::after { content: ''; position: absolute; left: 52.639%; top: 26.357%; width: 11.944%; aspect-ratio: 1; background: url('/site/logo_swirl.png') 0 0 / 1600% 100% no-repeat; animation: swirl 1.6s steps(16) infinite; pointer-events: none; }
@keyframes swirl { to { background-position-x: 106.667%; } }
@media (prefers-reduced-motion: reduce) { .top > a:first-child::after { animation: none; } }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-left: auto; }
.top nav a { color: #fff; text-decoration: none; font-size: 18px; font-weight: 700; text-shadow: 0 1px 3px rgba(13, 21, 51, .85); }
.top nav a:hover { color: var(--gold); }
.top .dc { display: block; margin-left: 4px; } .top .dc img { display: block; width: 118px; height: 40px; filter: drop-shadow(0 1px 2px rgba(13, 21, 51, .85)); }
.langs { position: relative; z-index: 30; flex: none; width: 176px; }
.langs summary { list-style: none; display: block; position: relative; width: 176px; height: 52px; background: url('/site/lang_bar.png') center / 100% 100% no-repeat; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary:hover { background-image: url('/site/lang_bar_h.png'); }
.langcur { position: absolute; left: 24%; right: 21%; top: 49%; bottom: 13%; display: flex; align-items: center; justify-content: center; color: #4a2410; font-weight: 600; font-size: 13px; line-height: 1; white-space: nowrap; overflow: hidden; }
.langpanel { position: absolute; right: 0; top: 56px; width: 380px; height: 99px; background: url('/site/lang_panel.png') center / 100% 100% no-repeat; }
.langflags { position: absolute; left: 7.2%; width: 82.9%; top: 24.8%; height: 34.3%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 3.6%; }
.langflags a, .langflags span { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; }
.langflags img { display: block; width: 88%; max-width: 88%; height: auto; image-rendering: auto; }
.langflags .soon img { filter: grayscale(1); opacity: .55; }
.langflags .on { box-shadow: 0 0 0 2px #2fe0d0; }
.langflags a:hover img { filter: brightness(1.2); }
.langname { position: absolute; left: 18%; right: 18%; top: 69%; bottom: 3%; display: flex; align-items: center; justify-content: center; color: #4a2410; font-weight: 600; font-size: 13px; line-height: 1; white-space: nowrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 2px; border: 24px solid transparent; border-image: url('/site/btn.png') 8 fill / 24px; image-rendering: pixelated; color: #4a2410; font-size: 26px; font-weight: 800; line-height: 1; text-decoration: none; text-shadow: 0 1px #ffe7a8; }
.btn::before { content: ''; flex: none; width: 32px; height: 32px; background: url('/favicon-32.png') center / 100% 100% no-repeat; image-rendering: pixelated; }
.btn { cursor: url('/site/cursor/hover-pointer.png') 8 1, pointer; }
.btn:hover { border-image-source: url('/site/btn_h.png'); }
.btn:active { border-image-source: url('/site/btn_p.png'); transform: translateY(2px); }
.hero { overflow: hidden; position: relative; height: calc(100vh - 32px); height: calc(100svh - 32px); min-height: 560px; display: flex; align-items: flex-end; padding: 84px clamp(16px, 5vw, 80px) 0; gap: 40px; justify-content: space-between; background: var(--sky) url('/site/hero_bg.webp') center bottom / cover no-repeat; }
.say { position: relative; z-index: 3; flex: 0 1 720px; align-self: center; margin-bottom: 16px; min-width: 0; padding: 6px 10px 10px; border: 39px solid transparent; border-image: url('/site/frame.png') 13 fill / 39px; image-rendering: pixelated; }
.say p { margin: 8px 0 12px; }
.ground { --s: 5; position: relative; display: flex; align-items: flex-end; justify-content: center; flex: none; width: 620px; margin-bottom: -6px; }
.walker { position: absolute; z-index: 2; bottom: calc(var(--s) * -5px); width: calc(var(--s) * 100px); height: calc(var(--s) * 40px); background-size: calc(var(--s) * 2200px) calc(var(--s) * 40px); background-repeat: no-repeat; image-rendering: pixelated; pointer-events: none; transform-origin: 50% 85%; }
.flash { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; transition: opacity .35s linear; }
.bubble { --a: 0px; position: absolute; z-index: 4; bottom: calc(var(--s) * 34px + 24px); max-width: 300px; width: max-content; padding: 8px 14px 10px; background: #fff; color: #1a1420; font-family: m5x7, Outfit, sans-serif; font-size: 32px; font-weight: 400; line-height: 1; -webkit-font-smoothing: none; text-decoration: none; box-shadow: 0 -4px #1a1420, 0 4px #1a1420, 4px 0 #1a1420, -4px 0 #1a1420, inset 0 -4px #cfd8e6; }
.bubble::after { content: ''; position: absolute; left: calc(50% + var(--a) - 2px); bottom: -8px; width: 4px; height: 4px; background: #fff; box-shadow: -4px 0 #fff, 4px 0 #fff, -8px 0 #1a1420, 8px 0 #1a1420, -4px 4px #1a1420, 0 4px #fff, 4px 4px #1a1420, 0 8px #1a1420; }
a.bubble { color: #1a1420; } a.bubble:hover { background: #fff1b8; }
.alpha { display: inline-block; margin-bottom: 8px; padding: 2px 10px 6px; background: var(--flame); color: #3f1f06; }
.platforms { margin-top: 12px; width: max-content; max-width: 100%; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.store img { display: block; height: 36px; width: auto; filter: grayscale(1); opacity: .6; image-rendering: auto; }
.platforms b { display: block; margin-top: 6px; text-align: center; font-weight: 600; font-size: 16px; color: var(--gold); line-height: 1; }
.portal { position: relative; display: block; flex: none; width: 342px; height: 324px; text-decoration: none; }
.portal canvas { position: absolute; left: 57px; top: 48px; width: 180px; height: 192px; }
.portal img { position: absolute; inset: 0; width: 100%; height: 100%; }
.strip { height: 32px; background-size: 128px 32px; background-repeat: repeat-x; image-rendering: pixelated; }
.grass { background-image: url('/site/strip_grass.png'); } .cavefloor { background-image: url('/site/strip_cave.png'); } .snow { background-image: url('/site/strip_snow.png'); }
main { overflow-x: clip; }
.band { padding: 56px clamp(16px, 6vw, 96px); }
.soil { background: var(--soil); } .ember { background: var(--cave); } .ice { background: var(--ice); } .sky { background: #2a4f86; }
.wrap { max-width: 1160px; margin: 0 auto; }
.lineup { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 12px; margin-top: 32px; text-align: center; }
.lineup a { color: var(--cream); text-decoration: none; display: block; min-width: 0; }
.lineup a:hover b { color: var(--flame); }
.actor { --s: 4; display: block; position: relative; left: 50%; width: calc(var(--s) * 100px); height: calc(var(--s) * 40px); margin: 0 0 calc(var(--s) * -5px) calc(var(--s) * -40px); background-repeat: no-repeat; background-size: calc(var(--s) * 2200px) calc(var(--s) * 40px); image-rendering: pixelated; }
.lineup .strip { margin-bottom: 8px; }
.lineup b { display: block; font-weight: 800; font-size: 22px; color: var(--gold); }
.lineup small { font-size: 16px; }
.place { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: center; margin-top: 36px; }
.place:nth-of-type(even) { grid-template-columns: 1fr 1.35fr; }
.place:nth-of-type(even) img { order: 2; }
.place img { display: block; width: 100%; height: auto; }
.place small { color: var(--flame); font-size: 18px; font-weight: 600; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 36px; margin: 10px 0 14px; padding: 0; list-style: none; }
.facts b { display: block; font-weight: 800; font-size: 34px; line-height: 1.05; color: var(--gold); }
main details { max-width: 44em; padding: 2px 8px 6px; margin-bottom: 8px; border: 20px solid transparent; border-image: url('/site/plate.png') 10 fill / 20px; image-rendering: pixelated; }
main summary { color: var(--gold); } main summary h3 { display: inline; font-size: inherit; font-weight: 600; line-height: inherit; letter-spacing: 0; color: inherit; }
main details p { margin: 8px 0 4px; }
table { border-collapse: collapse; margin: 12px 0 20px; }
th, td { text-align: left; padding: 3px 26px 3px 0; font-weight: 400; } th { color: var(--gold); }
.more { margin-top: 12px; } .more a { margin-right: 18px; display: inline-block; }
.crumbs { margin: 0 0 12px; color: var(--cream); } .crumbs a { color: var(--gold); }
.page { padding: 116px clamp(16px, 6vw, 96px) 56px; min-height: 60vh; background: var(--navy); }
.page h2 { margin-top: 28px; } .page li { max-width: 36em; } .page ul, .page ol { padding-left: 22px; }
.klass { display: flex; gap: 24px; align-items: flex-end; margin-top: 30px; } .klass .actor { --s: 3; left: 0; flex: none; margin: 0 -130px -15px -50px; } .klass h2 { margin: 0; }
.end { text-align: center; padding-bottom: 0; } .end .portal { margin: 16px auto 0; } .end p { margin-inline: auto; } .end .platforms { margin-inline: auto; }
.foot { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 28px; padding: 44px clamp(16px, 6vw, 96px) 24px; background: #0b1026; font-size: 17px; }
.foot h2 { font-size: 18px; color: var(--gold); margin: 0 0 8px; }
.fcol { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .fcol a { color: var(--cream); text-decoration: none; } .fcol a:hover { color: var(--gold); text-decoration: underline; }
.fbrand img { display: block; width: 170px; height: auto; } .fbrand p { margin: 10px 0 14px; color: var(--cream); } .fbrand .btn { font-size: 20px; border-width: 18px; border-image-width: 18px; padding: 0 8px 2px; }
.fcopy a { color: var(--cream); } .wiki h2 small { color: #aeb6d6; font-size: 18px; font-weight: 400; }
.fcopy { grid-column: 1 / -1; margin: 12px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); color: #aeb6d6; max-width: none; }
/* Kleine Laptops: Alles bleibt in einer Bildschirmhoehe. */
@media (min-width: 861px) and (max-height: 800px) {
  .say { padding: 0 6px 4px; border-width: 26px; border-image-width: 26px; } h1 { font-size: 38px; } .facts b { font-size: 28px; } .facts { margin: 4px 0 8px; }
  .ground { --s: 4; width: 520px; } .portal { width: 285px; height: 270px; } .portal canvas { left: 47px; top: 40px; width: 150px; height: 160px; }
}
@media (min-width: 861px) and (max-height: 660px) { .say p { display: none; } }
@media (min-width: 861px) and (max-width: 1240px) { .ground { --s: 4; width: 440px; } .portal { width: 285px; height: 270px; } .portal canvas { left: 47px; top: 40px; width: 150px; height: 160px; } }
@media (max-width: 860px) {
  .foot { grid-template-columns: repeat(2, 1fr); gap: 22px; } .fbrand { grid-column: 1 / -1; }
  body { font-size: 18px; } .say { border-width: 26px; border-image-width: 26px; padding: 4px; }
  .hero { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 8px; height: auto; min-height: calc(100svh - 32px); } .say { flex: none; margin-bottom: 0; } .say p { display: none; } h1 { font-size: 48px; } .facts { flex-wrap: nowrap; gap: 20px; } .facts li { font-size: 15px; } .facts b { font-size: 26px; } h1 { font-size: 34px; } h2 { font-size: 30px; } .store img { height: 28px; } .stores { flex-wrap: nowrap; gap: 6px; } .platforms { width: auto; } .ground { --s: 3; width: 100%; } .bubble { max-width: 220px; } .portal { width: 228px; height: 216px; } .portal canvas { left: 38px; top: 32px; width: 120px; height: 128px; }
  .lineup { grid-template-columns: repeat(2, 1fr); row-gap: 28px; overflow: hidden; } .lineup .actor { --s: 3; } .place, .place:nth-of-type(even) { grid-template-columns: 1fr; } .place:nth-of-type(even) img { order: 0; }
  .langs, .langs summary { width: 150px; height: 44px; } .langpanel { top: 48px; width: 320px; height: 83px; } .top { flex-wrap: wrap; gap: 6px 16px; } .top .langs { position: absolute; right: 16px; top: 10px; margin: 0; } .top { padding-right: 176px; } .parade canvas { width: 64px; height: 64px; } .top img { width: 112px; } .top nav { margin-left: 0; } .top nav a { font-size: 16px; }
  .page { padding-top: 140px; } .hero { padding-top: 124px; }
}
.presskit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0 20px; }
.presskit a { display: block; color: var(--cream); } .presskit img { display: block; width: 100%; height: auto; }
.logos { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 12px 0; } .logos img { display: block; height: 96px; width: auto; }
.wiki table { background: rgba(255, 255, 255, .04); } .tw { overflow-x: auto; }
.wiki td, .wiki th { padding: 6px 22px 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); vertical-align: top; }
.facts-t { min-width: 320px; max-width: 760px; } .facts-t th { white-space: nowrap; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 20px; padding: 0 !important; list-style: none; }
.wsub { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 14px; padding: 8px 12px; background: rgba(0, 0, 0, .22); } .wsub a { color: var(--cream); font-weight: 600; font-size: 16px; text-decoration: none; } .wsub a:hover { color: var(--gold); }
canvas.spr { vertical-align: middle; image-rendering: pixelated; } .ic { vertical-align: middle; image-rendering: pixelated; }
.wiki td .spr, .wiki td .ic { margin-right: 8px; }
.whero { margin: 8px 0 20px; padding: 18px 18px 0; background: var(--cave); } .whero p { max-width: 44em; }
.parade { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; overflow: hidden; margin-top: 14px; } .parade a { flex: none; line-height: 0; }
.whero .strip { margin: -6px -18px 0; }
.wfind { position: relative; max-width: 460px; } .wfind input { width: 100%; padding: 10px 14px; border: 2px solid var(--gold); background: #10183a; color: var(--cream); font: inherit; } .wfind ul { position: absolute; z-index: 8; left: 0; right: 0; margin: 0; padding: 0 !important; list-style: none; background: #10183a; box-shadow: 0 8px 18px rgba(0, 0, 0, .4); } .wfind li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; max-width: none; } .wfind small { color: #aeb6d6; }
.wcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 18px; }
.wcard { display: flex; flex-direction: column; gap: 4px; padding: 2px 6px 6px; border: 20px solid transparent; border-image: url('/site/plate.png') 10 fill / 20px; image-rendering: pixelated; color: var(--cream); text-decoration: none; } .wcard b { color: var(--gold); font-size: 20px; } .wcard small { font-size: 15px; line-height: 1.35; } .wcard:hover b { text-decoration: underline; }
.wmaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 18px; } .wmap { display: block; text-decoration: none; } .wmap img { display: block; width: 100%; height: auto; } .wmap b { display: block; text-align: center; }
.wtop { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin: 10px 0 18px; } .wtop > div:last-child { flex: 1 1 320px; min-width: 0; } .wart { flex: none; } .wart .strip { margin-top: -8px; }
.wtop .actor { --s: 4; left: 0; flex: none; margin: 0 -240px -20px -90px; }
.wclip, .wmapimg { display: block; width: 100%; max-width: 760px; height: auto; margin: 12px 0; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 22px; max-width: none; }
.wiki .lineup .actor { --s: 3; }
.wdata { margin-top: 20px; color: #aeb6d6; font-size: 15px; max-width: none; }
.post, .bhome { background: #141c42; }
.phero { padding: 112px clamp(16px, 6vw, 96px) 34px; background: linear-gradient(180deg, #1b2952, #141c42); }
.phtext { max-width: 1120px; margin: 0 auto; } .phero h1 { font-size: clamp(34px, 4.6vw, 54px); max-width: 860px; margin: 10px 0 12px; } .lede { font-size: 21px; line-height: 1.5; max-width: 720px; color: #d9def0; }
.tag { display: inline-block; padding: 3px 10px; background: var(--flame); color: #3f1f06; font-size: 14px; font-weight: 700; }
.by { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; } .by img { border-radius: 50%; } .by b { display: block; line-height: 1.2; } .by small { color: #aeb6d6; font-size: 15px; } .by > small { margin-left: 8px; }
.pgrid { display: grid; grid-template-columns: minmax(0, 720px) 280px; gap: 56px; justify-content: center; max-width: 1120px; margin: 0 auto; padding: 30px clamp(16px, 6vw, 40px) 40px; }
.pbody { font-size: 19px; line-height: 1.7; } .pbody p { max-width: none; margin: 0 0 18px; } .pbody h2 { font-size: 30px; margin: 34px 0 10px; scroll-margin-top: 20px; } .pbody ul { padding-left: 22px; margin: 0 0 20px; } .pbody li { margin-bottom: 6px; } .pbody a:not(.btn) { color: var(--gold); }
.pbody table { width: 100%; } .pbody td, .pbody th { padding: 9px 16px 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, .12); vertical-align: top; font-size: 16px; line-height: 1.4; } .pbody .tw { overflow-x: auto; margin: 0 0 20px; background: rgba(255, 255, 255, .04); }
.shot { margin: 22px 0 26px; } .shot img { display: block; width: 100%; height: auto; } .shot figcaption { margin-top: 8px; color: #aeb6d6; font-size: 15px; line-height: 1.4; }
.tabbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #0b1026; border-radius: 8px 8px 0 0; } .tabbar i { width: 10px; height: 10px; border-radius: 50%; background: #39446f; } .tabbar i:first-child { background: var(--flame); } .tabbar span { flex: 1; margin-left: 8px; padding: 2px 10px; background: #1b2952; border-radius: 4px; color: #aeb6d6; font-size: 13px; line-height: 1.4; }
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 30px 0; padding: 4px 8px; border: 26px solid transparent; border-image: url('/site/frame.png') 13 fill / 26px; image-rendering: pixelated; } .callout p { flex: 1 1 240px; margin: 0; font-weight: 600; }
.callout .btn, .pplay .btn { font-size: 20px; border-width: 18px; border-image-width: 18px; padding: 0 8px 2px; }
.author { display: flex; gap: 16px; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); } .author img { border-radius: 50%; } .author p { margin: 0; font-size: 16px; line-height: 1.4; color: #cfd6ee; }
.pside { position: sticky; top: 24px; align-self: start; font-size: 16px; } .pside nav { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border-left: 3px solid var(--gold); } .pside nav b { color: var(--gold); } .pside nav a { color: var(--cream); text-decoration: none; line-height: 1.3; } .pside nav a:hover { color: var(--gold); } .pplay { margin-top: 24px; } .pplay p { font-size: 15px; line-height: 1.4; }
.prel { max-width: 1120px; margin: 0 auto; padding: 10px clamp(16px, 6vw, 40px) 48px; } .prel h2 { font-size: 30px; }
.bhome { padding: 112px clamp(16px, 6vw, 96px) 48px; } .bhome header { max-width: 1120px; margin: 0 auto 26px; } .bhome h1 { font-size: 54px; }
.bcard { display: block; color: var(--cream); text-decoration: none; background: #1b2952; transition: transform .12s; } .bcard:hover { transform: translateY(-3px); } .bcard:hover h2 { text-decoration: underline; } .bcard img { display: block; width: 100%; height: auto; } .bcard > div { padding: 14px 16px 16px; } .bcard h2 { margin: 8px 0 6px; font-size: 22px; color: var(--gold); } .bcard p { margin: 0 0 8px; font-size: 16px; line-height: 1.45; } .bcard small { color: #aeb6d6; font-size: 14px; }
.bcard.big { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; max-width: 1120px; margin: 0 auto 22px; } .bcard.big h2 { font-size: 32px; } .bcard.big p { font-size: 18px; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; max-width: 1120px; margin: 0 auto; } .bhome .more { max-width: 1120px; margin: 24px auto 0; }
@media (max-width: 860px) { .phero, .bhome { padding-top: 136px; } }
@media (max-width: 960px) { .pgrid { grid-template-columns: minmax(0, 1fr); } .pside { position: static; order: -1; } .pplay { display: none; } .bcard.big { grid-template-columns: 1fr; } }
.wname { position: absolute; z-index: 2; bottom: calc(var(--s) * 31px); transform: translateX(-50%); color: #fff; font-family: m5x7, Outfit, sans-serif; font-size: 26px; line-height: 1; white-space: nowrap; text-shadow: 2px 0 #1a1420, -2px 0 #1a1420, 0 2px #1a1420, 0 -2px #1a1420; pointer-events: none; }
.clip { display: block; box-sizing: border-box; width: 100%; height: auto; margin-top: 18px; border: 26px solid transparent; border-image: url('/site/frame.png') 13 / 26px; image-rendering: pixelated; background: #0d1533; }
.fdc { grid-column: 1 / -1; margin: 12px 0 0; text-align: center; max-width: none; } .fdc img { display: inline-block; vertical-align: middle; opacity: .9; }
.klass .actor { pointer-events: none; }
.legal .wrap { max-width: 800px; } .legal h2 { font-size: 26px; margin-top: 26px; } .legal p, .legal li { max-width: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }