*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#17100b;color:#f3dfbd;font-family:Georgia,serif}
body{display:flex;justify-content:center;padding:18px}
.wrap{width:min(1428px,100%)}
h1{text-align:center;font-size:22px;font-weight:normal;margin:0 0 12px}
.scene{position:relative;width:100%;aspect-ratio:1428/1024;background:#000;overflow:hidden;border:4px solid #4b2d18}
.scene img{display:block;width:100%;height:100%;object-fit:fill}
.speech{position:absolute;left:55%;top:49%;background:#fff4df;color:#2b1a10;border:3px solid #392417;border-radius:16px;padding:10px 14px;font:600 17px 'Trebuchet MS',Verdana,sans-serif;line-height:1.25;box-shadow:0 3px 0 #6d4c34;max-width:220px}
.speech:after{content:"";position:absolute;left:20px;bottom:-11px;border-width:10px 9px 0;border-style:solid;border-color:#392417 transparent transparent}
.hidden{display:none}
.controls{
  position:absolute;
  left:50%;
  bottom:1.5%;
  transform:translateX(-50%);
  z-index:9;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  padding:7px 9px;
  border:2px solid #4a2e1d;
  border-radius:9px;
  background:rgba(30,19,13,.90);
  box-shadow:0 3px 9px rgba(0,0,0,.25);
}
#status{
  min-width:190px;
  max-width:300px;
  text-align:center;
  font-size:clamp(11px,1vw,14px);
}
button{border:2px solid #7c512d;background:#4b2d18;color:#f8e7c8;padding:9px 14px;border-radius:8px;font:15px Georgia,serif;cursor:pointer}
button:disabled{opacity:.4;cursor:default}
button:not(:disabled):hover{filter:brightness(1.18)}


/* v0.3 — original-style fireplace flame, positioned inside the new drawn hearth */
.fireplaceFire{
  position:absolute;
  left:14.7%;
  top:65.7%;
  transform:translate(-50%,-50%);
  z-index:4;
  width:9.5%;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  font-size:clamp(42px,6.4vw,92px);
  line-height:1;
  user-select:none;
  pointer-events:auto;
  cursor:pointer;
  border:0;
  background:transparent;
  padding:0;
  filter:drop-shadow(0 0 8px rgba(255,157,47,.48));
  animation:tavernFireFlicker .72s ease-in-out infinite alternate;
}
@keyframes tavernFireFlicker{
  0%{transform:translate(-50%,-50%) scale(.96) rotate(-1deg);filter:drop-shadow(0 0 6px rgba(255,145,35,.42)) brightness(.98)}
  100%{transform:translate(-50%,-50%) scale(1.045) rotate(1deg);filter:drop-shadow(0 0 13px rgba(255,177,55,.62)) brightness(1.14)}
}
@media(prefers-reduced-motion:reduce){
  .fireplaceFire{animation:none}
}


/* v0.5 — Tavern Talk lives inside the lower-left of the game, below the hearth */
.tavernTalk{
  position:absolute;
  left:1.2%;
  bottom:1.4%;
  width:min(30%,360px);
  min-width:220px;
  height:18%;
  min-height:105px;
  z-index:8;
  overflow:hidden;
  border:3px solid #4a2e1d;
  border-radius:10px;
  background:rgba(30,19,13,.92);
  color:#f2dfbd;
  box-shadow:0 4px 10px rgba(0,0,0,.28);
  font-family:Georgia,serif;
}
.talkTitle{
  padding:7px 10px 6px;
  border-bottom:2px solid #6e4930;
  background:rgba(65,40,25,.96);
  font-weight:bold;
  font-size:clamp(12px,1.15vw,16px);
}
.talkLog{
  height:calc(100% - 34px);
  overflow-y:auto;
  padding:7px 10px 10px;
  font-size:clamp(11px,1.05vw,14px);
  line-height:1.35;
  scrollbar-width:thin;
}
.talkLog div+div{margin-top:5px}
.talkLog .miloLine{color:#fff0cf}
.talkLog .actionLine{color:#d8c09c;font-style:italic}

@media(max-width:700px){
  .tavernTalk{width:38%;min-width:170px;height:20%}
}

.controls button{
  padding:7px 11px;
  font-size:clamp(11px,1vw,14px);
}


/* v0.7 — Milo's conversations */
.conversationWheel{
  position:absolute;
  left:58%;
  top:46%;
  transform:translate(-50%,-50%);
  z-index:12;
  width:min(390px,38%);
  padding:11px;
  border:3px solid #4a2e1d;
  border-radius:12px;
  background:rgba(30,19,13,.96);
  color:#f3dfbd;
  box-shadow:0 5px 14px rgba(0,0,0,.35);
}
.conversationPrompt{
  margin-bottom:8px;
  font-size:clamp(12px,1.15vw,16px);
  line-height:1.3;
}
.conversationChoices{
  display:grid;
  gap:6px;
}
.conversationChoices button{
  width:100%;
  min-height:36px;
  padding:7px 10px;
  text-align:left;
  font-size:clamp(11px,1vw,14px);
}
.convoTimer{
  height:3px;
  width:100%;
  margin-top:9px;
  overflow:hidden;
  border-radius:3px;
  background:#080706;
}
#convoTimerFill{
  width:100%;
  height:100%;
  background:#5ea64a;
  transform-origin:left center;
}
#convoTimerFill.running{
  animation:convoDrain 12.375s linear forwards;
}
@keyframes convoDrain{
  0%{transform:scaleX(1);background:#5ea64a}
  70%{background:#496f39}
  100%{transform:scaleX(0);background:#080706}
}
@media(max-width:700px){
  .conversationWheel{width:46%;left:63%}
}

/* v0.8 */
#sendHomeBtn:not(:disabled){ cursor:pointer; }


/* v1.0 — three-stage clickable fireplace */
.fireplaceFire.fireStage1{
  font-size:clamp(28px,4.2vw,62px);
  opacity:.78;
  filter:drop-shadow(0 0 4px rgba(255,145,35,.30));
}
.fireplaceFire.fireStage2{
  font-size:clamp(42px,6.4vw,92px);
  opacity:1;
}
.fireplaceFire.fireStage3{
  font-size:clamp(54px,7.7vw,112px);
  opacity:1;
  filter:drop-shadow(0 0 17px rgba(255,177,55,.78)) brightness(1.12);
}
.fireplaceFire:hover{filter:drop-shadow(0 0 14px rgba(255,177,55,.72)) brightness(1.1)}
.fireplaceFire:focus-visible{outline:2px solid #f3dfbd;outline-offset:3px;border-radius:50%}


/* v1.2 — clickable shelf music player */
.gramophoneHotspot{
  position:absolute;
  left:25.4%;
  top:36.2%;
  width:11.2%;
  height:22%;
  z-index:12;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}
.gramophoneHotspot:hover{
  background:rgba(255,235,190,.07);
  border-radius:45%;
}
.musicPanel{
  position:absolute;
  left:36.8%;
  top:24%;
  width:min(320px,31%);
  z-index:35;
  box-sizing:border-box;
  padding:10px 12px;
  border:2px solid rgba(214,176,111,.9);
  border-radius:8px;
  background:rgba(48,29,19,.95);
  color:#f1ddb8;
  box-shadow:0 8px 22px rgba(0,0,0,.42);
  font-family:Georgia,serif;
}
.musicTitle{font-size:17px;font-weight:bold;text-align:center;margin-bottom:5px}
.trackName{
  font-size:12px;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-bottom:8px;opacity:.9;
}
.musicButtons{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.musicButtons button,.musicButton{
  box-sizing:border-box;
  border:1px solid #b58a54;
  border-radius:5px;
  background:#5b3824;
  color:#f4e2c1;
  padding:5px 8px;
  font:12px Georgia,serif;
  cursor:pointer;
}
.musicButtons button:disabled{opacity:.42;cursor:default}
.volumeRow{
  display:flex;align-items:center;gap:8px;
  margin-top:8px;font-size:12px;
}
.volumeRow input{width:100%}

/* Notes float out of the gramophone horn while a song is playing. */
.musicNotes{
  position:absolute;
  left:30.8%;
  top:31.5%;
  width:10%;
  height:20%;
  z-index:14;
  pointer-events:none;
  color:#f3dfae;
  text-shadow:0 2px 3px rgba(0,0,0,.65);
}
.musicNotes span{
  position:absolute;
  bottom:0;
  font-size:clamp(16px,2.1vw,31px);
  opacity:0;
  animation:noteFloat 2.4s ease-out infinite;
}
.musicNotes span:nth-child(1){left:5%;animation-delay:0s}
.musicNotes span:nth-child(2){left:35%;animation-delay:.75s}
.musicNotes span:nth-child(3){left:64%;animation-delay:1.5s}
@keyframes noteFloat{
  0%{transform:translate(0,4px) rotate(-8deg) scale(.8);opacity:0}
  18%{opacity:.95}
  70%{opacity:.72}
  100%{transform:translate(18px,-58px) rotate(12deg) scale(1.15);opacity:0}
}


/* v1.3 — music controls below the game */
.musicPanel{
  position:relative;
  left:auto;
  top:auto;
  width:min(520px,92%);
  margin:12px auto 0;
  z-index:1;
}

/* Tighter click target around the drawn gramophone itself. */
.gramophoneHotspot{
  left:27.7%;
  top:39.2%;
  width:9.3%;
  height:14.5%;
  border-radius:35%;
}

/* Notes now begin at the horn and drift gently up/right. */
.musicNotes{
  left:31.3%;
  top:35.2%;
  width:7%;
  height:13%;
}
.musicNotes span{
  font-size:clamp(13px,1.55vw,23px);
}
@keyframes noteFloat{
  0%{transform:translate(0,3px) rotate(-7deg) scale(.78);opacity:0}
  18%{opacity:.9}
  72%{opacity:.65}
  100%{transform:translate(11px,-37px) rotate(10deg) scale(1.02);opacity:0}
}


/* v1.4 test — shrink the game scene by 20% */
.scene{
  width:80%;
  margin-left:auto;
  margin-right:auto;
}


/* v1.5 — scene another 10% smaller + controls moved right */
.scene{
  width:70%;
  margin-left:auto;
  margin-right:auto;
}

/* Keep the three main action buttons together at the lower-right of the scene. */
.controls{
  left:auto !important;
  right:1.5% !important;
  transform:none !important;
  justify-content:flex-end;
  width:auto;
  max-width:48%;
  flex-wrap:wrap;
}


/* v1.6 — true smaller game + clean bottom-right controls */
.scene{
  width:min(70vw, 1050px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Kill the old wide translucent control panel. */
.controls{
  position:absolute !important;
  left:auto !important;
  right:1.4% !important;
  bottom:1.7% !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
  gap:5px !important;
  z-index:25 !important;
}

/* Status is separate from the buttons visually. */
.controls #status,
.controls .status{
  order:-1 !important;
  max-width:240px !important;
  margin:0 0 3px 0 !important;
  padding:4px 7px !important;
  text-align:right !important;
  background:rgba(42,25,17,.76) !important;
  border-radius:5px !important;
  color:#f1ddb8 !important;
}

/* Compact action buttons on the far right. */
.controls button{
  display:block !important;
  width:auto !important;
  min-width:128px !important;
  max-width:180px !important;
  margin:0 !important;
  white-space:nowrap !important;
}

/* Tavern Talk remains anchored at the opposite corner. */
.tavernTalk{
  left:1.4% !important;
  bottom:1.7% !important;
  max-width:31% !important;
}


/* v1.7 — overlay alignment for the smaller v1.6 scene */

/* Nudge the fireplace emoji back onto the drawn logs. */
.fireplaceFire{
  left:13.9% !important;
  top:58.7% !important;
}

/* Click target tightly follows the gramophone body/horn. */
.gramophoneHotspot{
  left:27.2% !important;
  top:31.0% !important;
  width:10.2% !important;
  height:16.5% !important;
}

/* Notes originate above the horn rather than below the shelf. */
.musicNotes{
  left:30.1% !important;
  top:23.7% !important;
  width:8% !important;
  height:12% !important;
}
.musicNotes span{
  font-size:clamp(12px,1.35vw,21px) !important;
}
@keyframes noteFloat{
  0%{transform:translate(0,10px) rotate(-7deg) scale(.78);opacity:0}
  18%{opacity:.9}
  70%{opacity:.68}
  100%{transform:translate(12px,-30px) rotate(10deg) scale(1.04);opacity:0}
}

/* Music panel is a normal centered block BELOW the game. */
.musicPanel{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:min(520px,70vw) !important;
  margin:12px auto 0 !important;
  z-index:1 !important;
}


/* v1.8 — screenshot-guided overlay alignment */
.fireplaceFire{
  left:10.9% !important;
  top:61.2% !important;
}

.gramophoneHotspot{
  left:27.0% !important;
  top:4.2% !important;
  width:10.0% !important;
  height:15.5% !important;
}

.musicNotes{
  left:29.3% !important;
  top:0.5% !important;
  width:7.5% !important;
  height:10.5% !important;
}


/* v1.9 — music controls always available below the game */
.musicPanel{
  display:block !important;
  margin:14px auto 24px !important;
}
.musicPanel.musicPulse{
  animation:musicPanelPulse .7s ease;
}
@keyframes musicPanelPulse{
  0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.42)}
  50%{box-shadow:0 0 18px rgba(232,190,111,.72)}
}

.debugMarker{
  position:absolute;z-index:100;box-sizing:border-box;cursor:move;
  user-select:none;touch-action:none;display:flex;align-items:center;
  justify-content:center;text-align:center;font:700 10px Arial,sans-serif;
}
.debugGramophone{left:27%;top:4%;width:10%;height:15%;border:3px solid #45e36b;background:rgba(40,220,80,.18);color:#d9ffe1}
.debugNotes{left:29%;top:.5%;width:8%;height:10%;border:3px solid #4ebcff;background:rgba(40,150,255,.18);color:#e2f5ff}
.debugFire{left:10.9%;top:61.2%;width:10%;height:15%;border:3px solid #ff5d4e;background:rgba(255,70,45,.18);color:#fff0dd}
.debugReadout{
  position:absolute;top:1%;right:1%;z-index:101;width:285px;box-sizing:border-box;
  padding:8px 10px;border:2px solid #d7b36d;border-radius:6px;
  background:rgba(25,17,12,.92);color:#f3dfb8;font:12px/1.45 Arial,sans-serif;
  pointer-events:none;
}


/* v2.1 — final positions chosen with draggable debug mode */
.debugMarker,.debugReadout{display:none !important;}

.fireplaceFire{
  left:10.1% !important;
  top:59% !important;
}

.gramophoneHotspot{
  left:31% !important;
  top:28.4% !important;
  width:9.9% !important;
  height:14.8% !important;
}

.musicNotes{
  left:37% !important;
  top:22.7% !important;
  width:7.9% !important;
  height:9.9% !important;
}


/* v2.2 FIRE DEBUG */
.gramophoneHotspot{display:none !important;}

.debugFireOnly{
  position:absolute;
  left:10.1%;
  top:59%;
  width:9.9%;
  height:14.8%;
  z-index:100;
  box-sizing:border-box;
  border:3px solid #ff5548;
  background:rgba(255,70,45,.18);
  color:#fff3e8;
  cursor:move;
  user-select:none;
  touch-action:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font:700 10px Arial,sans-serif;
}
.fireDebugReadout{
  position:absolute;
  top:1%;
  right:1%;
  z-index:101;
  width:245px;
  box-sizing:border-box;
  padding:8px 10px;
  border:2px solid #d7b36d;
  border-radius:6px;
  background:rgba(25,17,12,.92);
  color:#f3dfb8;
  font:12px/1.45 Arial,sans-serif;
  pointer-events:none;
}


/* v2.3 — final fire position from fire-only debug */
.debugFireOnly,.fireDebugReadout{display:none !important;}

.fireplaceFire{
  left:13.8% !important;
  top:63% !important;
}

/* No clickable gramophone. Music notes keep their approved position. */
.gramophoneHotspot{display:none !important;}

/* v2.4: fire artwork is baked into each scene */
.fireplaceFire,.fireOverlay,.fireEmoji{display:none!important}
#fireHitbox{position:absolute;left:8.5%;top:57%;width:16%;height:27%;z-index:12;border:0;background:transparent;opacity:0;cursor:pointer}

.paintingHotspot{position:absolute;left:57.7%;top:32.5%;width:7%;height:12%;z-index:8;border:0;padding:0;background:transparent;cursor:pointer}


/* v3.2: painting remains clickable without revealing its hitbox */
.paintingHotspot,
.paintingHotspot:hover,
.paintingHotspot:active,
.paintingHotspot:focus,
.paintingHotspot:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  border:none !important;
  background:transparent !important;
  -webkit-tap-highlight-color:transparent;
}


/* v3.4 — strong tavern atmosphere pass */


/* Keep interactive/in-game UI above the atmosphere wash. */
.paintingHotspot{ z-index:8; }

/* v3.8 music player polish */
.musicPanel,.musicPanel *{caret-color:transparent}
.musicPanel{user-select:none}
.musicTrackListWrap{margin-top:10px;padding-top:8px;border-top:1px solid rgba(214,177,104,.28)}
.musicTrackListTitle{font-weight:700;margin-bottom:5px}
.musicTrackList{
  width:100%;
  max-height:none;
  overflow:visible;
  padding-right:0;
}
.musicTrackRow{display:flex;gap:7px;align-items:center;padding:4px 5px;border-radius:4px;font-size:.9em;opacity:.68}
.musicTrackRow.current{opacity:1;background:rgba(214,177,104,.13)}
.musicTrackNumber{width:22px;flex:0 0 22px;text-align:right}
.musicTrackText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.musicTrackEmpty{opacity:.5;font-size:.88em;padding:4px 5px}

/* v3.14: tracklist belongs to the full Tavern Music container */
.musicPanel{
  overflow-y:auto;
  overflow-x:hidden;
}
.musicTrackListWrap{
  width:100%;
  box-sizing:border-box;
}









/* =========================================================
   v3.14 PAGE LAYOUT
   The TAVERN itself is centered on the viewport.
   Music floats beside it and does not affect centering.
   ========================================================= */

:root{
  --game-width:1024px;
  --music-width:250px;
  --music-gap:18px;
}

html, body{
  min-height:100%;
}

body{
  display:block !important;
  position:relative !important;
  margin:0 !important;
  padding:16px 0 28px !important;
  box-sizing:border-box !important;
  overflow-x:auto !important;
}

/* The game is the visual anchor: dead-center in the browser. */
.wrap{
  position:relative !important;
  width:var(--game-width) !important;
  max-width:var(--game-width) !important;
  margin:0 auto !important;
}

/* Music is positioned relative to the centered game edge,
   but removed from layout so it cannot push the game sideways. */
.musicPanel{
  position:absolute !important;
  top:16px !important;
  left:calc(50% - (var(--game-width) / 2) - var(--music-gap) - var(--music-width)) !important;
  width:var(--music-width) !important;
  max-width:var(--music-width) !important;
  height:auto !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  z-index:20 !important;
}

.musicTrackListWrap{
  width:100% !important;
  margin-top:18px !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
}

/* If there isn't enough room beside the centered game,
   stack the music panel underneath instead of covering it. */
@media (max-width:1580px){
  body{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .wrap{
    width:min(var(--game-width), calc(100vw - 24px)) !important;
    max-width:var(--game-width) !important;
  }

  .musicPanel{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:min(420px, calc(100vw - 24px)) !important;
    max-width:420px !important;
    margin:18px auto 0 !important;
  }
}