/* Map der Mythen v2 – mobile first. --ts = Textgrösse aus der Lesehilfe (0.9 / 1 / 1.2 / 1.45) */
:root{
  --ts:1; --ink:#2e2014; --wood:#6b4a2a; --gold:#f0d078; --leaf:#4a8f3c; --hud:rgba(24,20,46,.78);
  --ff-read:Verdana,"Trebuchet MS",Tahoma,system-ui,sans-serif; --ff-head:Georgia,"Times New Roman",serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;height:100dvh;overflow:hidden;background:#2e4a2a;color:var(--ink);font-family:var(--ff-read);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
body.caps .readable,body.caps .page h1,body.caps .page h2,body.caps .page h3,body.caps .btn,body.caps .tip,body.caps #zone-label,body.caps #quiz-opts button,body.caps .slot .an,body.caps .char-card .nm{text-transform:uppercase;letter-spacing:.03em}
svg{width:1.2em;height:1.2em;flex:none}
.hidden{display:none !important}
#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#version{position:fixed;z-index:3;right:calc(6px + var(--sar));bottom:calc(3px + var(--sab));font:11px var(--ff-read);color:rgba(255,255,255,.55);pointer-events:none}

/* Joystick */
#stick{position:fixed;z-index:9;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;pointer-events:none;
  border:3px solid rgba(240,208,120,.8);background:rgba(24,20,46,.25);opacity:0;transition:opacity .15s}
#stick.on{opacity:1}
#stick div{position:absolute;left:34px;top:34px;width:60px;height:60px;border-radius:50%;background:var(--gold);border:3px solid #5a3a10;box-shadow:0 3px 0 #5a3a10}

/* HUD (LolZ-Stil: dunkles Violett + Gold, Knöpfe aus dem Game-UI-Pack) */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;display:none}
body.playing #hud,body.playing #corner{display:flex}
#hud-left{position:absolute;top:calc(10px + var(--sat));left:calc(10px + var(--sal));display:flex;gap:8px;align-items:center}
.hud-btn{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:52px;height:52px;padding:0 10px;
  font:700 19px var(--ff-read);color:#fff8e0;cursor:pointer;background:none;border:0;
  border-image:url(assets/ui/button-normal.png) 18 fill round;border-style:solid;border-width:10px;text-shadow:0 2px 0 #3a2410}
.hud-btn:hover,.hud-btn:focus-visible{border-image-source:url(assets/ui/button-hover.png)}
.hud-btn:active{border-image-source:url(assets/ui/button-pressed.png);transform:translateY(2px)}
.hud-btn svg{width:26px;height:26px;color:var(--gold)}
.hud-btn.wide svg{color:#fdf6e8}
.hud-pill{display:inline-flex;align-items:center;gap:5px;height:42px;padding:0 12px;border-radius:999px;background:var(--hud);border:2px solid var(--gold);
  color:#fff8e0;font:700 18px var(--ff-read)}
.hud-pill svg{width:24px;height:24px;color:#ffd93d}
#corner{position:fixed;z-index:15;top:calc(10px + var(--sat));right:calc(10px + var(--sar));display:none;gap:6px}
#zone-label{position:absolute;left:50%;top:calc(72px + var(--sat));transform:translateX(-50%);white-space:nowrap;
  font:700 calc(17px * var(--ts)) var(--ff-head);color:#fff8e0;background:var(--hud);border:2px solid var(--gold);padding:5px 16px;border-radius:999px;
  opacity:0;transition:opacity .6s}
#zone-label.show{opacity:1}
#minimap{position:absolute;right:calc(10px + var(--sar));bottom:calc(10px + var(--sab));width:clamp(120px,24vw,190px);height:auto;aspect-ratio:190/140;
  border:3px solid var(--gold);border-radius:12px;background:#1e2a16;box-shadow:0 3px 10px rgba(0,0,0,.35)}
body.nomap #minimap{display:none}
.tip{position:fixed;z-index:14;left:50%;top:calc(50% + 100px);transform:translateX(-50%);width:max-content;max-width:min(92vw,620px);
  font:700 calc(19px * var(--ts)) / 1.45 var(--ff-read);text-align:center;color:#fff8e0;background:var(--hud);border:3px solid var(--gold);
  padding:12px 20px;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.3);opacity:0;transition:opacity .4s;pointer-events:none}
.tip.show{opacity:1}

/* Seiten (Papier-9-Slice, eigenes Asset) */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal));background:rgba(20,30,14,.55)}
.page{width:100%;max-width:640px;max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;text-align:center;
  border-image:url(assets/ui/paper-9slice.png) 32 fill round;border-style:solid;border-width:22px;padding:8px 10px 6px;user-select:text;-webkit-user-select:text}
