/* Taverne: Aussehen der öffentlichen App (wie die Schulversion). Wird nach app.css geladen und überschreibt dessen Farben.
   Hintergrund je Bildschirm über body[data-screen] (setzt app.js): Start = Gäste, Spiel = Holztisch, Rest = leere Taverne. */
:root,:root[data-theme]{
  --papier:#f3e6c8; --papier-hell:#fbf4e2; --papier-dunkel:#e6d3ab; --papier-rand:#c9b083;
  --tinte:#2b1b10; --tinte-leise:#6b5038; --holz:#4a2f1c; --kerze:#e9b44c; --kerze-hell:#f6cf7a; --kerze-dunkel:#a8741f;
  /* Werte aus app.css, auf Taverne umgestellt */
  --night:#1b120c; --bg2:#2e1d12; --deep:#e6d3ab; --card:#f3e6c8; --line:#c9b083; --text:#2b1b10; --dim:#6b5038;
  --acc:#a8741f; --acc-ink:#ffffff; --bad:#a3322a; --track:rgba(107,80,56,.25); --btn-edge:#7a5418; --ring:#2b1b10;
  --sun:linear-gradient(#f6cf7a,#e2a73c); --ink:#3b2410;
  --disp:"Lora",Georgia,serif;
  color-scheme:light;
}
html,body{background-color:#1b120c}
body{--shade:linear-gradient(rgba(27,18,12,.45),rgba(27,18,12,.62));background:var(--shade),url(media/taverne/leer.webp) center/cover fixed #1b120c;color:var(--text)}
body[data-screen=welcome],body[data-screen=home],body[data-screen=login],body[data-screen=code]{
  --shade:radial-gradient(ellipse at 50% 30%,rgba(27,18,12,.1),rgba(27,18,12,.7) 85%);background:var(--shade),url(media/taverne/gaeste.webp) 50% 30%/cover fixed #1b120c}
body[data-screen=practice],body[data-screen=run],body[data-screen=tutorial],body[data-screen=count]{
  background:linear-gradient(rgba(18,9,3,.15),rgba(18,9,3,.45)),url(media/tisch-holz.jpg) center top/100% auto repeat-y #3a2414}
@media (max-width:820px){
  body{background:var(--shade),url(media/taverne/leer-klein.webp) center/cover #1b120c}
  body[data-screen=welcome],body[data-screen=home],body[data-screen=login],body[data-screen=code]{background:var(--shade),url(media/taverne/gaeste-klein.webp) 50% 30%/cover #1b120c}
  body[data-screen=practice],body[data-screen=run],body[data-screen=tutorial],body[data-screen=count]{background:linear-gradient(rgba(18,9,3,.15),rgba(18,9,3,.45)),url(media/tisch-holz.jpg) center top/100% auto repeat-y #3a2414}
}
h1,h2,h3{font-family:var(--disp);font-weight:700}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Text direkt auf dem Bild hell mit Schatten */
.sub,.top h2,.hudmid,.timer,.foot,.foot .link,.screen>.hint,.combo,.formula,.count b,.screen>.link,.center>.link{color:#fbf3e4;text-shadow:0 2px 6px rgba(0,0,0,.85)}
.formula.good{color:#b8f5a0}.formula.bad{color:#ffb3a8}
.foot .link,.center>.link{color:var(--kerze-hell)}

/* Schild statt der drei Plättchen */
.sign{display:block;width:min(300px,78vw);height:auto;margin:6px auto 4px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.hello{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 12px}
.hello .sub{margin:0;font-size:1.15rem;font-weight:700}
.figimg{border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--kerze),0 4px 10px rgba(0,0,0,.5)}
.figimg.me{width:52px;height:52px}

/* Pergament-Karten */
.card,.levelcard,.stat,.bd,details.grp,.newbadge,.sheet>div,.sheet>.quote{background:var(--papier);color:var(--tinte);box-shadow:0 0 0 1px var(--papier-rand),0 10px 24px rgba(0,0,0,.4);
  background-image:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.45),transparent 60%),radial-gradient(ellipse at 100% 100%,rgba(201,176,131,.45),transparent 55%)}
.code{background:#fffaf0;border:1px dashed var(--papier-rand);color:var(--tinte);font-family:ui-monospace,monospace;font-weight:700}
input.in{background:#fffaf0;color:var(--tinte);border-color:var(--papier-rand)}
input.in:focus{border-color:var(--kerze);outline:3px solid rgba(233,180,76,.45)}
.link{color:#8a4b12}
.chip{background:var(--papier);color:var(--tinte);box-shadow:0 0 0 1px var(--papier-rand),0 4px 10px rgba(0,0,0,.35)}
.chip b{color:#8a4b12}
.bar{background:rgba(0,0,0,.35)}.bar>i{background:linear-gradient(90deg,#f6cf7a,#e2a73c)}

/* Knöpfe: Gold = Hauptknopf, Pergament mit Goldrand = Menü, Holz = Nebenknopf */
.btn{background:linear-gradient(#f6cf7a,#e2a73c);color:#3b2410;box-shadow:0 4px 0 #a8741f,0 8px 16px rgba(0,0,0,.3)}
.btn:active{box-shadow:0 1px 0 #a8741f}
.btn.mint,.btn.coral,.btn.sky{background:var(--papier);color:var(--tinte);box-shadow:0 4px 0 #7a5418,inset 0 0 0 2px var(--kerze-dunkel),0 8px 16px rgba(0,0,0,.3)}
.btn.ghost{background:linear-gradient(#5a3a22,#3d2716);color:var(--papier);box-shadow:0 4px 0 #1f130a,0 8px 16px rgba(0,0,0,.3)}
.card .btn.ghost,.sheet .btn.ghost{background:var(--papier-hell);color:var(--tinte);box-shadow:0 3px 0 var(--papier-rand),inset 0 0 0 2px var(--papier-rand)}
.btn.danger,.btn.ghost.danger{color:#a3322a;background:var(--papier-hell);box-shadow:0 3px 0 var(--papier-rand),inset 0 0 0 2px #a3322a}
.back{background:linear-gradient(#5a3a22,#3d2716);color:var(--papier);box-shadow:0 3px 0 #1f130a}
.tabs{background:rgba(36,23,13,.8)}
.tabs button{color:#e8d6af}
.tabs button.on{background:linear-gradient(#f6cf7a,#e2a73c);color:#3b2410}
.card .tabs,.sheet .tabs{background:var(--papier-dunkel)}.card .tabs button{color:var(--tinte-leise)}
.switch{border-color:var(--papier-rand)}
.switch button{background:rgba(107,80,56,.3)}.switch button::after{background:#fff}.switch button.on{background:var(--los,#5d8c3c)}
.lrow{border-color:var(--papier-rand)}
.lrow.r1 .rk,.lrow.r2 .rk,.lrow.r3 .rk{color:#a8741f}
.lrow.me{background:rgba(233,180,76,.25)}
.levelcard h3{color:#8a4b12}
.medal{background:linear-gradient(#f6cf7a,#e2a73c);color:#3b2410}
.big{color:#f6cf7a;text-shadow:0 3px 8px rgba(0,0,0,.8)}
.ribbon{background:linear-gradient(#f6cf7a,#e2a73c);color:#3b2410}
.dots i{background:rgba(0,0,0,.35)}.dots i.on{background:#f6cf7a}.dots i.now{background:#fbf3e4}
.ghost .gl{color:#fbf3e4;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.gb{background:rgba(0,0,0,.35)}.gb i{background:#f6cf7a}.gb.best i{background:#c9b083}
.goal{border-color:var(--papier-rand)}.goal.done .tick{background:#5d8c3c;border-color:#5d8c3c;color:#fff}
.toast{background:#2b1b10;color:#f6cf7a;border:1px solid #8a6a45}
.cal i{background:rgba(107,80,56,.2)}.cal i.l1{background:rgba(233,180,76,.35)}.cal i.l2{background:rgba(233,180,76,.7)}.cal i.l3{background:#e2a73c}

/* Figuren-Auswahl */
.figrow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:4px}
.figbtn{display:grid;justify-items:center;gap:2px;padding:6px 2px;border-radius:12px;background:var(--papier-hell);box-shadow:inset 0 0 0 1px var(--papier-rand)}
.figbtn .figimg{width:52px;height:52px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.figbtn b{font-size:.85rem}.figbtn small{font-size:.65rem;color:var(--tinte-leise)}
.figbtn.on{background:#fff3d0;box-shadow:inset 0 0 0 3px var(--kerze)}
.figbtn.on .figimg{box-shadow:0 0 0 3px var(--kerze)}
.figset{padding:6px 0 12px;border-bottom:1px solid var(--papier-rand)}
.figset>span{font-weight:700}

/* Zielzahl auf dem Holzschild */
.plank{position:relative;width:210px;height:100px;margin:4px auto 0;padding-top:13px;display:grid;justify-items:center;align-content:center;color:#160700;
  background:url(media/schild.svg) center/100% 100% no-repeat;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.plank small{font:700 .72rem var(--ui);letter-spacing:.12em;text-transform:uppercase;line-height:1}
.plank .target{width:auto;height:auto;margin:0;border-radius:0;background:none;box-shadow:none;color:#160700;font:700 2.7rem/1 var(--ui);text-shadow:0 1px 0 rgba(255,236,200,.5)}
@media (max-height:830px){.plank{width:180px;height:86px}.plank .target{font-size:2.3rem;width:auto;height:auto}}

/* Spielfeld im Holzkasten (Bild: leere Steine im Kasten, Ziffern eingraviert). --gw = Breite des Ziffernfelds */
.boardbox{--gw:min(80vw,calc(100dvh - 370px),430px);padding:calc(var(--gw) * .1) 0;display:flex;justify-content:center}
.boardbox .gridwrap{width:var(--gw);min-width:0;margin:0;isolation:isolate}
.boardbox .gridwrap::before{content:"";position:absolute;inset:-9.5%;z-index:-1;background:url(media/tisch-brett.webp) center/100% 100% no-repeat;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.boardbox .grid{gap:0}
.boardbox .cell{background:none;box-shadow:none;transform:none;color:#2b1a0e;font-family:Georgia,'Noto Serif','DejaVu Serif',serif;font-size:calc(var(--gw) / 7 * .5);
  text-shadow:0 1px 0 rgba(255,240,215,.55),0 -1px 0 rgba(60,30,10,.35)}
.boardbox .cell::before{content:"";position:absolute;inset:6.7%;border-radius:50%;pointer-events:none;transition:box-shadow .1s,background .1s}
.boardbox .cell.sel{background:none;transform:none;color:#2b1a0e;box-shadow:none}
.boardbox .cell.sel::before{background:rgba(246,207,122,.3);box-shadow:0 0 0 3px #e9b44c,0 0 16px 5px rgba(233,180,76,.55)}
.boardbox .cell.first::after{top:12%;background:#2b1a0e}
/* richtig: 1 s grün blinken, falsch: rot und wackeln */
.boardbox .cell.ok{animation:none;background:none;color:#2b1a0e}
.boardbox .cell.ok::before{animation:okglow 1s ease-in-out}
@keyframes okglow{0%,33%,66%,100%{background:transparent;box-shadow:none}16%,50%,83%{background:rgba(74,222,128,.35);box-shadow:0 0 0 4px #4ade80,0 0 20px 7px rgba(74,222,128,.6)}}
.boardbox .cell.no{animation:shake .45s 2;box-shadow:none}
.boardbox .cell.no::before{background:rgba(192,57,43,.3);box-shadow:0 0 0 3px #c0392b,0 0 14px 4px rgba(192,57,43,.55)}
.boardbox .tipbox{border-color:#fbe9c8;border-width:3px}
.boardbox .trail polyline{stroke:#fff6dc}
@media (prefers-reduced-motion:reduce){.boardbox .cell.ok::before{animation:none;box-shadow:0 0 0 4px #4ade80}}
@media (max-height:830px){.boardbox{--gw:min(80vw,calc(100dvh - 400px),430px)}}

/* Querformat am Handy: Schild links, Brett rechts so hoch wie möglich */
@media (orientation:landscape) and (max-height:559px){
  #app{max-width:none}
  .screen[data-screen=practice],.screen[data-screen=run],.screen[data-screen=tutorial]{display:grid;grid-template-columns:minmax(220px,1fr) auto;grid-auto-rows:min-content;column-gap:24px;align-content:center;padding:6px 16px}
  .screen[data-screen=practice]>*,.screen[data-screen=run]>*,.screen[data-screen=tutorial]>*{grid-column:1}
  .screen .boardbox{grid-column:2;grid-row:1 / span 20;--gw:calc((100dvh - 12px) / 1.2)}
  .screen[data-screen=practice]>div:has(> .boardbox){grid-column:2;grid-row:1 / span 20}
}
/* Hinweise und Zwischenüberschriften direkt auf dem Bild hell, in Karten dunkel */
.hint,h3.sec,.screen>p,.screen>.dim{color:#efe0c0;text-shadow:0 2px 5px rgba(0,0,0,.85)}
.card .hint,.card p,.sheet .hint,.sheet p,.levelcard .hint,details.grp .hint,.card .dim,.sheet .dim{color:var(--tinte-leise);text-shadow:none}
.card p,.sheet p{color:var(--tinte)}
.cal{background:rgba(36,23,13,.75);padding:8px;border-radius:12px}
.cal i.today{outline-color:#f6cf7a}
.screen p.dim:not(.card p):not(.sheet p){color:#efe0c0;text-shadow:0 2px 5px rgba(0,0,0,.85)}