/* Authors: Christian Reitwiessner */
:root{color-scheme:light;--ink:#243e3c;--muted:#697b73;--paper:#f6f2e8;--card:#fffdf7;--line:#d8dece;--accent:#a24a30;font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0,#dbe6d966,transparent 55%)}header{display:flex;justify-content:space-between;gap:1rem;align-items:center;border-bottom:1px solid var(--line);padding:1.1rem max(5vw,1rem);background:#f9f7ef}header>div{display:flex;align-items:center;gap:.7rem}.wordmark{font-family:Georgia,serif;font-weight:bold;letter-spacing:.14em;font-size:1.15rem}.mark{font-size:1.8rem}.edition{border-left:1px solid var(--line);padding-left:.7rem;font-size:.65rem;letter-spacing:.12em;max-width:6rem;line-height:1.4}#connection{font-size:.75rem;color:var(--muted)}main{max-width:1240px;margin:auto;padding:2.5rem max(3vw,1rem)}.intro{max-width:820px;margin-bottom:2rem}.eyebrow{font-size:.7rem;letter-spacing:.15em;font-weight:700;color:var(--accent);margin:0 0 .6rem}h1{font:clamp(2rem,5vw,3.5rem)/1.12 Georgia,serif;letter-spacing:-.04em;margin:.4rem 0 1rem}h2{font:1.35rem/1.3 Georgia,serif;margin:0 0 .8rem}p{margin:.5rem 0 1rem}#subtitle{color:var(--muted);max-width:64ch}.card,#game-ui{background:#fffdf7;border:1px solid var(--line);border-radius:12px;padding:1.4rem;box-shadow:0 3px 12px #263e3c05}.card{margin-bottom:1.3rem}label{display:block;font-size:.85rem;font-weight:600;margin-bottom:1.2rem}input,textarea,select{display:block;width:100%;margin-top:.4rem;border:1px solid #a8b7ab;border-radius:6px;padding:.75rem;background:white;color:var(--ink);font:inherit;font-weight:400}textarea{resize:vertical}button{font-family:inherit;font-size:.9rem;font-weight:600;line-height:1.4;min-height:46px;border-radius:6px;padding:.7rem 1.1rem;border:1px solid var(--ink);background:var(--ink);color:#fffdf7;cursor:pointer}button:hover{background:#345b53}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #c69a44;outline-offset:3px}.check{display:flex;align-items:center;gap:.6rem}.check input{width:auto;margin:0}.columns{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.turn-bar{border:1px solid #a4b8a5;border-left:5px solid #466e56;border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.4rem;margin-bottom:1.5rem;background:#eaf0e5}.turn-bar p{margin:0}.turn-bar strong{font-size:1.2rem}#deadline{font-size:.83rem;color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:1.7rem}.layout>*{min-width:0}aside ol{padding-left:1.3rem;margin:0}aside li{padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.87rem}aside li:last-child{border:0}.small{font-size:.8rem;color:var(--muted);margin-top:1.1rem}#activity{max-height:28rem;overflow:auto;font-size:.8rem}#activity li{font-size:.8rem}#scene{margin-top:1.3rem;border:1px solid var(--line);border-radius:8px;padding:1rem}summary{cursor:pointer;font-size:.83rem;font-weight:600}#frame{width:100%;height:auto;max-width:640px;image-rendering:pixelated;margin:1rem auto 0;display:block}#error{background:#fff1e7;color:#792d1a;border:1px solid #d9b4a3;border-radius:8px;padding:1rem}#operator{max-width:760px}#join{max-width:760px}#invitations a{display:block;overflow-wrap:anywhere;font-size:.8rem}#invitations>div{padding:1rem 0;border-top:1px solid var(--line)}footer{border-top:1px solid var(--line);margin-top:2rem;padding-top:1rem;font-size:.75rem;color:var(--muted)}footer span{margin-left:.4rem}#game-ui{color:var(--ink);max-width:none}#game-ui .game-ui-actions{gap:.6rem}#game-ui button{background:var(--ink);color:white;border-radius:6px;min-height:46px}#game-ui input{font-size:16px}#game-ui .game-ui-rows{gap:.8rem}#game-ui article{background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink)}#game-ui h3{font-size:1rem}#game-ui p{font-size:.87rem}#game-ui button:disabled{opacity:.4}[hidden]{display:none!important}@media(max-width:760px){main{padding-top:1.5rem}.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}aside .card{padding:1rem}.turn-bar{position:sticky;top:0;z-index:2;padding:.85rem;flex-wrap:wrap}#anchor{width:100%}.card,#game-ui{padding:1rem}.edition{display:none}.columns{gap:.7rem}#game-ui .game-ui-actions{grid-template-columns:1fr 1fr}#game-ui .game-ui-rows{grid-template-columns:1fr}#subtitle{font-size:.9rem}}@media(max-width:420px){aside{grid-template-columns:1fr}.columns{grid-template-columns:1fr;gap:0}header{padding:.8rem 1rem}main{padding-left:.75rem;padding-right:.75rem}#game-ui .game-ui-actions{grid-template-columns:1fr}footer span{display:block;margin:0}}

.policy{margin-top:2rem;font-size:.85rem;max-width:80ch}.policy summary{min-height:44px;padding:.6rem 0}#matches>details{padding:.6rem 0}#matches a{display:block;overflow-wrap:anywhere}

#report{margin-top:1rem}#report pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem}

h1,.turn-bar strong{overflow-wrap:anywhere}

/* Keep the original artwork ahead of optional helper controls. */
.in-match main{padding-top:1rem}.in-match .intro{margin-bottom:.8rem}.in-match .intro .eyebrow,.in-match #subtitle{display:none}.in-match h1{font-size:1.6rem;letter-spacing:0;margin:0}
#scene{padding:0;margin:0 0 .8rem;border:2px solid #263e3c;border-radius:2px;background:#000;overflow:hidden}
#scene-button{display:block;width:100%;min-height:0;padding:0;border:0;border-radius:0;line-height:0;background:#000;touch-action:manipulation}
#scene-button:hover{background:#000}#scene-button:disabled{opacity:1;cursor:default}
#frame{width:100%;height:auto;max-width:none;margin:0;image-rendering:pixelated;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#touch-controls{margin-bottom:1rem}#touch-controls>summary{min-height:44px;padding:.6rem .2rem}#touch-controls #game-ui{box-shadow:none;border-radius:6px;padding:1rem}
.in-match .turn-bar{position:static;margin-bottom:.8rem}
@media(max-width:760px){.in-match main{padding-top:.75rem}.in-match h1{font-size:1.3rem}.in-match header{padding:.5rem .8rem}.in-match .turn-bar{padding:.6rem .75rem;gap:.4rem}.in-match .turn-bar .eyebrow{font-size:.6rem}.in-match .turn-bar strong{font-size:1rem}.in-match #deadline{font-size:.75rem}.in-match #anchor{min-height:44px;padding:.5rem .75rem}}
@media(orientation:landscape) and (max-height:520px){
 body.in-match header,.in-match .intro,.in-match aside,.in-match .policy,.in-match footer{display:none}
 .in-match main{padding:.4rem max(.6rem,env(safe-area-inset-right)) max(.4rem,env(safe-area-inset-bottom)) max(.6rem,env(safe-area-inset-left))}.in-match .turn-bar{padding:.35rem .6rem;gap:.6rem;margin-bottom:.4rem;flex-wrap:nowrap;min-height:44px}
 .in-match .turn-bar>div{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .7rem}.in-match .turn-bar .eyebrow{margin:0}.in-match #anchor{width:auto;flex-shrink:0;min-height:36px;padding:.35rem .6rem;font-size:.75rem}
 .in-match .layout{display:block}.in-match .play{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,30%);gap:.7rem;align-items:start}
 .in-match #scene{margin:0;display:flex;justify-content:center}.in-match #scene-button{width:auto;max-width:100%}.in-match #frame{width:calc((100dvh - 88px - var(--bar-extra,0px))*1.6);max-width:100%;max-height:calc(100dvh - 88px - var(--bar-extra,0px));object-fit:contain}
 .in-match #touch-controls{max-height:calc(100dvh - 88px - var(--bar-extra,0px));overflow:auto;margin:0}.in-match #touch-controls>summary{padding:.4rem .1rem}.in-match #game-ui{padding:.6rem}.in-match #game-ui h2{font-size:1.1rem}
 .in-match #report,.in-match #waiting{grid-column:1/-1}
}

/* Language selection and explicit player/spectator states. */
header{flex-wrap:wrap}.language-picker{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.8rem}.language-picker select{width:auto;margin:0;padding:.4rem;min-height:44px}
#keyboard{margin-bottom:.6rem}
.playing .turn-bar{border-left-color:#24733b;background:#e5f2e4}
.watching .turn-bar{border-left-color:#9b651e;background:#fbefd8}
#watching-notice{border:2px solid #a77832;background:#fff3da;color:#66410c;border-radius:6px;padding:.6rem .8rem;font-weight:600;font-size:.9rem;margin:0 0 .8rem}
.watching #scene{border-color:#a77832}
@media(orientation:landscape) and (max-height:520px){#watching-notice{padding:.25rem .6rem;font-size:.75rem;margin-bottom:.3rem}.watching #frame{width:calc((100dvh - 123px - var(--bar-extra,0px))*1.6);max-height:calc(100dvh - 123px - var(--bar-extra,0px))}}

#audio-settings{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin:.6rem 0}#audio-settings label{margin:0}#audio-settings input[type=range]{width:110px;margin:0;padding:0;min-height:32px}#audio-settings .check input{margin:0}

/* Inputs sit exactly over the game-rendered fields; only the original font is visible. */
#scene{position:relative}#scene-image{position:relative;width:100%;max-width:100%;margin:auto}#scene-input{position:absolute;z-index:2;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;outline:0;box-shadow:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;font-size:16px;opacity:.01}
#scene-input:focus-visible{outline:2px solid #b28d36;outline-offset:1px}
#scene{container-type:inline-size}
#scene-actions{display:flex;justify-content:flex-end;align-items:center;gap:2.5cqw;padding:.625cqw 2.5cqw;background:#263e3c}
#scene-actions button,#scene-actions button:hover{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:white;line-height:0;touch-action:manipulation}
#scene-actions img{display:block;height:5cqw;image-rendering:pixelated;pointer-events:none;filter:invert(1)}
#setup-status{font-size:.8rem;overflow-wrap:anywhere;margin:.4rem 0}
#event-history{margin-top:1rem}#event-list{max-height:18rem;overflow:auto;overflow-anchor:none}#events{list-style:none;padding:0;margin:0}#events li{padding:.2rem 0;border-bottom:1px solid var(--line);font-size:.85rem}#event-roll{width:100%;max-width:640px;height:auto;image-rendering:pixelated}#event-history summary{min-height:44px;padding:.5rem 0}
@media(orientation:landscape) and (max-height:520px){#event-history{grid-column:1/-1}.in-match #scene-input{max-width:none}}

@media(orientation:landscape) and (max-height:520px){.in-match #scene{display:block}.in-match #scene-image{width:fit-content}.in-match #scene.has-actions #frame{width:calc((100dvh - 128px - var(--bar-extra,0px))*1.6);max-height:calc(100dvh - 128px - var(--bar-extra,0px))}.watching #scene.has-actions #frame{width:calc((100dvh - 163px - var(--bar-extra,0px))*1.6);max-height:calc(100dvh - 163px - var(--bar-extra,0px))}}

#handbook{width:min(900px,94vw);max-height:90dvh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:1.2rem;background:var(--card);color:var(--ink)}#handbook::backdrop{background:#102724aa}.handbook-header{position:sticky;top:-1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--card);padding:.8rem 0;z-index:1}.handbook-header h2{margin:0}#handbook input{margin:0 0 1rem}#handbook nav{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:1.5rem}#handbook a{color:var(--ink)}#handbook section{scroll-margin-top:5rem}#handbook p{line-height:1.7}#handbook h3{margin-bottom:.4rem}[data-handbook-open]{flex-shrink:0}@media(orientation:landscape) and (max-height:520px){.turn-bar [data-handbook-open]{min-height:36px;padding:.35rem .6rem;font-size:.75rem}}

#handbook section summary{min-height:44px;display:list-item;padding:.5rem 0}#handbook section summary h3{display:inline;font-size:1rem;margin:0}#handbook section p{padding:.2rem 0 .8rem}.handbook-quick li{margin-bottom:.4rem}#handbook .handbook-quick h3{margin-top:.4rem}#handbook nav{margin-top:.8rem}

/* Reserve space for public-history shortcuts and private/waiting banners. */
@media(orientation:landscape) and (max-height:520px){
 .in-match #frame{width:calc((100dvh - 100px - var(--bar-extra,0px))*1.6);max-height:calc(100dvh - 100px - var(--bar-extra,0px))}
 .in-match #scene.has-actions #frame{width:calc((100dvh - 150px - var(--bar-extra,0px))*1.6);max-height:calc(100dvh - 150px - var(--bar-extra,0px))}
 .watching #frame{width:calc((100dvh - 155px - var(--bar-extra,0px))*1.6);max-height:calc(100dvh - 155px - var(--bar-extra,0px))}
}

#scene-hint{flex:1;color:white;font-size:clamp(12px,3cqw,16px);line-height:1.4;padding:.5em 0;text-align:center}

/* One readable timeline; native touch, wheel and keyboard scrolling. */
#event-list{height:min(60dvh,32rem);max-height:none;min-height:10rem;overflow-y:auto;overflow-x:hidden;touch-action:pan-y pinch-zoom;overscroll-behavior-y:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:6px;padding:.6rem;background:var(--paper)}
#events li{font-size:1rem;line-height:1.65;padding:.55rem .3rem;overflow-wrap:anywhere}
#events-latest{margin-bottom:.7rem}
.watching #event-history{margin-top:0}
@media(orientation:landscape) and (max-height:520px){.watching #event-history{grid-column:1;grid-row:1}.watching #touch-controls{grid-column:2;grid-row:1}.watching #event-list{height:calc(100dvh - 180px - var(--bar-extra,0px));min-height:8rem}}

#events-ornament{display:block;width:100%;height:auto;image-rendering:pixelated;margin:0}
#event-list{padding:0;border:0;border-radius:0;background:#b8b99f}
#events{margin:0;padding:0}#events li{padding:0;border:0;margin:0;line-height:0}#events li img{display:block;width:100%;height:auto;image-rendering:pixelated}#events li:not(:has(img)){line-height:1.65;padding:.5rem}
#events-open{margin-bottom:.7rem}

#scene.map-mode #scene-button{touch-action:pan-y pinch-zoom;cursor:grab}#scene.map-mode #scene-button:active{cursor:grabbing}#map-left,#map-right{font-size:24px;line-height:1;flex-shrink:0}

#event-history{border:0;border-radius:0;padding:0;background:none;box-shadow:none}
#events-actions{display:flex;justify-content:flex-end;align-items:center;gap:1rem;padding:.4rem .8rem;background:#263e3c}
#events-actions button,#events-actions button:hover{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:0;border:0;background:transparent;color:white;border-radius:0}
#event-history{container-type:inline-size}
#events-actions img{display:block;height:5cqw;width:auto;image-rendering:pixelated;filter:invert(1);pointer-events:none}
#events-latest{margin:0}

/* Original in-between screens (elections, Hansetag, disasters) shown over the roll. */
#event-history{position:relative}#intermission{position:absolute;left:0;right:0;top:0;height:var(--intermission-height,100%);display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:0;background:#141414;cursor:pointer;z-index:3}#intermission[hidden]{display:none}#intermission img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none}#events [data-screen]{cursor:pointer}