/* Punk Runner: gemeinsamer Seitenrahmen, lokale Pixelgrafik und echtes Seitenmenü. */
.pr-hub { background:radial-gradient(ellipse at 85% 0,#321a22,transparent 48%),#0c0b0e; color:#f4eadd; padding-bottom:36px; --paper-2:#171419; --ink:#eadde0; --red:#ee8a91; --rt-text-muted:#c5b8bd; --rt-text-faint:#b5a9ae; }
.pr-hub [hidden] { display:none!important; }
.pr-hub .spiel-kopf { max-width:1120px; padding:22px 24px 16px; --spiel-kopf-farbe:#b5a9ae; }
.pr-shell { max-width:1120px; margin:auto; padding:0 24px; font:14px/1.6 Inter,system-ui,sans-serif; }
.pr-shell * { box-sizing:border-box; }
.pr-shell button, .pr-shell input { font:inherit; }
.pr-shell button, .pr-shell summary { cursor:pointer; }
.pr-shell :is(a,button,input,summary):focus-visible { outline:3px solid #f3c584; outline-offset:4px; }
.pr-hero { position:relative; isolation:isolate; overflow:hidden; min-height:340px; border:1px solid #4c313d; border-radius:16px; background:radial-gradient(ellipse at 80% 50%,#5c292d,#22131c 60%,#120e14); margin-bottom:32px; }
.pr-hero-art { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.pr-hero-art img { position:absolute; right:-20px; bottom:-115px; width:480px; height:480px; object-fit:contain; filter:drop-shadow(0 0 35px #bd58483b); }
.pr-city { position:absolute; right:0; bottom:0; width:70%; height:80%; opacity:.3; background:repeating-linear-gradient(90deg,transparent 0 46px,#b57263 46px 50px,transparent 50px 70px),repeating-linear-gradient(0deg,#120f16 0 28px,#694340 28px 32px); clip-path:polygon(0 65%,8% 65%,8% 30%,20% 30%,20% 50%,33% 50%,33% 0,48% 0,48% 35%,62% 35%,62% 15%,78% 15%,78% 60%,90% 60%,90% 40%,100% 40%,100% 100%,0 100%); }
.pr-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#140e16 0%,#140e16e8 38%,#140e160d 90%); }
.pr-hero-copy { max-width:650px; padding:32px 36px; }
.pr-eyebrow { display:block; color:#dfa7ad; font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.14em; }
.pr-hero h1 { margin:20px 0 16px; color:#f4eadd; font:400 clamp(36px,5.7vw,62px)/1.1 'Permanent Marker',cursive; letter-spacing:-.04em; }
.pr-hero p { max-width:410px; color:#d1c3c5; margin:0; font-size:14px; line-height:1.7; }
.pr-tags { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px; }
.pr-tags span { padding:5px 9px; border:1px solid #65434d; border-radius:5px; font-size:11px; color:#d4c6cb; }
.pr-hero-actions { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:12px; }
.pr-hero-actions a { display:inline-flex; align-items:center; min-height:44px; color:#c8b4bc; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.pr-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:start; gap:24px; }
.pr-main,.pr-sidebar { min-width:0; }
.pr-start-card { padding:24px; border:1px solid #86424b; border-radius:12px; background:linear-gradient(145deg,#321b25,#181318); }
.pr-shell h2 { color:#f4eadd; font:700 21px/1.3 Inter,system-ui,sans-serif; margin:14px 0 12px; }
.pr-start-card > p { margin:0 0 20px; color:#bfb2b7; font-size:13px; }
.pr-first-steps { margin:24px 0; padding:22px; border:1px solid #3b3037; border-radius:12px; background:#151217; }
.pr-first-steps h2 { margin:0; font-size:19px; }
.pr-first-steps ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0 0; list-style:none; padding:0; }
.pr-first-steps li { display:flex; gap:10px; }
.pr-first-steps li > span { display:grid; place-items:center; flex:0 0 25px; height:25px; border:1px solid #65434d; border-radius:50%; color:#efa0a5; font:12px ui-monospace,monospace; }
.pr-first-steps strong { font-size:12px; }
.pr-first-steps p { color:#b5a9ae; font-size:11px; margin:5px 0 0; }
.pr-player,.pr-ranking { padding:22px; border:1px solid #3b3037; border-radius:12px; background:#171419; margin-bottom:16px; }
.pr-player label { display:block; margin-bottom:10px; color:#e8dadd; font-size:12px; font-weight:600; }
.pr-player input { width:100%; min-height:44px; padding:10px 12px; color:#f4eadd; background:#0e0b10; border:1px solid #66505c; border-radius:6px; }
.pr-player p,.pr-ranking p { color:#b5a9ae; font-size:11px; margin:10px 0 0; }
.pr-hub #pr-leaderboard { max-width:none; margin:0; }
.pr-hub #pr-leaderboard > summary { padding:0 0 16px; background:none; border:0; color:#e8dadd; font:600 13px/1.4 Inter,system-ui,sans-serif; letter-spacing:0; justify-content:space-between; }
.pr-disclosure::before { content:'+'; }
[open] > summary .pr-disclosure::before { content:'−'; }
.pr-ranking table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px; margin-top:12px; }
.pr-ranking :is(th,td) { padding:10px 4px!important; border-color:#3b3037!important; color:#c5b8bd!important; overflow-wrap:anywhere; }
.pr-ranking :is(th,td):first-child { width:28px; }
.pr-ranking :is(th,td):last-child { width:76px; text-align:right; color:#f3cb88!important; }
/* Lobbymenü: natürliche Höhe, lesbare Listen, große Touchziele. */
#pr-menu-dock .pr-m { position:static; inset:auto; width:auto; height:auto; padding:0; gap:16px; border:0; background:none; backdrop-filter:none; overflow:visible; --rot:#e77882; --gold:#f3cb88; --s:1.2; }
#pr-menu-dock .pr-m button { min-height:44px; border-radius:7px; font:600 12px/1.5 Inter,system-ui,sans-serif; letter-spacing:0; padding:10px 12px; }
#pr-menu-dock .pr-m :is(.pr-m-sub,.pr-k-text,.pr-k-best,.pr-z-desc) { color:#bfb0b7; font-size:11px; line-height:1.6; }
#pr-menu-dock .pr-m-titel { color:#f0d8dd; font:700 15px/1.4 Inter,system-ui,sans-serif; letter-spacing:0; }
#pr-menu-dock .pr-m-body { overflow:visible; max-height:none; }
#pr-menu-dock .pr-m-level { grid-template-columns:repeat(2,minmax(0,1fr)); min-height:0; gap:10px; }
#pr-menu-dock .pr-m-karte { min-height:150px; padding:14px; border-left-width:3px; }
#pr-menu-dock .pr-k-name { font-size:15px; line-height:1.4; }
#pr-menu-dock .pr-k-nr { color:#cda4b0; font-size:10px; }
#pr-menu-dock .pr-m-karte:disabled { opacity:.6; }
#pr-menu-dock .pr-m-karte:disabled .pr-k-name { color:#d4c1c8; }
#pr-menu-dock .pr-m-reihe { gap:8px; }
#pr-menu-dock .pr-m-reihe:has([data-act="play"]) { order:-1; align-items:stretch!important; }
#pr-menu-dock [data-act="play"] { flex:1 1 100%!important; min-height:48px; color:#fff7eb; background:#bb3d49; border:1px solid #e5727d; font-size:15px; }
#pr-menu-dock .pr-m-reihe:has([data-act="play"]) > :not([data-act="play"]) { display:none; }
#pr-menu-dock .pr-m-liste { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#pr-menu-dock .pr-m-zeile { min-height:104px; }
#pr-menu-dock .pr-z-name { font-size:13px; }
#pr-menu-dock .pr-m-erfolge { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#pr-menu-dock .pr-m-erfolg { min-height:64px; font-size:11px; padding:12px; color:#b5a9ae; }
#pr-menu-dock .pr-m-erfolg.pr-auf { color:#f3cb88; }
#pr-menu-dock .pr-m-fuss { color:#b5a9ae; font-size:10px; line-height:1.7; }
#pr-menu-dock .pr-m-seg { flex-wrap:wrap; }
#pr-menu-dock .pr-m-reihe > button { white-space:normal; }
#pr-menu-dock .pr-m-regler { flex-wrap:wrap; font-size:12px; }
#pr-menu-dock .pr-m-regler input { min-width:0; }
/* Die vollständige Anleitung bleibt erhalten und übernimmt die dunkle Palette. */
.pr-hub #pr-guide { padding:0; border:1px solid #3b3037; border-radius:12px; background:#151217; margin:0 0 24px; overflow:hidden; scroll-margin-top:80px; }
.pr-hub #pr-guide > summary { padding:17px 18px; color:#e8dadd; border-bottom:1px solid #3b3037; font:600 13px/1.5 Inter,system-ui,sans-serif; letter-spacing:0; }
.pr-hub #pr-guide .game-fold__hint { color:#b5a9ae; font-size:10px; letter-spacing:0; }
.pr-hub #pr-guide-body { padding:18px; font-family:Inter,system-ui,sans-serif; }
.pr-hub #pr-guide-body [style*="border:2px"] { border:1px solid #3b3037!important; border-radius:8px; padding:16px!important; }
.pr-hub #pr-guide-body [style*="color:#7a6a48"] { color:#b5a9ae!important; }
.pr-hub #pr-guide-body [style*="minmax(280px"] { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important; }
.pr-hub #pr-guide-body [style*="minmax(250px"] { grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))!important; }
.pr-hub #pr-guide-body table td { white-space:normal!important; overflow-wrap:anywhere; }
.pr-hub #pr-guide-body table { font-size:12px!important; }
.pr-page { border:1px solid #4c313d; border-radius:12px; padding:16px; scroll-margin-top:75px; }
.pr-play-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.pr-play-heading button { color:#f4eadd; border:1px solid #70505b; border-radius:7px; min-height:44px; padding:10px 16px; background:#272029; }
.pr-play-heading strong { color:#cda4b0; font-size:12px; }
.pr-hub #gameCanvas { width:100%; border:1px solid #70505b; border-radius:8px; box-shadow:none; }
.pr-hub #pr-canvas-wrap:not(:fullscreen):not(:-webkit-full-screen):not(.pr-ios-fullscreen) #btn-fullscreen { display:none; }
.pr-community { margin-top:28px; --paper:#171419; --ink:#e8dadd; --red:#e77882; --paper-2:#211a23; --rt-text-muted:#bfb2b7; --rt-text-faint:#b5a9ae; }
.pr-community > * { max-width:none!important; }
@media(max-width:850px) { .pr-layout { grid-template-columns:minmax(0,1fr) 260px; gap:18px; } .pr-hero-art img { right:-75px; } }
@media(max-width:700px) { .pr-shell { padding:0 16px; } .pr-hub .spiel-kopf { padding:18px 16px; } .pr-layout { grid-template-columns:1fr; } .pr-hero { min-height:330px; } .pr-hero-copy { padding:24px; } .pr-hero h1 { font-size:36px; } .pr-hero-art img { right:-130px; opacity:.45; } .pr-hero::before { background:linear-gradient(90deg,#140e16e8,#140e16a8 55%,#140e1633); } .pr-first-steps ol { grid-template-columns:1fr; } .pr-start-card { padding:20px; } .pr-sidebar { margin-top:6px; } .pr-page { padding:10px; } #pr-menu-dock .pr-m-liste { grid-template-columns:1fr; } .pr-hub #pr-guide-body { padding:12px; } }
@media(max-width:380px) { .pr-hero h1 { font-size:30px; } .pr-hero-copy { padding:20px; } .pr-start-card { padding:16px; } #pr-menu-dock .pr-m-level,#pr-menu-dock .pr-m-erfolge { grid-template-columns:1fr; } #pr-menu-dock .pr-m-karte { min-height:130px; } }

.pr-hub #pr-guide-body > div { background:#171419!important; }
.pr-community { --muted:#b5a9ae; --rt-text-sub:#e5d5dc; }
.pr-community .kom-wrap,.pr-community .sf-wrap { max-width:none; margin:20px 0 0; padding:0; }
.pr-community .kom-wrap { border-top:1px solid #493039; padding-top:12px; }
.pr-community .kom-toggle { border-color:#493039; }
.pr-community .kom-input,.pr-community .kom-textarea { border-color:#60404e; color:#f4eadd; }
.pr-report-card { margin-top:20px; padding:22px; border:1px solid #493039; border-radius:12px; background:#171419; }
.pr-report-card h2 { margin:0 0 8px; font-size:16px; }
.pr-report-card p { margin:0 0 12px; color:#b5a9ae; font-size:12px; }
.pr-report-card .sf-wrap { margin:0; }
.pr-report-card .sf-auf { min-height:40px; padding:10px 14px; border-radius:5px; background:#9d3344; color:#fff2ea; border:1px solid #da7481; font-weight:700; }
.pr-report-card .sf-form { border-color:#60404e; background:#171018; }
.pr-report-card .sf-label { color:#dbc6ce; }
.pr-report-card .sf-text { border-color:#715362; border-radius:6px; font-size:13px; }
#pr-menu-status:empty { display:none; }
#pr-menu-status { margin:18px 0 0; padding:12px; border:1px solid #715362; border-radius:7px; color:#f3cb88; background:#211820; font-size:12px; }
.pr-hub .rt-leiste { margin:0 0 16px; padding:0; max-width:none; justify-content:flex-end; }
.pr-hub .rt-leiste button { min-height:44px; padding:10px 14px; border-radius:7px; font:600 12px/1.4 Inter,system-ui,sans-serif; letter-spacing:0; }
.pr-hub #btn-fullscreen-mobile { display:none; }
#pr-help { width:min(92vw,540px); padding:24px; border:1px solid #70505b; border-radius:12px; background:#171419; color:#f4eadd; font:14px/1.7 Inter,system-ui,sans-serif; }
#pr-help::backdrop { background:#0b070be6; }
#pr-help p { color:#c5b8bd; margin:12px 0; }
#pr-help button { min-height:44px; padding:10px 16px; border:1px solid #e5727d; border-radius:7px; background:#bb3d49; color:#fff7eb; cursor:pointer; }