/* Schrift lokal statt von Google Fonts (Datenschutz). Fehlt die Datei, greift die Ersatzschrift. */
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: local('Patrick Hand'), local('PatrickHand-Regular'), url('../fonts/PatrickHand-Regular.woff2?v=2fed351466') format('woff2'); }
:root { --paper: #f7f2e4; --ink: #1d1a17; --yellow: #f2d33b; --red: #c0392b; --green: #4f8a3b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #b9b29c; font-family: 'Patrick Hand', 'Comic Sans MS', cursive; color: var(--ink); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
.sk { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 18px 6px 16px 7px / 7px 16px 6px 18px; box-shadow: 3px 4px 0 rgba(0, 0, 0, .22); }
button { font-family: inherit; font-size: 18px; line-height: 1.1; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px 4px 10px 5px / 5px 10px 4px 12px; padding: 4px 12px; cursor: pointer; }
button:hover { background: #fff6cf; }
button:disabled { cursor: default; }
button.off { opacity: .55; }
button.big { font-size: 24px; padding: 6px 22px; background: var(--yellow); }
button.big:hover { background: #ffe36b; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; padding: 12px; background: rgba(60, 45, 25, .28); }
#title.overlay { background: rgba(60, 45, 25, .12); }
.panel { padding: 14px 24px 16px; max-width: min(720px, 96vw); max-height: 96vh; overflow: auto; text-align: center; position: relative; }
.panel.wide { width: min(980px, 96vw); max-width: none; }
h1 { font-size: clamp(44px, 9vw, 76px); margin: 0; line-height: 1; letter-spacing: 1px; color: #b23a2e; text-shadow: 2px 2px 0 #f2d33b; }
h2 { font-size: 34px; margin: 2px 0 8px; }
h3 { font-size: 21px; margin: 10px 0 4px; }
.sub { font-size: 21px; margin: 4px 0 10px; }
.tip { font-size: 16px; margin: 8px 0 0; opacity: .75; display: none; }
.touch .tip { display: block; }
.tiny { font-size: 13px; opacity: .7; margin: 8px 0 0; }
.sitelinks { font-size: 15px; margin: 10px 0 0; }
.sitelinks a { color: var(--ink); margin: 0 6px; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.btns.center { justify-content: center; }
.btns.col { flex-direction: column; align-items: stretch; min-width: 240px; }
#loadtxt { font-size: 20px; margin: 10px; }
.close { position: absolute; right: 10px; top: 8px; }

#cast, #resCast { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.card { display: flex; flex-direction: column; align-items: center; width: 112px; }
.card img { height: 84px; width: auto; max-width: 110px; object-fit: contain; }
.card b { font-size: 18px; }
.card small { font-size: 14px; opacity: .8; }

#lvGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 8px 0; }
.lvcard { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px; font-size: 18px; }
.lvcard .thumb { width: 100%; height: auto; border: 1.5px solid var(--ink); border-radius: 4px; image-rendering: pixelated; }
.lvcard.locked { opacity: .5; }
.lvcard.locked .thumb { filter: grayscale(1); }
.lvcard.done { background: #eef4d8; }
.lvcard small { font-size: 14px; opacity: .85; }
.chicks img, #resChicks img { height: 26px; width: auto; vertical-align: middle; }
img.miss { opacity: .22; filter: grayscale(1); }
#lvTotal { font-size: 18px; margin: 4px 0; }
.score { font-size: 28px; margin: 6px 0; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; font-size: 17px; }
.cols ul { padding-left: 20px; margin: 4px 0; }
.cols li { margin: 2px 0; }
@media (max-width: 640px) { .cols { grid-template-columns: 1fr; } }

#hudBtns { position: fixed; top: 6px; right: 8px; display: flex; gap: 6px; z-index: 10; }
#hudBtns button { font-size: 20px; padding: 3px 8px; background: rgba(247, 242, 228, .9); }

/* Touch-Steuerung */
#touch { position: fixed; inset: auto 0 0 0; height: 0; z-index: 9; pointer-events: none; }
#tPad, #tBtns { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 14px; pointer-events: auto; touch-action: none; }
#tPad { left: max(14px, env(safe-area-inset-left)); }
#tBtns { right: max(14px, env(safe-area-inset-right)); }
#tPad div, #tBtns div { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; color: var(--ink); background: rgba(247, 242, 228, .55); border: 2.5px solid rgba(29, 26, 23, .7); }
#tBtns #tA { width: 84px; height: 84px; background: rgba(242, 211, 59, .6); margin-top: -18px; }
#tPad div.on, #tBtns div.on { background: rgba(242, 211, 59, .9); }
body:not(.touch) #touch { display: none; }