.wide-page{max-width:860px}
.page h1{font:700 clamp(38px,10vw,58px)/1.05 var(--ff-head);color:#5a3a1a;margin:4px 0 8px}
.page h2{font:700 calc(clamp(24px,6.5vw,32px) * var(--ts))/1.15 var(--ff-head);color:#5a3a1a;margin:4px 0 8px}
.page h3{font:700 calc(18px * var(--ts)) var(--ff-head);color:#5a3a1a;margin:6px 0}
.readable{font-size:calc(18px * var(--ts));line-height:1.6;color:var(--ink);margin:8px 0}
.lead{font-size:calc(19px * var(--ts))}
.small{font-size:calc(14px * var(--ts));line-height:1.45;color:#6b5236;margin:6px 0}
.key-only{display:none}
@media (hover:hover) and (pointer:fine){.key-only{display:block}.touch-only{display:none}}

.btn{display:block;width:min(100%,340px);margin:12px auto 0;min-height:56px;padding:6px 18px;cursor:pointer;
  font:700 calc(20px * var(--ts)) var(--ff-read);color:#3f2a08;background:#f0c050;border:0;border-radius:16px;box-shadow:0 5px 0 #b07f24}
.btn.big{min-height:66px;font-size:calc(23px * var(--ts))}
.btn.soft{background:#b9d3a6;box-shadow:0 5px 0 #74936a;color:#243618}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #b07f24}
.btn:focus-visible,.hud-btn:focus-visible,.char-card:focus-visible{outline:4px solid #3a7bd5;outline-offset:3px}
.char-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:10px 0 4px}
.char-card{background:#fff;border:3px solid #d8c8a8;border-radius:16px;padding:8px 4px 10px;cursor:pointer;font:inherit;color:inherit;min-height:120px}
.char-card:hover{border-color:#e0a339}
.char-card canvas{width:72px;height:72px}
.char-card .nm{font:700 calc(17px * var(--ts)) var(--ff-head);color:#5a3a1a}
.char-card .mv{font-size:calc(13px * var(--ts));color:#6b5236}

/* Buchseite */
#pop-portrait{width:150px;height:150px;display:block;margin:0 auto}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:calc(15px * var(--ts));background:#efe3c8;border:2px solid #d8c090;color:#5a3a1a;border-radius:999px;padding:4px 14px}
#pop-facts{text-align:left;margin:10px 0 0}
.fact{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid #e5d8bc;border-radius:14px;padding:10px 12px;margin:8px 0;animation:pagein .35s ease}
.fact p{flex:1;font-size:calc(19px * var(--ts));line-height:1.65;margin:0}
.fact.hl{border-color:#e0a339;box-shadow:0 0 0 3px rgba(224,163,57,.35)}
.w.now{background:#ffe27a;border-radius:4px;box-shadow:0 0 0 2px #ffe27a}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.speak-btn{flex:none;width:48px;height:48px;border-radius:50%;border:2px solid #b07f24;background:#fff3c4;color:#5a3a10;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.speak-btn svg{width:26px;height:26px}
.speak-btn.on{background:#f0c050}
body.nospeech .speak-btn,body.nospeech .speech-only{display:none !important}
#quiz{margin-top:10px;background:#fff8e0;border:2px dashed #e0a339;border-radius:14px;padding:8px 12px}
.gap{display:inline-block;min-width:4.5em;border-bottom:3px solid #b07f24}
#quiz-opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
#quiz-opts button{min-height:52px;min-width:30%;flex:1 1 auto;padding:6px 14px;font:700 calc(18px * var(--ts)) var(--ff-read);border-radius:14px;
  border:3px solid #d8c090;background:#fff;color:var(--ink);cursor:pointer}
#quiz-opts button.right{background:#c9eab0;border-color:#4a8f3c}
#quiz-opts button.wrong{animation:shake .35s;background:#f6e0d0}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.solved{color:#4a8f3c;font-weight:700}

/* Album */
#album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px;margin:10px 0 4px}
.slot{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:2px solid #e0d2b2;border-radius:14px;padding:6px 2px;min-height:128px;font:inherit;color:inherit;position:relative}
.slot canvas{width:72px;height:72px}
.slot .an{font-size:calc(13px * var(--ts));line-height:1.2;color:#5a3a1a}
.slot .dots{font-size:12px;letter-spacing:2px;color:#e0a339}
.slot .st{position:absolute;right:4px;top:4px;width:24px;height:24px;color:#ffd93d}
.slot.locked{opacity:.55}
.slot.locked .q{font:700 44px/72px var(--ff-head);color:#c9b890}
.slot.known{cursor:pointer}
.slot.known:hover{border-color:#e0a339}

/* Bewohner-Sprechblase */
#talk{position:fixed;z-index:12;left:50%;transform:translate(-50%,20px);bottom:calc(12px + var(--sab));width:min(94vw,640px);max-height:40vh;
  display:flex;gap:10px;align-items:center;text-align:left;padding:4px 6px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
#talk.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#talk-face{width:56px;height:56px;flex:none}
#talk p{flex:1;margin:0}
body.minimap-on #talk{bottom:calc(12px + var(--sab))}
@media (max-width:700px){ body.playing:not(.nomap) #talk{bottom:calc(min(24vw,190px) * 140 / 190 + 26px + var(--sab))} }

/* Einstellungen */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0;font:700 calc(17px * var(--ts)) var(--ff-read)}
.seg{display:inline-flex;border:2px solid #b07f24;border-radius:999px;overflow:hidden}
.seg button{min-height:48px;min-width:48px;padding:0 12px;border:0;background:#fff;color:var(--ink);font:700 16px var(--ff-read);cursor:pointer}
.seg button+button{border-left:2px solid #e0c890}
.seg button.on{background:#f0c050}
#set-size button:nth-child(1){font-size:14px}#set-size button:nth-child(2){font-size:17px}#set-size button:nth-child(3){font-size:21px}#set-size button:nth-child(4){font-size:26px}
.toggle{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:999px;border:2px solid #b07f24;background:#fff;font:700 16px var(--ff-read);cursor:pointer;color:var(--ink)}
.toggle .dot{width:20px;height:20px;border-radius:50%;border:3px solid #b07f24}
.toggle[aria-pressed=true]{background:#f0c050}.toggle[aria-pressed=true] .dot{background:#5a3a10}

@media (max-width:420px){ .hud-btn{min-width:46px;height:46px;padding:0 6px} .hud-btn svg{width:22px;height:22px} #corner{gap:3px} #zone-label{top:calc(64px + var(--sat))} }
@media (max-width:560px){ #fs-btn,#mute-btn{display:none !important} }
@media (orientation:landscape) and (max-height:500px){ .page{border-width:16px} .page h1{font-size:36px} #pop-portrait{width:100px;height:100px} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }