
:root{
  --night:#090604;
  --wood:#4b250f;
  --wood-dark:#1c0d07;
  --gold:#d79a4b;
  --cream:#f1dfba;
  --glass:rgba(18,10,6,.94);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--night);color:var(--cream);font-family:Georgia,"Times New Roman",serif}
button,input{font:inherit}
a{color:inherit}
body{transition:opacity .65s ease}
body.leaving{opacity:0}

.image-page{display:flex;justify-content:center;min-height:100vh;overflow-x:hidden}
.portrait-stage{position:relative;width:min(100vw,768px);line-height:0;background:#070503}
.portrait-stage>img{display:block;width:100%;height:auto;min-height:100vh;object-fit:contain;object-position:top center}
.hotspot{position:absolute;border:0;background:transparent;cursor:pointer}
.hotspot:focus-visible,.scene-button:focus-visible{outline:3px solid #ffd17b;outline-offset:2px}
.entrance-hotspot{left:31%;width:38%;bottom:1.3%;height:7.5%;border-radius:999px}

.map-stage>img{min-height:auto}
.tavern-hotspot{left:51%;top:47%;width:31%;height:22%;border-radius:24px}
.langhaus{left:12%;top:10%;width:30%;height:25%}
.akademie{left:60%;top:8%;width:31%;height:28%}
.markt{left:9%;top:42%;width:34%;height:22%}
.bewohner{left:8%;top:66%;width:34%;height:22%}
.feuer{left:35%;top:68%;width:32%;height:25%}
.pinnwand{left:66%;top:68%;width:28%;height:22%}
.notice{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;z-index:20;width:max-content;max-width:88vw;padding:12px 18px;border:1px solid var(--gold);border-radius:12px;background:#170d08eF;transition:.25s}
.notice.show{opacity:1;transform:translate(-50%,0)}

.stone-page{display:grid;place-items:center;padding:22px;min-height:100vh;background:radial-gradient(circle,#6b3317 0,#251007 48%,#080403 88%)}
.stone{width:min(720px,100%);padding:7px;border-radius:45px;background:linear-gradient(130deg,#b9682d,#4d210e,#c17638);box-shadow:0 24px 80px #000,inset 0 0 20px #000}
.stone-inner{text-align:center;padding:clamp(35px,8vw,72px) clamp(22px,6vw,55px);border-radius:39px;background:radial-gradient(circle at 50% 30%,#7d3a18,#361508 70%);box-shadow:inset 0 0 50px #160804}
.stone h1{font-size:clamp(2.2rem,9vw,5.2rem);letter-spacing:.04em;text-transform:uppercase;margin:0 0 38px}
.stone p{font-size:clamp(1.15rem,4.7vw,2rem);line-height:1.48}
.stone nav{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:36px}
.stone-button,.simple-header a,.new-table button,.chat-form button,.table-card button,.table-card a{
  text-decoration:none;color:var(--cream);border:1px solid var(--gold);border-radius:12px;padding:12px 20px;
  background:linear-gradient(#6b3618,#301407);box-shadow:inset 0 0 12px #180904;cursor:pointer
}
.stone-button.quiet{filter:grayscale(.45)}
.small-stone{max-width:600px}

.tavern-page{min-height:100vh;overflow:hidden;background:#080503}
.tavern-stage{position:relative;width:100vw;height:100vh;overflow:hidden}
.tavern-stage>img{width:100%;height:100%;object-fit:cover;object-position:center}
.scene-button{
  position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid #d89b4f;border-radius:12px;
  background:rgba(31,14,7,.78);color:var(--cream);text-decoration:none;box-shadow:0 8px 25px #000b;
  backdrop-filter:blur(3px);cursor:pointer;min-height:44px;padding:8px 14px
}
.scene-button span{font-weight:bold;text-shadow:0 2px 4px #000}
.trudi-open{left:31%;bottom:4%;width:22%}
.community-open{right:4%;top:5%;width:22%}
.tables-open{right:4%;bottom:5%;width:17%}
.village-back{left:3%;bottom:4%;width:14%}

.chat-dialog{padding:0;border:0;background:transparent;width:min(720px,94vw);height:min(760px,88vh);overflow:visible}
.chat-dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}
.dialog-shell{height:100%;display:flex;flex-direction:column;overflow:hidden;border:2px solid #875329;border-radius:16px;background:var(--glass);box-shadow:0 22px 80px #000}
.dialog-shell header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #75451f;background:linear-gradient(#603216,#251107)}
.dialog-shell header div{display:flex;flex-direction:column}
.dialog-shell header strong{font-size:1.5rem}
.dialog-shell header small{opacity:.75}
.close{border:0;background:transparent;color:var(--cream);font-size:2rem;cursor:pointer;padding:0 6px}
.messages{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:11px}
.message{padding:11px 13px;border:1px solid #ffffff13;border-radius:11px;background:#ffffff09;line-height:1.45;overflow-wrap:anywhere}
.message b{color:#e1ad66}
.message time{float:right;font-size:.75rem;opacity:.55;margin-left:12px}
.chat-form{display:flex;gap:9px;padding:11px;border-top:1px solid #75451f;background:#130a06}
.chat-form input{flex:1;min-width:0;padding:13px;border:1px solid #69401e;border-radius:9px;background:#080504;color:var(--cream)}

.simple-page{padding:18px;min-height:100vh;background:radial-gradient(circle at top,#593015,#160a05 65%)}
.simple-panel,.room-chat{width:min(920px,100%);margin:auto;border:2px solid #784821;border-radius:16px;background:#140b07;box-shadow:0 20px 70px #000a}
.simple-panel{padding:22px}
.simple-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:18px}
.simple-header h1{margin:0 0 8px}
.simple-header p{margin:0;opacity:.75}
.new-table{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px;margin:20px 0 28px}
.new-table input{padding:13px;border:1px solid #71431f;border-radius:9px;background:#090504;color:var(--cream)}
.table-list{display:grid;gap:12px}
.table-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:15px;padding:16px;border:1px solid #64401f;border-radius:12px;background:#ffffff07}
.table-card h2{margin:0 0 6px}
.table-card p{margin:3px 0;opacity:.72}
.table-card .full{opacity:.45;cursor:not-allowed}
.room-chat{height:calc(100vh - 36px);display:flex;flex-direction:column;overflow:hidden;padding:18px}
.room-messages{min-height:0}
.room-form{margin:0 -18px -18px}

@media(max-width:650px){
  .tavern-stage>img{object-position:44% center;filter:brightness(.78)}
  .scene-button{font-size:.82rem;padding:7px 9px}
  .trudi-open{left:25%;bottom:3%;width:31%}
  .community-open{right:3%;top:3%;width:32%}
  .tables-open{right:3%;bottom:3%;width:25%}
  .village-back{left:3%;bottom:3%;width:18%}
  .chat-dialog{width:96vw;height:90vh}
  .new-table{grid-template-columns:1fr}
  .simple-header{flex-direction:column}
  .table-card{grid-template-columns:1fr}
}


.full-page-link{
  display:block;
  width:100%;
  min-height:100vh;
  text-decoration:none;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
.full-page-link .portrait-stage{
  pointer-events:none;
}


/* 2.1.2 — Original stone artwork and robust image links */
.stone-stage>img{
  min-height:auto;
}
.stone-image-link{
  position:absolute;
  display:block;
  z-index:30;
  top:74.0%;
  height:10.2%;
  border-radius:14px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.stone-stay{
  left:16.0%;
  width:33.0%;
}
.stone-leave{
  left:50.8%;
  width:34.4%;
}
.stone-image-link:focus-visible,
.tavern-map-link:focus-visible{
  outline:3px solid #ffd17b;
  outline-offset:3px;
}
.tavern-map-link{
  position:absolute;
  display:block;
  z-index:50;
  left:49%;
  top:44%;
  width:43%;
  height:24%;
  border-radius:22px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}


/* 2.1.3 — deliberately large, robust stone tap areas */
.stone-page-image{
  touch-action:manipulation;
}
.stone-stage{
  position:relative;
}
.stone-stage>img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.stone-half{
  position:absolute;
  z-index:999;
  display:block;
  bottom:5%;
  height:23%;
  -webkit-tap-highlight-color:rgba(255,200,90,.18);
  touch-action:manipulation;
  cursor:pointer;
}
.stone-half-left{
  left:0;
  width:50%;
}
.stone-half-right{
  right:0;
  width:50%;
}
.stone-half:active{
  background:rgba(255,180,70,.08);
}
.stone-half:focus-visible{
  outline:3px solid #ffd17b;
  outline-offset:-5px;
}


.stone-controls{
display:flex;
justify-content:center;
gap:18px;
padding:18px 12px 32px;
background:#090604;
flex-wrap:wrap;
}
.stone-real-btn{
display:inline-block;
padding:14px 28px;
border:2px solid #d79a4b;
border-radius:12px;
background:#4b250f;
color:#f1dfba;
text-decoration:none;
font-size:1.2rem;
}


/* =========================================================
   VERSION 2.2 — FESTES BILDKOORDINATENSYSTEM
   Bild und SVG besitzen immer dieselbe Größe und skalieren
   gemeinsam. Dadurch können die Klickflächen nicht verrutschen.
   ========================================================= */

.scene-page{
  display:block;
  min-height:100vh;
  margin:0;
  overflow-x:auto;
  overflow-y:auto;
  background:#050302;
}

.fixed-scene{
  position:relative;
  margin:0 auto;
  line-height:0;
  background:#050302;
}

.fixed-scene>img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.fixed-scene-portrait{
  width:min(100vw,1024px);
  aspect-ratio:2 / 3;
}

.fixed-scene-landscape{
  width:min(100vw,1535px);
  aspect-ratio:1535 / 1024;
}

.scene-map{
  position:absolute;
  inset:0;
  z-index:10;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.scene-map a{
  cursor:pointer;
  outline:none;
}

.scene-map .map-area{
  fill:transparent;
  stroke:transparent;
  stroke-width:6;
  pointer-events:all;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.scene-map a:focus-visible .map-area{
  stroke:#ffd17b;
  fill:rgba(255,209,123,.10);
}

/* Nur für technische Kontrolle: body.debug-map hinzufügen. */
.debug-map .scene-map .map-area{
  stroke:#ff3344;
  fill:rgba(255,51,68,.18);
}

.tavern-page{
  min-height:100vh;
  overflow:auto;
  background:#050302;
}

@media (orientation:portrait) and (max-width:700px){
  /*
    Die Schenke bleibt ein Querformatbild.
    Auf einem hochkant gehaltenen Handy wird sie vollständig gezeigt,
    ohne Zuschnitt und ohne künstliche Hochformat-Verformung.
  */
  .fixed-scene-landscape{
    width:100vw;
  }
}


/* =========================================================
   SCHENKE 2.6.0 — SAUBERE, ECHTE EBENEN
   Hintergrund / Liora / Papa Bär / Oberfläche
   ========================================================= */
.entry-page{margin:0;width:100%;height:100%;overflow:hidden;background:#000;display:grid;place-items:center}.entry-stage{position:relative;display:block;width:min(100vw,66.6667vh);height:min(100vh,150vw);aspect-ratio:2/3;overflow:hidden}.entry-stage>img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;-webkit-user-drag:none}.market-to-tavern{position:absolute;left:26%;top:52%;width:48%;height:39%;border:0;background:transparent;-webkit-tap-highlight-color:rgba(255,214,128,.15)}.market-to-tavern:focus-visible{outline:3px solid #ffd680;outline-offset:-3px}
.schenke-body{margin:0;width:100%;height:100%;min-height:100dvh;overflow:hidden;background:#050302}
.schenke-rotation{position:fixed;inset:0;overflow:hidden;background:#050302}
.schenke-scene{position:absolute;left:50%;top:50%;width:min(100vw,150vh);aspect-ratio:3/2;transform:translate(-50%,-50%);overflow:hidden;background:#090604;line-height:normal}
.scene-bg{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* Beide Personen liegen exakt auf derselben Bühne. Nur die Deckkraft wechselt. */
.character-layer{position:absolute;z-index:5;left:1.5%;bottom:-.5%;width:55%;height:94%;object-fit:contain;object-position:left bottom;pointer-events:none;user-select:none;transition:opacity 1.45s ease,filter 1.45s ease}
.host-layer{opacity:1;filter:none}
.nameplate{position:absolute;z-index:20;left:22%;bottom:8.5%;width:31%;padding:.55% 2%;color:#ead7ae;background:linear-gradient(90deg,#2c170ee8 0 88%,transparent);border-top:1px solid #8b552f;border-bottom:1px solid #4c2b18;pointer-events:none}
.nameplate strong{display:block;font-size:clamp(15px,2vw,31px);font-weight:500}.nameplate span{font-size:clamp(8px,.95vw,15px);opacity:.85}
.king-note-board{position:absolute;z-index:18;right:5.4%;top:21%;width:16.2%;height:20.5%;padding:1.1%;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap;color:#e7cf9f;background:rgba(19,14,10,.9);font:clamp(7px,1.05vw,16px)/1.22 Georgia,serif}
.king-note-board[hidden],.quiet-banner[hidden]{display:none}
.live-chat{position:absolute;z-index:25;display:flex;flex-direction:column;overflow:hidden;color:#ead7ae;background:#17120fed;border:2px solid #6e4224;box-shadow:0 8px 24px #000b;font-family:Georgia,serif}
.live-community{right:2.5%;top:3.5%;width:31%;height:58%}
.expanded-chat-title{padding:.6em .9em;background:#382015;color:#f0d6a8;font-size:clamp(12px,1.45vw,23px)}.chat-back{display:none}
.live-messages{flex:1;min-height:0;overflow:auto;padding:.7em}.message{margin:0 0 .55em;padding-bottom:.35em;border-bottom:1px solid #8b5a3433}.message time{float:right;opacity:.65}.message b{color:#f0d09a}
.live-form{display:flex;gap:.45em;padding:.55em;background:#21150f}.live-form input{min-width:0;flex:1;background:#120e0c;color:#f0d9b0;border:1px solid #6b4327;padding:.7em}.live-form button{background:#4a2817;color:#f2d5a5;border:1px solid #8b5a34;padding:.65em 1em}.live-form input:disabled,.live-form button:disabled{opacity:.52;cursor:not-allowed}
.nav-panel,.status-panel{position:absolute;z-index:23;color:#ead7ae;background:#21140fe8;border:2px solid #5d361e;box-shadow:0 5px 18px #000b}.nav-panel{left:2%;bottom:3.5%;width:17%;display:grid}.nav-panel a,.status-panel a{color:#ead7ae;text-decoration:none;padding:.75em 1em;border-top:1px solid #56341f}.nav-panel a:first-child{border-top:0}
/* Einziger Anwesenheitszähler: die Holztafel mit grünem Punkt. */
.status-panel{right:3%;bottom:4%;width:19%;padding:.8em}.status-panel>div{padding:.35em}.status-panel .dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:#47a94c;margin-right:.45em;box-shadow:0 0 8px #47a94c}.status-panel a{display:block;margin-top:.5em;text-align:center;background:#4a2817}
.quiet-banner{position:absolute;z-index:60;left:50%;top:2.2%;transform:translateX(-50%);width:min(62%,760px);padding:.7em 1.1em;text-align:center;color:#f4ddb2;background:rgba(72,24,14,.96);border:2px solid #c78a45;border-radius:10px;box-shadow:0 8px 28px #000c;font:clamp(10px,1.15vw,17px)/1.3 Georgia,serif}
.live-chat.is-expanded{position:fixed!important;z-index:10000!important;max-width:none!important;max-height:none!important;border-radius:10px}.live-chat.is-expanded .chat-back{display:block;position:absolute;z-index:4;right:.65em;top:.45em;background:#4a2817;color:#f2d5a5;border:1px solid #8b5a34;border-radius:50%;width:2.1em;height:2.1em}.live-chat.is-expanded .expanded-chat-title{padding-right:3.4em}.live-chat.is-expanded .live-messages{font-size:clamp(14px,2.2vh,20px)}
.king-badge{position:fixed;z-index:20000;right:10px;bottom:8px;width:38px;height:38px;border:1px solid #ca9a5366;border-radius:50%;background:#0c0704dd;color:#e7c589;font-size:20px;cursor:pointer}.king-badge[hidden]{display:none}
@media (orientation:portrait){.schenke-rotation{left:50%;top:50%;right:auto;bottom:auto;width:100vh;height:100vw;transform:translate(-50%,-50%) rotate(90deg)}.schenke-scene{width:min(100vh,150vw)}}
@media(max-width:760px){.character-layer{left:0;width:57%;height:96%}.nameplate{left:20%;width:37%}.king-note-board{font-size:8px}.live-community{width:31%}.status-panel,.nav-panel{font-size:10px}.quiet-banner{width:72%;font-size:9px;top:1.5%}}

/* Königseingang und Verwaltung */
.king-page{min-height:100vh;margin:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at center,#5d2f145c,transparent 55%),#090604;color:#ead9b8}
.king-card{width:min(520px,100%);padding:28px 24px;border:1px solid #d69a4ea6;border-radius:14px;background:#1a0e08f0;box-shadow:0 18px 55px #000a;text-align:center}.king-mark{font-size:44px;color:#d9a25c}.king-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0}.king-actions button,.king-actions a{border:1px solid #d69a4e;border-radius:7px;padding:12px 18px;background:#572a10;color:#f3dfba;text-decoration:none}.king-note{color:#c8b28d;font-size:.9rem}.king-note code{color:#efc985}.king-back{color:#d8bc8d}
.admin-page{min-height:100vh;margin:0;background:#130b07;color:#2b180c;padding:18px}.admin-board{max-width:1500px;margin:auto;background:#382011 url('assets/schenke-bg.gif') center/cover fixed;border:3px solid #6d3d1d;box-shadow:0 15px 50px #000;border-radius:16px;overflow:hidden}.admin-board>header{display:flex;align-items:center;gap:18px;padding:18px 28px;background:#32150fed;color:#f3d8a4;text-align:center}.admin-board>header div{flex:1}.admin-board h1{margin:0;font-size:clamp(1.8rem,4vw,3.2rem)}.admin-back{font-size:2rem;color:#f3d8a4;text-decoration:none}.admin-grid{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:12px;padding:14px;background:#160b06d9}.admin-grid section{min-height:230px;padding:18px;background:#ead8aff2;border:2px solid #8d5b2e;border-radius:12px}.admin-grid h2{margin:0 0 14px}.admin-grid input,.admin-grid textarea{width:100%;background:#fff8e6;color:#2b180c;margin:5px 0}.admin-grid textarea{min-height:88px;resize:vertical}.admin-grid button{background:#53240f;color:#f4d8a6;cursor:pointer;margin:4px}.admin-grid button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:1100px){.admin-grid{grid-template-columns:repeat(2,minmax(240px,1fr))}}@media(max-width:620px){.admin-page{padding:0}.admin-board{border:0;border-radius:0}.admin-grid{grid-template-columns:1fr;padding:8px}.admin-board>header{padding:12px}.admin-grid section{min-height:0}}
.room-quiet-banner{position:fixed;z-index:9999;left:50%;top:10px;transform:translateX(-50%);max-width:92vw;padding:10px 16px;border:2px solid #c78a45;border-radius:10px;background:#48180ef5;color:#f4ddb2;text-align:center;box-shadow:0 8px 24px #000b}.room-quiet-banner[hidden]{display:none}


/* Schenke 2.5.1 — integrierte königliche Bedienfläche */
body.messages-hidden .live-chat{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,visibility .55s ease}
body.staff-hidden .character-layer,body.staff-hidden .nameplate{opacity:0!important;visibility:hidden;pointer-events:none;transition:opacity .7s ease,visibility .7s ease}
.royal-panel{position:fixed;z-index:21000;right:10px;bottom:54px;width:min(340px,calc(100vw - 20px));max-height:calc(100dvh - 70px);overflow:auto;border:2px solid #8b5a34;border-radius:12px;background:#160d08f2;color:#efd9ae;box-shadow:0 14px 45px #000d;font-family:Georgia,serif}
.royal-panel[hidden]{display:none}.royal-panel header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#3a2115;border-bottom:1px solid #81502e}.royal-panel header button{border:1px solid #9a683d;border-radius:50%;width:32px;height:32px;background:#21120c;color:#f1d4a4}.royal-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}.royal-controls button,.royal-controls a{min-height:42px;padding:8px;border:1px solid #8f5a32;border-radius:7px;background:#4a2817;color:#f0d7ad;text-decoration:none;text-align:center;font:inherit}.royal-controls a{grid-column:1/-1;display:grid;place-items:center}.royal-panel p{margin:0;padding:0 12px 12px;font-size:.84rem;color:#cdb58c}
@media (orientation:portrait){.royal-panel{right:8px;bottom:50px;width:min(310px,calc(100vw - 16px))}}
