/* Headline font New Rocker (SIL OFL 1.1, assets/OFL-newrocker.txt), unchanged file from the design variant V1 */
@font-face{font-family:"New Rocker";src:url(assets/NewRocker-Regular.ttf) format("truetype");font-weight:normal;font-style:normal;font-display:swap}

/* Metalflirt-Warteraum. Palette and tone follow the maintenance page:
   background #313842, card #212936, border #3e4959, orange #d8832e,
   bronze #d5ac84, cream #ede6d8, grey #a9b5c2. No external resources. */

*{box-sizing:border-box}
html{background:#313842;-webkit-text-size-adjust:100%}
/* The page fills the viewport (also inside the iframe of the maintenance page);
   the chat list scrolls inside, the page itself only as a last resort. */
body{display:flex;flex-direction:column;height:100vh;height:100dvh;margin:0;overflow:auto;color:#ddd;font:1rem/1.5 Verdana,Arial,Helvetica,sans-serif}
h1,h2,h3{margin:0;font-family:"New Rocker",Georgia,"Times New Roman",serif;font-weight:normal;line-height:1.25;color:#ede6d8;text-shadow:0 0 2px #000,0 0 6px #000}
h1{font-size:1.35rem}
h2{font-size:1.1rem}
p{margin:0}
a{color:#d5ac84}
button,input{font:inherit}
[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:.5rem;top:-3rem;z-index:10;padding:.4rem .8rem;background:#d8832e;color:#1a1f27;border-radius:4px}
.skip:focus{top:.5rem}

:focus-visible{outline:2px solid #ede6d8;outline-offset:2px}

/* Header with the operator's logo */
.site-header{position:relative;flex:none;height:81px;background:#313842 url(assets/header-bg.jpeg) repeat-x}
.logo{display:block;max-width:100%;height:auto;margin:0 auto}
.head-tools{position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center;gap:.5rem}
.head-icon{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.55rem;padding:0;color:#d5ac84;background:#212936;border:1px solid #3e4959;border-radius:4px;cursor:pointer}
.head-icon:hover{border-color:#d5ac84;color:#ede6d8}
.pix{display:block}
.lang{display:flex;gap:.25rem}
.lang button{padding:.15rem .5rem;font-size:.8rem;color:#a9b5c2;background:#212936;border:1px solid #3e4959;border-radius:4px;cursor:pointer}
.lang button[aria-pressed="true"]{color:#1a1f27;background:#d5ac84;border-color:#d5ac84;font-weight:bold}

/* Page grid: single column (mobile) by default, two columns from 900px */
.layout{display:flex;flex:1 1 auto;flex-direction:column;gap:.75rem;width:100%;min-height:0;max-width:120rem;margin:0 auto;padding:.75rem}
.intro{order:0;flex:none}
.mock-banner,.notice,.admin{order:1;flex:none}
.stage-win{order:2;flex:none}
.tabs{order:3;flex:none}
.panels{order:4;display:flex;flex:1 1 auto;flex-direction:column;min-height:14rem}
.win{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat,.game{flex:1 1 auto;min-height:0}
.win>.panel{flex:1 1 auto}

/* Banner: title bar of the original site (V1 graphics) as its own block ABOVE the window, never inside it */
.banner{text-shadow:0 1px 1px #000,0 0 3px #000,0 0 6px #000;flex:none;height:27px;margin:0 0 .3rem;padding:0 19px 0 18px;overflow:hidden;font-size:17px;line-height:27px;white-space:nowrap;text-overflow:ellipsis;background:url(assets/title_left.gif) left top no-repeat,url(assets/title_right1.gif) right top no-repeat,url(assets/title_bg.gif) repeat-x}
.foot{order:5;flex:none}

.intro .lead{display:none;margin-top:.25rem;color:#a9b5c2;font-size:.9rem}
.online{color:#d5ac84;font-weight:bold}
.online-intro,.intro .sep{display:none}

.mock-banner summary{cursor:pointer;font-weight:bold}
.mock-banner p{margin-top:.4rem}
.mock-banner{padding:.4rem .8rem;color:#ede6d8;background:#2d3540;border:1px dashed #d5ac84;border-radius:4px;font-size:.85rem}
.notice{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.6rem .8rem;color:#ede6d8;background:#2d3540;border:1px solid #3e4959;border-left:4px solid #d8832e;border-radius:4px}
.admin{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;padding:.5rem .8rem;background:#2d3540;border:1px solid #3e4959;border-radius:4px;font-size:.9rem}
.admin-note{color:#a9b5c2;font-size:.8rem}
.admin-state{color:#7fb069}
.admin-state[data-state="wrong"]{color:#f0908a}

/* Stage (runner canvas): strip on mobile, wider band under the panels on desktop */
.stage{background:#212936;border:1px solid #3e4959;border-radius:6px;overflow:hidden}
#stage-canvas{display:block;width:100%;height:72px;image-rendering:pixelated;background:linear-gradient(#2a3340 0,#2a3340 70%,#1a2029 70%,#1a2029 100%)}
.stage-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.35rem .5rem;padding:.35rem .6rem;border-top:1px solid #3e4959;font-size:.9rem}
.stage-hint{flex:1 1 9rem;min-width:0;color:#e8b48c;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-volume{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .5rem;color:#ede6d8;background:#2d3540;border:1px solid #3e4959;border-radius:4px;font-size:.85rem}
.music-volume[hidden]{display:none}
.music-volume:hover,.music-volume:focus-within{border-color:#d5ac84}
.music-volume input{width:5.5rem;margin:0;accent-color:#d8832e;cursor:pointer}
.music-volume output{min-width:2.8rem;text-align:right;font-variant-numeric:tabular-nums}
.stage-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-left:auto}

.toggle,#send,#retry,.admin button{padding:.35rem .8rem;color:#1a1f27;background:#d8832e;border:0;border-radius:4px;font-weight:bold;cursor:pointer}
.toggle{color:#ede6d8;background:#2d3540;border:1px solid #3e4959;font-weight:normal;font-size:.85rem}
.toggle[aria-pressed="true"]{color:#1a1f27;background:#d5ac84;border-color:#d5ac84;font-weight:bold}
.toggle:hover{border-color:#d5ac84}
#send:hover,#retry:hover,.admin button:hover{background:#e8963f}

/* Tabs (mobile only) */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid #3e4959}
.tabs button{flex:1;padding:.55rem .5rem;color:#a9b5c2;background:transparent;border:0;border-bottom:3px solid transparent;cursor:pointer;font-weight:bold}
.tabs button[aria-selected="true"]{color:#ede6d8;border-bottom-color:#d8832e}

/* Panels */
.panel{display:flex;flex-direction:column;min-width:0;min-height:0;background:#212936;border:1px solid #3e4959;border-radius:6px;padding:.75rem;box-shadow:0 12px 32px rgba(0,0,0,.4)}
body[data-tab="chat"] .game,body[data-tab="game"] .chat{display:none}

.log-wrap{position:relative;display:flex;flex:1 1 0;min-height:5rem}
.log{flex:1;min-width:0;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain;word-break:break-word}
.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a9b5c2;pointer-events:none;text-align:center}
.log:not(:empty)+.empty{display:none}

.msg{padding:.15rem .1rem;line-height:1.4}
.msg .time{margin-right:.5rem;color:#8d9aa8;font-size:.75rem}
.msg .nick{font-weight:bold;color:#d5ac84}
.msg .colon{color:#a9b5c2}
.msg .text{color:#ede6d8;white-space:pre-wrap}
.msg.has-face{display:flex;align-items:flex-start;gap:0 .3rem}
.msg.has-face .time{flex:none;margin-right:.2rem}
.msg .face{flex:none;align-self:flex-start;margin-top:1px;width:20px;height:20px;object-fit:cover;object-position:50% 30%;border-radius:50%;background:#151a22;image-rendering:pixelated;margin-right:.1rem}
.msg.has-face .nick{flex:0 1 auto;max-width:45%;overflow-wrap:anywhere}
.msg.has-face .colon{flex:none;white-space:pre;margin-left:-.25rem}
.msg.has-face .text{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.msg.self .text{color:#fff}
.msg.self{border-left:3px solid #d8832e;padding-left:.4rem;background:rgba(216,131,46,.07)}
.msg.soft .text{font-style:italic;color:#d5c9b4}
.msg.system{color:#a9b5c2;font-style:italic;font-size:.9rem}
.msg.system .text{color:#a9b5c2;white-space:normal}
.msg.record{font-style:normal}
.msg.record .text{color:#e8b48c;font-weight:bold}
.msg .nick[data-hue="0"]{color:#e8a08c}.msg .nick[data-hue="1"]{color:#e8b48c}.msg .nick[data-hue="2"]{color:#e8c88c}
.msg .nick[data-hue="3"]{color:#d5d98c}.msg .nick[data-hue="4"]{color:#b4dc8c}.msg .nick[data-hue="5"]{color:#8cdc9e}
.msg .nick[data-hue="6"]{color:#8cdcc4}.msg .nick[data-hue="7"]{color:#8cc8e8}.msg .nick[data-hue="8"]{color:#8caee8}
.msg .nick[data-hue="9"]{color:#a98ce8}.msg .nick[data-hue="10"]{color:#d08ce8}.msg .nick[data-hue="11"]{color:#e88cc4}

/* Composer */
.composer{margin-top:.5rem;padding-top:.5rem;background:#212936;border-top:1px solid #3e4959}
.nick-row{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin-bottom:.4rem;font-size:.85rem;color:#a9b5c2}
.nick-chip{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;padding:.1rem .5rem;color:#e8963f;background:#2d3540;border:1px dashed #d5ac84;border-radius:4px;font-weight:bold;cursor:text}
.nick-chip #nick-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nick-chip .pen{color:#a9b5c2;font-weight:normal}
.nick-chip:hover{border-style:solid}
.nick-input,#message,.admin input{min-width:0;padding:.4rem .6rem;color:#ede6d8;background:#2d3540;border:1px solid #3e4959;border-radius:4px}
.nick-input{width:14rem;max-width:100%;font-weight:bold;color:#e8963f}
.nick-input:focus,#message:focus,.admin input:focus{border-color:#d5ac84;outline:2px solid #d5ac84;outline-offset:0}
.send-row{display:flex;gap:.5rem}
#message{flex:1}
::placeholder{color:#a9b5c2;opacity:1}
/* Name phase: the field asks for the name, the "you write as" row is not there yet */
.composer[data-phase="name"] .nick-row{display:none}
/* Pause after a 1014: input locked, the button counts down */
#message[readonly]{color:#a9b5c2;cursor:not-allowed}
#send:disabled{min-width:9.5rem;color:#ede6d8;background:#2d3540;border:1px solid #d8832e;cursor:not-allowed;white-space:nowrap}
.hint{min-height:1.5em;margin-top:.3rem;color:#e8b48c;font-size:.85rem}

/* Game panel: list of games, stage, result line, high scores. No scrollbar inside the panel (CONTRACT.md §23a): the list
   of games lets the panel grow with the cards (the page scrolls), the high score overlay trims its rows to the room. */
.game,.game>.panel{overflow:hidden}
.game-body{display:flex;flex:1 1 auto;flex-direction:column;gap:.75rem;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px .15rem 0 4px}
.game-note{color:#e8b48c;font-size:.9rem}
.game-lead{color:#a9b5c2;font-size:.9rem}
.game-picker{display:flex;flex-direction:column;gap:.55rem}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(11.5rem,calc((100% - 2.2rem) / 3)),1fr));gap:1.1rem;padding:.9rem 1rem 1.1rem}
.game-card{position:relative;display:flex;box-sizing:border-box;flex-direction:column;align-items:center;gap:.35rem;padding:.5rem .6rem .65rem;color:#ede6d8;text-align:center;background:#2d3540;border:2px solid #3e4959;border-radius:4px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.game-card:hover,.game-card:focus-within{z-index:5;border-color:#d5ac84;transform:scale(1.12);box-shadow:0 0 0 2px rgba(0,0,0,.55),0 16px 38px rgba(0,0,0,.9),0 5px 12px rgba(0,0,0,.7)}
.game-card-art{display:flex;align-items:center;justify-content:center;width:100%;height:5.4rem;background:#1a2029}
.game-card-logo{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.game-card-title{display:flex;align-items:center;justify-content:center;min-height:2.8rem;font:normal 1.2rem/1.2 "New Rocker",Georgia,"Times New Roman",serif;letter-spacing:.03em;color:#ede6d8;text-shadow:0 0 2px #000}
.game-card-pitch{box-sizing:border-box;width:100%;margin:0;padding:.1rem .1rem .3rem;color:#c4ccd5;font-size:.82rem;line-height:1.35;text-align:center}
.game-card-go{position:relative;z-index:1;flex:none;margin-top:auto;padding:.25rem .8rem;color:#1a1f27;background:#d8832e;border:1px solid #000;border-radius:3px;font-weight:bold;letter-spacing:.04em;cursor:pointer}
.game-card-go:hover,.game-card-go:focus-visible{background:#e8963f}
html[data-motion="off"] .game-card{transition:none}html[data-motion="off"] .game-card:hover,html[data-motion="off"] .game-card:focus-within{transform:none}
@media (prefers-reduced-motion:reduce){.game-card{transition:none}.game-card:hover,.game-card:focus-within{transform:none}}
#panel-game[data-state="pick"] .game-body{overflow:visible}
@media (min-width:900px){
  .layout:has(#panel-game[data-state="pick"]) .panels{height:auto;grid-template-rows:auto}
}
@media (max-width:899px){
  body[data-tab="game"] .layout:has(#panel-game[data-state="pick"]){flex:1 0 auto}
  body[data-tab="game"] .layout:has(#panel-game[data-state="pick"]) :is(.panels,.game){flex:none}
}
.game-play{display:flex;flex:0 0 100%;flex-direction:column;gap:.4rem;min-height:0}
.game-bar{display:flex;flex:none;align-items:center;gap:.4rem}
.game-bar .toggle{flex:none;white-space:nowrap;padding-left:.5rem;padding-right:.5rem}
.game-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal 1.1rem/1.2 "New Rocker",Georgia,"Times New Roman",serif;letter-spacing:.03em;color:#ede6d8;text-align:center}
/* The stage fills its CSS box (all the height and width the panel has); the games scale their pixels to it as a whole
   number and centre them (CONTRACT.md §11). No border inside the box (the frame is a shadow): exactly 200 px high
   is 2x for a 140x100 game field, a taller box gives 3x, 4x, ... */
.game-stage{position:relative;flex:1 1 auto;width:100%;min-height:200px;margin:0 auto;overflow:hidden;background:#1a2029;box-shadow:0 0 0 2px #3e4959,0 0 0 3px #000}
.game-result{flex:none;min-height:1.4em;color:#ede6d8;font-size:.9rem;text-align:center}
.game-result[data-kind="need_name"],.game-result[data-kind="offline"],.game-result[data-kind="limited"],.game-result[data-kind="rejected"],.game-result[data-kind="error"]{color:#e8b48c}
.game-result.record{color:#d8832e;font-weight:bold}
.game-field{position:relative;display:flex;flex:1 1 auto;flex-direction:column;min-height:0}
#panel-game[data-state="play"] .game-body{overflow:hidden}
.boards{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem;overflow:hidden;background:rgba(26,32,41,.97);border:2px solid #d5ac84;box-shadow:0 0 0 1px #000}
.boards-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.boards h3{margin:0;font:normal 1.1rem/1.2 "New Rocker",Georgia,"Times New Roman",serif;letter-spacing:.04em;color:#ede6d8;text-shadow:0 0 2px #000}
.board-modes{display:flex;flex-wrap:wrap;gap:.35rem}
.board-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1rem}
.board-col h4{margin:0 0 .25rem;font-size:.8rem;font-weight:bold;letter-spacing:.08em;text-transform:uppercase;color:#d5ac84}
.board{margin:0;padding:0;list-style:none;font-size:.8rem;line-height:1.25}
.board li.cut{display:none}
.board li{display:flex;align-items:baseline;gap:.5rem;padding:.06rem .3rem;border-left:3px solid transparent}
.board li+li{border-top:1px solid #2d3540}
.board .rk{flex:none;width:1.4em;color:#8d9aa8;text-align:right}
.board .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ede6d8}
.board .pt{flex:none;color:#d5ac84;font-variant-numeric:tabular-nums}
.board li:first-child .rk{color:#d8832e;font-weight:bold}
.board li.mine{border-left-color:#d8832e;background:rgba(216,131,46,.1)}
.board li.mine .nm{font-weight:bold}
.board-note{color:#a9b5c2;font-size:.85rem}
/* "Figur wählen" dialog: dark card, stage-coloured preview boxes, orange for the chosen figure */
html.modal-open body{overflow:hidden}
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:.75rem;background:rgba(10,13,18,.84)}
.modal-card{display:flex;flex-direction:column;width:100%;max-width:46rem;max-height:100%;min-height:0;background:#212936;border:2px solid #3e4959;border-radius:6px;box-shadow:0 0 0 1px #000,0 18px 48px rgba(0,0,0,.75)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .9rem;border-bottom:1px solid #3e4959}
.modal-head h2{font-size:1.3rem;letter-spacing:.04em}
.modal-close{width:2.2rem;height:2.2rem;padding:0;color:#ede6d8;background:#2d3540;border:1px solid #3e4959;border-radius:4px;font-size:1rem;cursor:pointer}
.modal-close:hover{border-color:#d5ac84}
.figure-tabs{display:flex;gap:.25rem;padding:0 .6rem;border-bottom:1px solid #3e4959}
.figure-tabs button{flex:1;padding:.55rem .4rem;color:#a9b5c2;background:transparent;border:0;border-bottom:3px solid transparent;cursor:pointer;font-weight:bold}
.figure-tabs button:hover{color:#ede6d8}
.figure-tabs button[aria-selected="true"]{color:#ede6d8;border-bottom-color:#d8832e}
.figure-grids{flex:1 1 auto;min-height:0;padding:.75rem;overflow-y:auto;overscroll-behavior:contain}
.figure-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.75rem,1fr));gap:.5rem}
.fig{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.4rem .25rem .35rem;color:#ede6d8;background:#2d3540;border:2px solid #3e4959;border-radius:4px;font-size:.8rem;line-height:1.2;cursor:pointer;touch-action:manipulation}
.fig:hover{border-color:#d5ac84}
.fig.chosen{border-color:#d8832e;background:#33302f}
.fig.chosen .fig-label::after{content:" ✔";color:#d8832e}
.fig-canvas{display:block;width:100%;height:88px;image-rendering:pixelated;background:linear-gradient(#2a3340 0,#2a3340 82%,#1a2029 82%,#1a2029 100%);border-radius:2px}
.figure-hair{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.5rem .75rem 0;color:#a9b5c2;font-size:.85rem}
.figure-hair .toggle{padding:.25rem .7rem}
/* Frame 44x46 (CONTRACT.md §24): drawPreview(..., { crop: 'body' }) shows body 24x36 plus 4 rows of headroom, so a 48x80 box
   keeps the figure at 2x; the box is the same height as before the new frame */
.figure-grids[data-frame] .fig-canvas{height:80px}
.fig-label{max-width:100%;overflow-wrap:anywhere;text-align:center}
.modal-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .75rem;padding:.55rem .9rem;border-top:1px solid #3e4959}
.figure-help{color:#a9b5c2;font-size:.8rem}

/* Footer / connection status; the layout switch looks like a link and only matters on wide screens */
.foot-toggle{padding:0;color:#d5ac84;background:none;border:0;font-size:inherit;letter-spacing:inherit;text-decoration:underline;cursor:pointer}
.foot-toggle[aria-pressed="true"]{color:#ede6d8;font-weight:bold}
.foot-toggle:hover{color:#ede6d8}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;font-size:.8rem;color:#a9b5c2;letter-spacing:.03em}
.status{display:inline-flex;align-items:center;gap:.45rem}
.dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#d8832e;box-shadow:0 0 6px #d8832e}
.dot[data-state="connected"]{background:#7fb069;box-shadow:0 0 6px #7fb069}
.dot[data-state="connecting"],.dot[data-state="reconnecting"]{animation:pulse 1.2s ease-in-out infinite}
.dot[data-state="disconnected"],.dot[data-state="refused"]{background:#c75d5d;box-shadow:0 0 6px #c75d5d}
@keyframes pulse{50%{opacity:.35}}

/* Motion off: manual switch (button) and system setting */
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Inside the iframe of the maintenance page the host shows the logo already */
html.embedded .site-header{height:0}
html.embedded .logo{display:none}
html.embedded .site-header .head-tools{z-index:2}
html.embedded .intro{padding-right:6rem}
html.embedded .banner{height:22px;font-size:15px;line-height:22px;background-size:auto 22px,auto 22px,auto 22px;margin-bottom:.2rem}

/* Narrow screens, "Spiel" tab: the game needs the height and the width, so the stage bar keeps only the online counter
   (figure choice and action are one tab away), the heading goes to screen readers only and the panel is slimmer */
@media (max-width:899px){
  body[data-tab="game"] .stage-actions,body[data-tab="game"] .stage-hint{display:none}
  .layout-switch{display:none}
  /* the heading stays for screen readers; the game takes its room and the panel's padding */
  body[data-tab="game"] .intro{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body[data-tab="game"] .game>.panel{padding:.4rem .5rem}
  /* the high score overlay takes the whole game area (bar and result line too), so more rows fit without a scrollbar */
  .game-play{position:relative}
  .game-play>.game-field{position:static}
}

/* Desktop: chat and game side by side, stage underneath */
@media (min-width:900px){
  h1{font-size:1.6rem}
  .intro .lead{display:block}
  .layout{gap:1rem;padding:1.25rem 1rem 1rem}
  .panels{order:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;grid-template-rows:minmax(0,1fr);flex:none;height:max(32rem,calc(100vh - 30.5rem));height:max(32rem,calc(100dvh - 30.5rem))}
  .stage-win{order:3}
  .foot{order:4}
  .tabs,.online-stage{display:none}
  .online-intro,.intro .sep{display:inline}
  body[data-tab] .chat,body[data-tab] .game{display:flex}
  #stage-canvas{height:120px} /* 24×36 figures draw at 2× from 120 px on (below: 1×, smaller than before) */
  .stage-bar{justify-content:flex-end}
  /* The game is the big thing here: the page may be a little taller than the window rather than squeeze it */
  .layout{flex:1 0 auto}
}

@media (max-width:500px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;padding:.8rem .7rem 1rem}.game-card-title{font-size:1.05rem}.game-card-pitch{font-size:.78rem}.game-stage{min-height:150px}.boards{padding:.4rem .5rem}.board{font-size:.8rem}}

/* Layout "unten" (?layout=unten, footer switch): chat on top over the full width, the runner stage below it,
   the game big across the full width underneath. The page scrolls; the stage is at most 75vh high. */
@media (min-width:900px){
  body[data-layout="unten"] .panels{display:contents}
  body[data-layout="unten"] .chat{order:2;flex:none;height:clamp(16rem,34vh,26rem)}
  body[data-layout="unten"] .stage-win{order:3}
  body[data-layout="unten"] .game{order:4;flex:none;--game-h:clamp(22rem,75vh,60rem)}
  body[data-layout="unten"] .foot{order:5}
  body[data-layout="unten"] .game-body{flex:none;overflow:visible}
  body[data-layout="unten"] .game-play{flex:none}
  body[data-layout="unten"] .game-stage{flex:none;height:var(--game-h);max-width:calc(var(--game-h) * 1.8)}
}

/* Tall windows: the runner band gets its old height back */
@media (min-width:900px) and (min-height:1101px){
  .panels{height:max(32rem,calc(100vh - 34.5rem));height:max(32rem,calc(100dvh - 34.5rem))}
  #stage-canvas{height:170px} /* 2× with the full two-line bubble */
}

/* Venue (CONTRACT.md §16): where the page is tall enough (stage.js VENUE_QUERY, html[data-stage]) the stage is a club
   over three floors; its height is --venue-h (one place to change). The panels above give room back (at least 26rem)
   and the page scrolls. Mobile: 300 px under the header. */
html[data-stage="venue"]{--venue-h:300px}
html[data-stage="venue"] #stage-canvas{height:var(--venue-h);background:#1a2029}
@media (min-width:900px){
  html[data-stage="venue"]{--venue-h:clamp(360px,55vh,600px)}
  html[data-stage="venue"] .panels{height:max(26rem,calc(100vh - 30.5rem + 120px - var(--venue-h)));height:max(26rem,calc(100dvh - 30.5rem + 120px - var(--venue-h)))}
}
@media (min-width:900px) and (min-height:1101px){
  html[data-stage="venue"] .panels{height:max(26rem,calc(100vh - 34.5rem + 170px - var(--venue-h)));height:max(26rem,calc(100dvh - 34.5rem + 170px - var(--venue-h)))}
}

/* Low frames (iframe of about 70% of a laptop screen, landscape phones): give the chat the room */
@media (max-height:760px){
  .intro .lead{display:none}
  .layout{gap:.5rem;padding-top:.5rem}
  .panel{padding:.5rem .75rem}
  .banner{height:22px;font-size:15px;line-height:22px;margin-bottom:.2rem;background-size:auto 22px,auto 22px,auto 22px}
}
@media (min-width:900px) and (max-height:760px){
  .panels{height:max(26rem,calc(100vh - 25rem));height:max(26rem,calc(100dvh - 25rem))}
  #stage-canvas{height:96px}
  h1{font-size:1.3rem}
}

/* Privacy page (datenschutz.html) */
.legal-page{display:flex;flex-direction:column;max-width:48rem;min-height:0}
.doc{display:block}
.doc h1{font-size:1.4rem;margin-bottom:.5rem}
.doc h2{display:block;margin:1rem 0 .3rem;font-size:1.05rem}
.doc p,.doc li{color:#ddd;margin-bottom:.4rem}
.doc ul{margin:.25rem 0;padding-left:1.2rem}
.nowrap{white-space:nowrap}
.back{margin-top:1rem}

/* Zoom of the running game: the game container moves into this dialog (zoom.js) */
.zoom-btn{display:inline-flex;align-items:center;justify-content:center;padding:.3rem .5rem}
.zoom-dialog{padding:0;width:95vw;height:90vh;max-width:none;max-height:none;color:#ddd;background:#212936;border:2px solid #3e4959;border-radius:6px;box-shadow:0 0 0 1px #000,0 18px 48px rgba(0,0,0,.75)}
.zoom-dialog[open]{display:flex;flex-direction:column}
.zoom-dialog::backdrop,.wish-dialog::backdrop{background:rgba(10,13,18,.84)}
.zoom-head{display:flex;flex:none;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .75rem;border-bottom:1px solid #3e4959}
.zoom-head .game-title{text-align:left}
.zoom-body>.boards{inset:.5rem}
.zoom-body{position:relative;display:flex;flex:1 1 auto;min-height:0;padding:.5rem}
.zoom-body .game-stage.zoomed{flex:1 1 auto;width:100%;height:100%;max-width:none;min-height:0}

/* Wunschpost dialog (CONTRACT.md §17) */
.wish-dialog{width:min(30rem,94vw);padding:0;color:#ddd;background:#212936;border:2px solid #3e4959;border-radius:6px;box-shadow:0 0 0 1px #000,0 18px 48px rgba(0,0,0,.75)}
.wish-body{display:flex;flex-direction:column;gap:.55rem;padding:.8rem .9rem}
.wish-lead{color:#ede6d8;font-size:1.05rem}
.wish-text{width:100%;min-height:7rem;resize:vertical;padding:.5rem;color:#ede6d8;background:#1a2029;border:1px solid #3e4959;border-radius:4px;font:inherit}
.wish-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.wish-count{color:#a9b5c2;font-size:.85rem}
.wish-count[data-over="true"]{color:#e8b48c;font-weight:bold}
.wish-send{padding:.4rem 1rem;color:#1a1f27;background:#d8832e;border:0;border-radius:4px;font-weight:bold;cursor:pointer}
.wish-send:disabled{opacity:.5;cursor:default}
.wish-status{min-height:1.4em;font-size:.9rem}
.wish-status[data-kind="ok"]{color:#a8d08d}
.wish-status[data-kind="error"]{color:#e8b48c}
@media (max-width:600px){.zoom-dialog{width:100vw;height:100dvh;border-radius:0}}
/* Keine sichtbaren Scrollbalken (Owner-Priorität 2026-10-24: „keine scrollbalken!"): Scrollen per Rad, Touch und Tasten
   bleibt überall möglich, nur der Balken ist weg. Das Einpassen ohne Überlauf im iframe folgt mit CONTRACT §27. */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none}