/* helladnd pixel tavern: the room backdrop + app shell.
   Ported from design/helladnd-pixel-tavern/css/tavern-reference.css (room, shell, animations, room breakpoints).
   Board components live in board.css. */
body{margin:0;background:#221a18}
a{color:#f7d98b}a:hover{color:#fff1a8}
/* ===================== tokens ===================== */
/* on :root too, so dialogs (outside .tav) can use them */
:root,.tav{
  --ink:#2b1d14;--ink-soft:#5a4030;--outline:#1b1210;
  --parch:#f4e4bc;--parch-2:#e6cf98;--parch-edge:#c9a86a;
  --wood-900:#2a180d;--wood-800:#3d2416;--wood-700:#5c3a21;--wood-600:#7d5230;--wood-500:#a06a3c;
  --gold:#f2c84b;--gold-text:#f7d98b;--cream:#fff6e0;
  --hp:#4a8a3a;--hp-hi:#7cbc52;--hp-mid:#e0a83a;--hp-mid-hi:#ffc845;--hp-low:#b8352a;--hp-low-hi:#e05a44;
  --ember:#f2862e;--violet:#6e44a0;--blue:#3a6a9e;
  --f-display:'Pixelify Sans','Silkscreen',ui-monospace,monospace;
  --f-label:'Silkscreen','Pixelify Sans',ui-monospace,monospace;
  --f-body:'Alegreya',Georgia,serif;
  /* numbers: Pixelify's 5 reads as S, so HP/AC/abilities/gold use Alegreya figures */
  --f-num:'Alegreya',Georgia,serif;
}
.tav{
  position:relative;height:100vh;height:100dvh;overflow:clip;color:var(--ink);font:18px/1.5 var(--f-body);
  background:#221a18 url(/img/tavern/t-stone.png) 0 0/192px 144px repeat;
  image-rendering:pixelated;overflow-x:clip;
}
.tav img,.tav .px{image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.tav *,.tav *::before,.tav *::after{box-sizing:border-box}
.tav h1,.tav h2,.tav h3{font-family:var(--f-display);font-weight:600;line-height:1.05;margin:0;letter-spacing:.5px}
.tav p{margin:.35em 0}
.lbl{font-family:var(--f-label);font-size:12px;letter-spacing:.5px;text-transform:uppercase}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===================== the room (fixed backdrop) ===================== */
.room{position:absolute;inset:0;pointer-events:none;z-index:0}
.room .tint{position:absolute;inset:0;transition:background 1.6s}
.tod-dusk .room .tint{background:rgba(90,40,90,.18)}
.tod-night .room .tint{background:rgba(10,14,40,.42)}
.tod-morning .room .tint{background:rgba(255,190,120,.06)}
.beams{position:absolute;left:0;right:0;top:0;height:42px;background:url(/img/tavern/t-beam.png) 0 0/96px 42px repeat-x;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.post{position:absolute;top:0;bottom:0;width:30px;background:linear-gradient(90deg,#1b1210 0 3px,#7d5230 3px 6px,#5c3a21 6px 24px,#3d2416 24px 27px,#1b1210 27px)}
.post.l{left:max(216px,calc(50% - 504px))}
.floor{position:absolute;left:0;right:0;bottom:0;height:120px;background:url(/img/tavern/t-floor.png) 0 0/192px 120px repeat-x;box-shadow:0 -6px 0 #1b1210}
.lantern{position:absolute;top:42px;width:40px;transform-origin:20px 0;animation:sway 5s ease-in-out infinite}
.lantern .chain{display:block;width:12px;height:var(--drop,48px);margin:0 auto;background:url(/img/tavern/t-chain.png) 0 0/12px 24px repeat-y}
.lantern .lamp{width:40px;height:60px;background:url(/img/tavern/lantern.png) 0 0/80px 60px;animation:flick2 .5s steps(1) infinite}
.lantern .glow{position:absolute;left:50%;top:calc(var(--drop,48px) + 30px);width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,90,.30),rgba(255,160,60,.12) 40%,transparent 68%);animation:glow 3.2s ease-in-out infinite;mix-blend-mode:screen}
.lantern.a{left:max(176px,calc(50% - 544px))}.lantern.c{right:calc(50% - 600px)}
.lantern.c{animation-delay:-2.6s}
.tod-day .lantern .glow,.tod-morning .lantern .glow{opacity:.45}

.winwrap{position:absolute;left:max(16px,calc(50% - 690px));top:110px;width:160px}
.window{position:relative;width:160px;height:208px}
.window img{display:block;width:160px;height:208px}
.rain{position:absolute;left:16px;right:16px;top:20px;height:148px;border-radius:64px 64px 0 0;overflow:hidden;opacity:0;transition:opacity .8s;
  background:repeating-linear-gradient(105deg,transparent 0 14px,rgba(200,220,255,.55) 14px 16px,transparent 16px 31px),repeating-linear-gradient(100deg,transparent 0 22px,rgba(200,220,255,.35) 22px 24px,transparent 24px 41px);
  background-size:62px 62px,82px 82px;animation:rain .45s linear infinite}
.is-rain .rain{opacity:1}
.is-rain .window img{filter:saturate(.6) brightness(.8)}
.beam-light{position:absolute;left:150px;top:30px;width:420px;height:520px;transform-origin:0 0;transform:skewX(-28deg);
  background:linear-gradient(180deg,rgba(255,240,200,.16),rgba(255,240,200,0));clip-path:polygon(0 0,40% 0,100% 100%,30% 100%);transition:opacity 1.2s}
.tod-night .beam-light{background:linear-gradient(180deg,rgba(170,190,255,.10),transparent)}
.tod-dusk .beam-light{background:linear-gradient(180deg,rgba(255,170,120,.14),transparent)}
.is-rain .beam-light{opacity:.3}
.mote{position:absolute;width:3px;height:3px;background:#fff1c8;opacity:0;animation:mote 9s linear infinite}
.tod-night .mote{background:#c8d4ff}
.shelf{position:absolute;left:max(4px,calc(50% - 714px));top:360px;width:216px;height:90px;background:url(/img/tavern/shelf.png) 0 0/216px 90px}
.barrel{position:absolute;left:max(40px,calc(50% - 640px));bottom:100px;width:72px;height:84px;background:url(/img/tavern/barrel.png) 0 0/72px 84px}

.hearth{position:absolute;right:max(0px,calc(50% - 720px));bottom:96px;width:240px;height:216px;background:url(/img/tavern/hearth.png) 0 0/240px 216px}
.fire{position:absolute;left:72px;bottom:24px;width:96px;height:96px;background:url(/img/tavern/fire.png) 0 0/384px 96px;animation:fire .56s steps(4) infinite}
.firelight{position:absolute;right:calc(50% - 900px);bottom:-200px;width:1100px;height:900px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,150,60,.34),rgba(255,120,40,.12) 55%,transparent);mix-blend-mode:screen;animation:firelight 2.3s ease-in-out infinite}
.rug{position:absolute;right:max(0px,calc(50% - 712px));bottom:40px;width:216px;height:42px;background:url(/img/tavern/rug.png) 0 0/216px 42px}
.cat{position:absolute;right:max(60px,calc(50% - 650px));bottom:58px;width:96px;height:48px;padding:0;border:0;background:url(/img/tavern/cat.png) 0 0/288px 48px;
  cursor:pointer;z-index:3;animation:catnap 2.4s steps(1) infinite}
.cat:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.cat.awake{animation:none;background-position:-192px 0}
/* Rises from the cat's head, which is at the left end of the sprite. */
.zzz{position:absolute;right:max(132px,calc(50% - 578px));bottom:104px;font:12px var(--f-label);color:#f4e4bc;pointer-events:none}
.zzz span{position:absolute;opacity:0;animation:zzz 3.6s linear infinite}
.zzz span:nth-child(2){animation-delay:1.2s}.zzz span:nth-child(3){animation-delay:2.4s}
.cat-awake .zzz{display:none}
.purr{position:absolute;right:max(110px,calc(50% - 610px));bottom:104px;pointer-events:none}
.purr img{position:absolute;width:18px;height:18px;opacity:0}
.cat-awake .purr img{animation:heart-up 1.6s ease-out infinite}
.cat-awake .purr img:nth-child(2){left:18px;animation-delay:.5s}
.cat-awake .purr img:nth-child(3){left:-14px;animation-delay:1s}
.firestrip{display:none}

/* long rest: room goes to sleep */
.room .nightfall{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(10,12,40,.55),rgba(5,6,20,.82));opacity:0;transition:opacity 1s}
.resting-long .room .nightfall{opacity:1}
.resting-long .board-wrap{filter:brightness(.62) saturate(.8);transition:filter 1s}
.board-wrap{transition:filter 1s}
.motes{position:absolute;left:max(150px,calc(50% - 560px));top:140px}

/* ===================== board column ===================== */
.scroller{position:relative;z-index:1;height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a06a3c #2a180d}
.scroller:focus{outline:none} /* focused on load only so the keyboard can scroll it (app.js focusScroller) */
.board-wrap{position:relative;max-width:960px;margin:0 auto;padding:44px 20px 120px}

/* ===================== animations ===================== */
@keyframes sway{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-2deg)}}
@keyframes signswing{0%,100%{transform:rotate(.5deg)}50%{transform:rotate(-.5deg)}}
@keyframes flick2{0%{background-position:0 0}50%{background-position:-40px 0}}
@keyframes glow{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes fire{to{background-position:-384px 0}}
@keyframes firelight{0%,100%{opacity:.85}20%{opacity:1}35%{opacity:.75}60%{opacity:.95}80%{opacity:.8}}
@keyframes catnap{0%{background-position:0 0}50%{background-position:-96px 0}}
@keyframes idle{0%{background-position:0 0}50%{background-position:-80px 0}}
@keyframes rain{to{background-position:-31px 62px,-41px 82px}}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.8}85%{opacity:.6}100%{opacity:0;transform:translate(120px,260px)}}
@keyframes zzz{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(14px,-40px)}}
@keyframes heart-up{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-44px)}}
@keyframes coin{0%,92%{transform:none}94%{transform:scaleX(.5)}96%{transform:scaleX(-1)}98%{transform:scaleX(.5)}}
@keyframes lowhp{50%{filter:brightness(1.35)}}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes fizzle{0%{transform:scale(1.2);filter:brightness(2)}100%{transform:scale(1)}}
@keyframes spark{0%{opacity:1;box-shadow:0 0 0 0 #c08af0}100%{opacity:0;box-shadow:0 0 0 14px rgba(192,138,240,0)}}
@keyframes floatA{0%{opacity:0;transform:translateY(8px)}15%{opacity:1}100%{opacity:0;transform:translateY(-40px)}}
@keyframes shakeA{0%,100%{translate:0}20%{translate:-8px 0}40%{translate:8px 0}60%{translate:-6px 0}80%{translate:4px 0}}
@keyframes sparkA{0%{opacity:0;transform:translateY(0) scale(.5)}30%{opacity:1;transform:translateY(-10px) scale(1)}100%{opacity:0;transform:translateY(-40px)}}
@keyframes burstA{0%{opacity:1;transform:translate(0,0) scale(.5)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
@keyframes toast{0%{opacity:0;transform:translateY(16px)}10%,85%{opacity:1;transform:none}100%{opacity:0}}

@media (prefers-reduced-motion: reduce) {
  .tav *, .tav *::before, .tav *::after,
  #sheet, #sheet *, #sheet *::before, #sheet *::after,
  #rest-dialog, #rest-dialog *, #rest-dialog *::before, #rest-dialog *::after,
  .toasts * { animation: none !important; transition: none !important; }
}

/* ===================== narrower desktops ===================== */
@media (max-width:1300px){
  .shelf,.barrel,.post{display:none}
  .winwrap{left:8px;transform:scale(.75);transform-origin:0 0}
  .hearth{right:-40px}
}
@media (max-width:1100px){
  .winwrap,.beam-light,.mote{display:none}
  .hearth{opacity:.35}
}

/* ===================== phone ===================== */
@media (max-width:700px){
  .tav{font-size:17px;height:auto;min-height:100vh;overflow:visible}
  .scroller{height:auto;overflow:visible}
  .room{position:absolute;inset:0 0 auto 0;height:300px;overflow:hidden}
  .room .tint{display:none}
  .beams{height:30px;background-size:64px 30px}
  .lantern{top:30px}.lantern.a{left:10px;--drop:20px}.lantern.c{right:10px;left:auto;--drop:20px}
  .lantern .glow{width:180px;height:180px;margin:-90px 0 0 -90px}
  .winwrap{display:block;left:64px;top:66px;width:80px;transform:none}
  .window,.window img{width:80px;height:104px}
  .rain{left:8px;right:8px;top:10px;height:74px;border-radius:32px 32px 0 0}
  .beam-light,.mote,.shelf,.barrel,.post{display:none}
  .hearth{display:block;opacity:1;right:58px;bottom:auto;top:58px;width:160px;height:144px;background-size:160px 144px}
  .fire{left:48px;bottom:16px;width:64px;height:64px;background-size:256px 64px;animation-name:fireS}
  .rug{display:none}
  .floor{top:190px;bottom:auto;height:80px;background-size:128px 80px}
  .cat{right:auto;left:150px;bottom:auto;top:176px;width:72px;height:36px;background-size:216px 36px;animation-name:catnapS}
  .cat.awake{background-position:-144px 0}
  .zzz{right:auto;left:160px;bottom:auto;top:154px}
  .purr{right:auto;left:176px;bottom:auto;top:160px}
  .firelight{right:-200px;bottom:auto;top:-160px;width:600px;height:500px}
  .firestrip{display:block;position:fixed;left:0;right:0;bottom:0;height:56px;z-index:5;pointer-events:none;
    background:linear-gradient(0deg,rgba(255,140,50,.38),transparent);animation:firelight 2.3s ease-in-out infinite}
  .board-wrap{padding:196px 8px 90px}
}
@keyframes fireS{to{background-position:-256px 0}}
@keyframes catnapS{0%{background-position:0 0}50%{background-position:-72px 0}}