/* Moonfell's interface as a 2001–2006 console game would have drawn it: pre-rendered bitmap frames, gauges, buttons
   and icons (outputs/ui/build_ui.py) shown at exactly 2× with hard pixels, text with a hard 1-pixel outline, and
   everything kept inside a television's safe area. On small windows the art drops to 1.5×. --p is one art pixel. */
:root{--p:2px;--safe:4.5vh 4.5vw;--ink:#f3ecd2;--dim:#b7b2a0;--gold:#e8c878;--night:#07091a;--parch-ink:#2a1a08;--parch-dim:#5d4526;
 --o:max(1px,round(down,var(--p),1px));--hard:0 var(--o) 0 var(--night),var(--o) 0 0 var(--night),calc(var(--o)*-1) 0 0 var(--night),0 calc(var(--o)*-1) 0 var(--night),var(--o) var(--o) 0 var(--night)}
@media (max-width:1180px),(max-height:700px){:root{--p:1.5px}}
.px{image-rendering:pixelated}
#hud img,#loading img,#title img,.modal img,#menu-cursor{image-rendering:pixelated}
html,body{background:#05060f}
body{-webkit-font-smoothing:antialiased}
/* The whole screen sits behind a faint CRT curve of darkness, and fine interlace lines. */
/* The CRT scanlines darken the game world only; the interface above it stays crisp. */
.vignette{background:repeating-linear-gradient(180deg,#0000 0 2px,#00000018 2px 3px),url(/ui/vignette_frame.png) center/100% 100% no-repeat;box-shadow:none;image-rendering:auto}
body.hurt:after{box-shadow:inset 0 0 120px #b0162bb0}

/* ---- Frames ---- */
.f-stone{border-style:solid;border-width:calc(24*var(--p));border-image:url(/ui/frame_stone.png) 24 fill / calc(24*var(--p)) round}
.f-iron,#quest,.hotbar .slot,#enemy-bar,#task,#interaction,#toasts>div,#minimap-panel,#room-button,#connection,.shop-sheet{border-style:solid;border-width:calc(10*var(--p));border-image:url(/ui/frame_iron.png) 20 fill / calc(10*var(--p)) round;background:none;box-shadow:none;border-radius:0}
.f-parch{border-style:solid;border-width:calc(16*var(--p));border-image:url(/ui/frame_parchment.png) 16 fill / calc(16*var(--p)) stretch}
.plate{display:inline-block;border-style:solid;border-width:calc(8*var(--p)) calc(11*var(--p));border-image:url(/ui/frame_nameplate.png) 8 11 8 11 fill / calc(8*var(--p)) calc(11*var(--p)) stretch;color:#150b02;text-shadow:0 1px 0 #f7e6b0b3;padding:0 calc(2*var(--p));line-height:1}
#hud,#hud *{text-shadow:var(--hard)}
#hud{font-family:var(--font-body)}
kbd{display:inline-grid;place-items:center;min-width:calc(24*var(--p));height:calc(24*var(--p));padding:0 calc(3*var(--p));box-sizing:border-box;background:url(/ui/btn_key.png) center/100% 100% no-repeat;image-rendering:pixelated;border:0;border-radius:0;box-shadow:none;color:#f3ecd2;font:calc(9*var(--p))/1 var(--font-display);text-shadow:0 1px 0 #1a1f33!important;letter-spacing:0}

/* ---- Header: no logo and no compass strip on screen, as the old games had none; the minimap carries north. ---- */
header{padding:var(--safe);padding-bottom:0;background:none;pointer-events:none}
.brand,#compass{display:none}
#room-button{position:absolute;right:4.5vw;top:calc(4.5vh + 118*var(--p));padding:0 calc(2*var(--p));font:calc(7*var(--p)) var(--font-display);color:var(--ink);display:flex;gap:calc(4*var(--p));align-items:center;text-align:left}
#room-button small{font-size:calc(6*var(--p));color:var(--dim)}
.online-dot{width:calc(3*var(--p));height:calc(3*var(--p));border-radius:0;background:#8fe3b5;box-shadow:none}

/* ---- Objective: an iron-framed card with a brass plate for its heading ---- */
#quest{top:4.5vh;left:4.5vw;width:calc(150*var(--p));padding:calc(10*var(--p)) calc(4*var(--p)) calc(4*var(--p));overflow:visible}
#quest .eyebrow{position:absolute;top:calc(-14*var(--p));left:calc(2*var(--p))}
#quest .eyebrow,#dialog-name{display:inline-block;border-style:solid;border-width:calc(8*var(--p)) calc(11*var(--p));border-image:url(/ui/frame_nameplate.png) 8 11 8 11 fill / calc(8*var(--p)) calc(11*var(--p)) stretch;color:#150b02!important;text-shadow:0 1px 0 #f7e6b0b3!important;font:calc(7*var(--p))/1 var(--font-display);letter-spacing:calc(.5*var(--p));padding:0 calc(3*var(--p));background:none;-webkit-mask-image:none!important;mask-image:none!important}
#quest h2{font:calc(10*var(--p))/1.15 var(--font-display);margin:calc(2*var(--p)) 0 calc(3*var(--p));color:var(--gold);-webkit-mask-image:none;mask-image:none}
#quest p{font:calc(7*var(--p))/1.4 var(--font-body);color:var(--ink);margin:0}
#seals{display:flex;gap:calc(5*var(--p));font:calc(6*var(--p)) var(--font-body);margin:calc(4*var(--p)) 0 calc(2*var(--p))}#seals span{color:var(--dim)}#seals .lit{color:#ffd875}
#journal-button{border:0;padding:0;margin-top:calc(2*var(--p));font:calc(6.5*var(--p)) var(--font-display);color:var(--gold);background:none}#journal-button span{color:var(--dim);margin-left:calc(3*var(--p))}

/* ---- Minimap: a porthole in an iron frame; the N badge is its compass ---- */
#minimap-panel{top:4.5vh;right:4.5vw;width:auto;padding:calc(2*var(--p));text-align:center}
#minimap-button{width:calc(96*var(--p));height:calc(96*var(--p));border:0;padding:0;background:#0b0e1c;border-radius:50%;position:relative;box-shadow:inset 0 0 0 calc(2*var(--p)) #1b1a14,inset 0 0 calc(10*var(--p)) #000}
#minimap{width:100%;height:100%;border-radius:50%}
#minimap-button:after{content:'N';position:absolute;top:calc(-6*var(--p));left:50%;transform:translateX(-50%);width:calc(14*var(--p));height:calc(14*var(--p));display:grid;place-items:center;background:url(/ui/btn_key.png) center/100% 100%;image-rendering:pixelated;font:calc(8*var(--p))/1 var(--font-display);color:#f3ecd2;text-shadow:0 1px 0 #1a1f33}
.minimap-controls{gap:calc(3*var(--p));margin-top:calc(2*var(--p))}
.minimap-controls button{width:calc(14*var(--p));height:calc(14*var(--p));padding:0;border:0;background:url(/ui/btn_key.png) center/100% 100%;image-rendering:pixelated;font:calc(9*var(--p))/1 var(--font-display);color:#f3ecd2}
.minimap-controls span{min-width:0;font:calc(6*var(--p)) var(--font-display);color:var(--dim)}
#minimap-panel small{display:none}

/* ---- Vitals: the moon medallion, a brass nameplate and three glass gauges ---- */
footer{padding:var(--safe);padding-top:0;background:none;align-items:flex-end}
#vitals{display:flex;align-items:center;width:auto}
#vitals .medallion{width:calc(72*var(--p));height:calc(72*var(--p));flex:none;display:grid;place-items:center;background:url(/ui/medallion.png) center/100% 100% no-repeat;border:0;box-shadow:none;border-radius:0;z-index:2;position:relative}
#vitals .medallion img{position:absolute;left:calc(20*var(--p));top:calc(20*var(--p));width:calc(32*var(--p));height:calc(32*var(--p));animation:moonBreath 4s steps(4) infinite}
@keyframes moonBreath{50%{filter:brightness(1.18)}}
body.hurt #vitals .medallion img{filter:hue-rotate(-120deg) saturate(3)}
#vitals .vitals-body{margin-left:calc(-6*var(--p));padding:0;background:none;border:0;box-shadow:none;min-width:0}
.nameplate{display:flex;align-items:center;gap:calc(4*var(--p));margin:0 0 calc(2*var(--p)) calc(6*var(--p))}
#player-name{display:inline-block;border-style:solid;border-width:calc(8*var(--p)) calc(11*var(--p));border-image:url(/ui/frame_nameplate.png) 8 11 8 11 fill / calc(8*var(--p)) calc(11*var(--p)) stretch;font:calc(8*var(--p))/1 var(--font-display);color:var(--parch-ink);text-shadow:none!important;padding:0 calc(2*var(--p))}
#level{font:calc(6.5*var(--p)) var(--font-display);color:var(--dim)}
.gauge{display:flex;align-items:center;gap:calc(2*var(--p));margin:0 0 calc(1*var(--p));height:auto;width:auto;background:none;box-shadow:none}
.gauge b{width:calc(12*var(--p));font:calc(6*var(--p)) var(--font-display);color:var(--gold);text-align:right}
/* The channel is the gauge's glass; the fill sits in it and the frame is laid over the top. */
.gauge-track,#enemy-bar>div,#task i{position:relative;display:block;height:calc(10*var(--p));width:calc(120*var(--p));margin:calc(5*var(--p)) calc(10*var(--p));background:#0a0b16;border:0;border-radius:0;box-shadow:none;overflow:visible}
.gauge-track:after,#enemy-bar>div:after,#task i:after{content:'';position:absolute;inset:calc(-5*var(--p)) calc(-10*var(--p));border-style:solid;border-width:0 calc(16*var(--p));border-image:url(/ui/gauge_frame.png) 0 16 0 16 fill / 0 calc(16*var(--p)) stretch;image-rendering:pixelated;pointer-events:none}
.gauge-track i,#enemy-bar i,#task s{display:block;height:100%;border-radius:0;background:url(/ui/gauge_fill_hp.png) left/calc(140*var(--p)) 100% no-repeat;image-rendering:pixelated;transition:width .25s steps(6)}
.mana .gauge-track i{background-image:url(/ui/gauge_fill_mp.png)}
.stamina .gauge-track i,#task s{background-image:url(/ui/gauge_fill_sp.png)}
.stamina .gauge-track{width:calc(96*var(--p))}
#health-label{font:calc(6.5*var(--p)) var(--font-display);color:var(--ink)}
#coins{display:flex;align-items:center;gap:calc(2*var(--p));margin:calc(1*var(--p)) 0 0 calc(10*var(--p));font:calc(7*var(--p)) var(--font-display);color:#ffd875}
#coins:before{content:'';width:calc(16*var(--p));height:calc(16*var(--p));background:url(/ui/icon_coin.png) center/100% 100%;image-rendering:pixelated}

/* ---- Item slots: iron boxes holding a rendered icon, the key on a worn stone cap ---- */
.hotbar{gap:calc(2*var(--p));margin:0 calc(8*var(--p)) 0 auto;align-items:flex-end}
.hotbar .slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:calc(40*var(--p));min-height:calc(40*var(--p));padding:calc(2*var(--p)) 0 0;font:calc(5.5*var(--p))/1.1 var(--font-display);color:var(--ink);gap:calc(1*var(--p))}
.hotbar .slot-icon{width:calc(24*var(--p));height:calc(24*var(--p))}
.hotbar .slot kbd{position:absolute;top:calc(-8*var(--p));right:calc(-8*var(--p));min-width:calc(14*var(--p));height:calc(14*var(--p));font-size:calc(6*var(--p))}
.hotbar .slot span{white-space:nowrap;max-width:calc(40*var(--p));overflow:hidden;text-overflow:ellipsis}
.hotbar .slot b{color:#ffd875;font-weight:400}
.hotbar button.slot:hover{filter:brightness(1.15)}
#run-button[aria-pressed=true]{filter:brightness(1.25) sepia(.4)}

/* ---- Face buttons: the controller's diamond; the big green one names what E does here ---- */
#face-buttons{position:relative;width:calc(96*var(--p));height:calc(84*var(--p));flex:none}
#face-buttons .face{position:absolute;display:flex;flex-direction:column;align-items:center;font:calc(6*var(--p)) var(--font-display);color:var(--ink);white-space:nowrap}
#face-buttons .face img{width:calc(32*var(--p));height:calc(32*var(--p))}
#face-buttons .top{left:calc(34*var(--p));top:0}#face-buttons .left{left:0;top:calc(22*var(--p))}
#face-buttons .right{right:0;top:calc(18*var(--p))}#face-buttons .act img{width:calc(40*var(--p));height:calc(40*var(--p))}
#face-buttons .act span{max-width:calc(56*var(--p));overflow:hidden;text-overflow:ellipsis;color:#bff0c8}
#face-buttons .act.idle img{filter:grayscale(.9) brightness(.55)}#face-buttons .act.idle span{color:var(--dim)}
#face-buttons .bottom{left:calc(30*var(--p));top:calc(46*var(--p))}

/* ---- The context prompt ---- */
#interaction{bottom:28%;display:flex;align-items:center;gap:calc(4*var(--p));padding:0 calc(4*var(--p)) 0 0;font:calc(8*var(--p)) var(--font-display);color:var(--ink);border-radius:0}
#interaction img{width:calc(24*var(--p));height:calc(24*var(--p));margin:calc(-6*var(--p)) 0 calc(-6*var(--p)) calc(-6*var(--p));animation:keyBob 1s steps(2) infinite}
@keyframes keyBob{50%{transform:translateY(calc(-1*var(--p)))}}

/* ---- Area titles: gold letters with a hard outline over an ornamental rule ---- */
#discovery{top:24%}
#discovery small{font:calc(7*var(--p)) var(--font-display);letter-spacing:calc(2*var(--p));color:var(--ink);text-shadow:var(--hard)}
#discovery h2{font:calc(24*var(--p))/1.1 var(--font-display);margin:calc(3*var(--p)) 0 0;color:#f2d27f;letter-spacing:calc(.5*var(--p));-webkit-mask-image:none;mask-image:none;text-shadow:0 calc(2*var(--p)) 0 var(--night),calc(2*var(--p)) 0 0 var(--night),calc(-2*var(--p)) 0 0 var(--night),0 calc(-2*var(--p)) 0 var(--night),calc(2*var(--p)) calc(2*var(--p)) 0 var(--night),0 calc(4*var(--p)) 0 #0008}
#discovery .divider{display:block;margin:calc(2*var(--p)) auto;width:calc(240*var(--p));height:calc(12*var(--p))}
#discovery p{font:italic calc(8*var(--p)) var(--font-body);color:var(--ink);text-shadow:var(--hard)}
#discovery{animation:discoverIn 4.2s steps(28) both}
@keyframes discoverIn{0%,100%{opacity:0}12%,80%{opacity:1}}

/* ---- Enemy plate, work progress and notices ---- */
#enemy-bar{top:4.5vh;width:auto;padding:calc(2*var(--p)) calc(4*var(--p)) 0;font:calc(8*var(--p)) var(--font-display);color:#f6d7a2;text-align:center}
#enemy-bar>div{width:calc(130*var(--p))}
#task{bottom:36%;width:auto;padding:calc(2*var(--p)) calc(4*var(--p)) 0;font:calc(7*var(--p)) var(--font-display);color:var(--ink);text-align:center}
#task i{width:calc(100*var(--p))}
#toasts{right:4.5vw;top:calc(4.5vh + 130*var(--p));max-width:calc(150*var(--p));gap:calc(3*var(--p))}
#toasts>div{position:relative;padding:calc(1*var(--p)) calc(3*var(--p)) calc(1*var(--p)) calc(14*var(--p));font:calc(6.5*var(--p))/1.35 var(--font-body);color:var(--ink);animation:toastIn .5s steps(5) both}
#toasts>div:before{content:'';position:absolute;left:calc(-2*var(--p));top:calc(-1*var(--p));width:calc(14*var(--p));height:calc(14*var(--p));background:url(/ui/icon_memory.png) center/100% 100%;image-rendering:pixelated}
@keyframes toastIn{from{opacity:0;transform:translateX(calc(30*var(--p)))}to{opacity:1;transform:none}}

/* ---- Dialog: a carved stone box with a live portrait window and a brass name plate ---- */
#dialog.modal{align-items:flex-end;background:none;backdrop-filter:none;padding-bottom:4.5vh}
#dialog .dialog-sheet{position:relative;width:min(calc(360*var(--p)),92vw);min-height:calc(88*var(--p));padding:calc(2*var(--p)) calc(2*var(--p)) 0 calc(76*var(--p));border-style:solid;border-width:calc(24*var(--p));border-image:url(/ui/frame_stone.png) 24 fill / calc(24*var(--p)) round;background:none;box-shadow:none;border-radius:0}
#dialog.no-portrait .dialog-sheet{padding-left:calc(2*var(--p))}
#dialog-portrait{position:absolute;left:calc(-8*var(--p));top:calc(-8*var(--p));width:calc(72*var(--p));height:calc(72*var(--p));border-style:solid;border-width:calc(6*var(--p));border-image:url(/ui/frame_iron.png) 20 / calc(6*var(--p)) round;box-sizing:border-box}
#dialog.no-portrait #dialog-portrait{display:none}
#dialog .eyebrow{position:absolute;right:0;top:calc(-18*var(--p));font:calc(5.5*var(--p)) var(--font-display);letter-spacing:calc(1*var(--p));color:var(--dim);text-shadow:var(--hard);background:none;border:0;padding:0}
#dialog-name{position:absolute;left:calc(64*var(--p));top:calc(-36*var(--p));font-size:calc(9*var(--p))}
#dialog.no-portrait #dialog-name{left:0}
#dialog-text{min-height:calc(40*var(--p));margin:0;font:calc(9*var(--p))/1.5 var(--font-body)!important;color:var(--ink)!important;text-shadow:var(--hard);white-space:pre-line}
#close-dialog{position:absolute;right:calc(-6*var(--p));bottom:calc(-14*var(--p));width:auto!important;border:0;padding:0;background:none;font:calc(6*var(--p)) var(--font-display);color:var(--gold);text-shadow:var(--hard)}
#close-dialog:hover{background:none}
.next-arrow{display:inline-block;width:calc(12*var(--p));height:calc(12*var(--p));font-size:0;vertical-align:middle;background:url(/ui/arrow_next.png) center/100% 100%;image-rendering:pixelated;animation:keyBob .8s steps(2) infinite}
#dialog.typing .next-arrow{visibility:hidden}
#dialog-choices{display:grid;grid-template-columns:1fr;gap:calc(1*var(--p));margin:calc(4*var(--p)) 0 calc(4*var(--p))}
#dialog-choices button{display:block;width:100%;text-align:left;padding:calc(2*var(--p)) calc(8*var(--p))!important;margin:0;background:none!important;border:0!important;font:calc(8*var(--p)) var(--font-display)!important;color:var(--ink)!important;text-shadow:var(--hard)}
body:has(#dialog:not(.hidden)) footer,body:has(#dialog:not(.hidden)) #quest,body:has(#dialog:not(.hidden)) #interaction,body:has(#dialog:not(.hidden)) #toasts{opacity:0}

/* ---- The menu cursor and the selected row ---- */
#menu-cursor{position:fixed;z-index:80;display:none;width:calc(24*var(--p));height:calc(20*var(--p));background:url(/ui/cursor_hand.png) center/100% 100% no-repeat;pointer-events:none;animation:pointBob .7s steps(2) infinite}
@keyframes pointBob{50%{transform:translateX(calc(2*var(--p)))}}
.menu-focus{border-style:solid!important;border-width:0 calc(12*var(--p))!important;border-image:url(/ui/sel_bar.png) 0 12 0 12 fill / 0 calc(12*var(--p)) stretch!important;background:none!important}
input[type=range].menu-focus{border-width:0 calc(6*var(--p))!important}

/* ---- The pause book: leather tabs above an open journal; pages turn with Q / E ---- */
#journal.modal{background:#03040cd0;backdrop-filter:none}
.pause-book{position:relative;width:calc(480*var(--p));height:calc(300*var(--p));background:url(/ui/book_spread.png) center/100% 100% no-repeat;image-rendering:pixelated;margin-top:calc(26*var(--p))}
.book-tabs{position:absolute;top:calc(-24*var(--p));left:0;right:0;display:flex;justify-content:center;align-items:flex-end;gap:calc(2*var(--p))}
.book-tabs button{width:calc(62*var(--p));height:calc(24*var(--p));padding:calc(4*var(--p)) 0 0;border:0;background:url(/ui/tab_off.png) center/100% 100% no-repeat;image-rendering:pixelated;font:calc(7*var(--p)) var(--font-display);color:#d7c9a8;text-shadow:var(--hard)}
.book-tabs button.on{background-image:url(/ui/tab_on.png);height:calc(26*var(--p));color:#fff1cf}
.book-tabs .shoulder{width:calc(40*var(--p));height:calc(18*var(--p));margin:0 calc(6*var(--p)) calc(3*var(--p))}
.pause-book .close{position:absolute;right:calc(-4*var(--p));top:calc(-24*var(--p));font:calc(12*var(--p)) var(--font-display);color:var(--gold);text-shadow:var(--hard);background:none;border:0}
.book-pages,.book-page{position:absolute;inset:0}
.page-left,.page-right{position:absolute;top:calc(34*var(--p));width:calc(172*var(--p));height:calc(232*var(--p));overflow:auto;color:var(--parch-ink);font:calc(7*var(--p))/1.45 var(--font-body);scrollbar-width:none}
.page-left{left:calc(34*var(--p))}.page-right{left:calc(274*var(--p))}
.book-page h2,.book-page h3{color:#3a2208;-webkit-mask-image:none;mask-image:none;text-shadow:none;font-family:var(--font-display);margin:0 0 calc(4*var(--p))}
.book-page h2{font-size:calc(13*var(--p))}.book-page h3{font-size:calc(10*var(--p));border-bottom:var(--p) solid #7a5a2e66;padding-bottom:calc(1*var(--p))}
.book-page .eyebrow{font:calc(5.5*var(--p)) var(--font-display);letter-spacing:calc(1*var(--p));color:var(--parch-dim);text-shadow:none}
.book-page ul{list-style:none;padding:0;margin:0}.book-page li{padding:calc(1.5*var(--p)) 0 calc(1.5*var(--p)) calc(12*var(--p));position:relative;text-shadow:none;color:var(--parch-ink);font-size:calc(7*var(--p))}
.book-page li:before{content:'';position:absolute;left:0;top:calc(2*var(--p));width:calc(9*var(--p));height:calc(9*var(--p));background:url(/ui/icon_quest.png) center/100% 100%;image-rendering:pixelated}
#journal-objectives li:before{background-image:url(/ui/icon_quest_main.png)}
.book-page li.done{color:#8b7654}
.book-page p,.book-page .muted,.book-page small{color:var(--parch-dim);text-shadow:none}
.map-page{display:grid;place-items:center}.map-page canvas{width:calc(170*var(--p));height:calc(170*var(--p));border:calc(2*var(--p)) solid #5c3d1a;border-radius:0;box-shadow:none;}
.map-legend{font-size:calc(6*var(--p))!important;line-height:1.6}
#journal-skills{display:grid;grid-template-columns:1fr;gap:calc(3*var(--p));color:var(--parch-ink);font:calc(7*var(--p)) var(--font-display)}
#journal-skills>button{display:grid;grid-template-columns:calc(16*var(--p)) 1fr auto;align-items:center;column-gap:calc(3*var(--p))}
#journal-skills img{width:calc(16*var(--p));height:calc(16*var(--p));grid-row:span 2}
#journal-skills b{color:#6b3f0f;font-weight:400}
#journal-skills i{grid-column:2 / 4;display:block;height:calc(3*var(--p));background:#7a5a2e44;margin:0}
#journal-skills i s{display:block;height:100%;background:#8a5d1f;text-decoration:none}
#inventory{display:grid;grid-template-columns:1fr 1fr;gap:calc(2*var(--p)) calc(4*var(--p))}
.item-cell{display:grid;grid-template-columns:calc(16*var(--p)) 1fr auto;align-items:center;gap:calc(2*var(--p));font:calc(6.5*var(--p)) var(--font-body);color:var(--parch-ink)}
.item-cell img{width:calc(16*var(--p));height:calc(16*var(--p))}.item-cell b{color:#6b3f0f;font:calc(7*var(--p)) var(--font-display)}
.audio-mix{flex-direction:column;gap:calc(4*var(--p))}.audio-mix label{color:var(--parch-ink);font:calc(7*var(--p)) var(--font-display);text-shadow:none}
.audio-mix input{accent-color:#6b3f0f;margin-top:calc(2*var(--p));border:0;background:none}
.controls-list{font:calc(6.5*var(--p))/1.7 var(--font-body)!important;color:var(--parch-ink)!important}
.book-hint{position:absolute;bottom:calc(-20*var(--p));left:0;right:0;text-align:center;font:calc(6*var(--p)) var(--font-display);color:var(--dim);text-shadow:var(--hard)}
.book-hint .k{display:inline-grid;place-items:center;min-width:calc(12*var(--p));height:calc(12*var(--p));padding:0 calc(2*var(--p));margin:0 calc(1*var(--p)) 0 calc(4*var(--p));background:url(/ui/btn_key.png) center/100% 100%;image-rendering:pixelated;color:#f3ecd2;font-size:calc(5.5*var(--p))}
.book-page.hidden{display:none!important}

/* ---- Shop: a parchment ledger in an iron frame ---- */
#shop.modal{background:#03040cd0;backdrop-filter:none}
.shop-sheet{width:min(calc(360*var(--p)),92vw)!important;padding:calc(8*var(--p))!important;max-height:86vh;overflow:auto;border-width:calc(10*var(--p));background:url(/ui/frame_parchment.png) center/100% 100%!important;image-rendering:pixelated}
.shop-sheet h2,.shop-sheet h3{color:#3a2208;-webkit-mask-image:none;mask-image:none;text-shadow:none}
.shop-sheet .eyebrow,.shop-sheet .muted,.shop-sheet p{color:var(--parch-dim);text-shadow:none}
.shop-list li{color:var(--parch-ink);border-bottom:var(--p) dotted #7a5a2e66;text-shadow:none}
.shop-list button{border:0!important;padding:calc(2*var(--p)) calc(5*var(--p))!important;background:url(/ui/btn_key.png) center/100% 100%!important;image-rendering:pixelated;color:#f3ecd2!important;font:calc(6*var(--p)) var(--font-display)!important;text-shadow:0 1px 0 #1a1f33}
.shop-sheet .close{color:#5c3d1a;text-shadow:none}

/* ---- Finale cards ---- */
.victory-sheet{border-style:solid;border-width:calc(24*var(--p));border-image:url(/ui/frame_stone.png) 24 fill / calc(24*var(--p)) round;background:none;box-shadow:none}
.victory-sheet h1,.victory-sheet h2{color:#f2d27f;-webkit-mask-image:none;mask-image:none;text-shadow:var(--hard)}
.victory-sheet p{color:var(--ink);text-shadow:var(--hard)}

/* ---- Loading: a turning moon emblem, NOW LOADING and a tip ---- */
#loading{background:#05060f}
#loading .emblem{width:calc(64*var(--p));height:calc(64*var(--p));animation:emblemTurn 1.6s steps(8) infinite}
@keyframes emblemTurn{to{transform:rotate(360deg)}}
#loading h1{font:calc(14*var(--p)) var(--font-display);letter-spacing:calc(3*var(--p));color:#f2d27f;text-shadow:var(--hard);-webkit-mask-image:none;mask-image:none}
#loading #load-text{font:calc(7*var(--p)) var(--font-body);color:var(--dim)}
#load-tip{position:absolute;left:4.5vw;bottom:4.5vh;max-width:50vw;font:calc(7*var(--p)) var(--font-body);color:var(--ink);text-shadow:var(--hard)}
#loading:after{content:'NOW LOADING';position:absolute;right:4.5vw;bottom:4.5vh;font:calc(9*var(--p)) var(--font-display);letter-spacing:calc(1.5*var(--p));color:var(--ink);text-shadow:var(--hard);animation:blink 1.2s steps(2) infinite}
.load-track{width:calc(120*var(--p));height:calc(4*var(--p));background:#15182c;box-shadow:0 0 0 var(--p) #6b4d1d;border-radius:0}
.load-track i{background:url(/ui/gauge_fill_sp.png) left/calc(140*var(--p)) 100%;image-rendering:pixelated;border-radius:0}
@keyframes blink{50%{opacity:0}}

/* ---- Title: PRESS START over the crest, then the menu in a carved frame ---- */
#title{background:radial-gradient(ellipse at 50% 40%,#0b0f2a99,#03040ce8 75%);padding:var(--safe);justify-content:center;align-items:center}
.title-top,.title-bottom{position:absolute;left:4.5vw;right:4.5vw;font:calc(6*var(--p)) var(--font-display);letter-spacing:calc(1*var(--p));color:var(--dim);text-shadow:var(--hard)}
.title-top{top:4.5vh}.title-bottom{bottom:4.5vh;display:flex;justify-content:space-between}
#press-start{display:flex;flex-direction:column;align-items:center;gap:calc(6*var(--p));cursor:pointer}
#press-start .crest{width:calc(320*var(--p));height:calc(140*var(--p));max-width:90vw;height:auto}
#press-start .press{font:calc(11*var(--p)) var(--font-display);letter-spacing:calc(3*var(--p));color:#f2d27f;text-shadow:var(--hard);margin:0;animation:blink 1.1s steps(2) infinite}
#press-start .press-sub{font:calc(6*var(--p)) var(--font-display);color:var(--dim);text-shadow:var(--hard)}
#title .title-body{display:none}
#title.started #press-start{display:none}
#title.started .title-body{display:block;max-width:none;width:calc(230*var(--p));border-style:solid;border-width:calc(24*var(--p));border-image:url(/ui/frame_stone.png) 24 fill / calc(24*var(--p)) round;padding:0;background:none;box-shadow:none;border-radius:0}
.title-body .eyebrow{font:calc(6*var(--p)) var(--font-display);letter-spacing:calc(1*var(--p));color:var(--dim);text-shadow:var(--hard)}
.title-body h1{font:calc(22*var(--p))/1 var(--font-display)!important;color:#f2d27f;margin:calc(2*var(--p)) 0 calc(4*var(--p))!important;-webkit-mask-image:none;mask-image:none;text-shadow:var(--hard)!important}
.title-body>p{font:calc(7*var(--p))/1.5 var(--font-body)!important;color:var(--ink);text-shadow:var(--hard);margin:0 0 calc(4*var(--p))!important}
.title-body>p.title-controls{font-size:calc(5.5*var(--p))!important;color:var(--dim)!important}
#join{max-width:none}
#join label{font:calc(7*var(--p)) var(--font-display);color:var(--gold);text-shadow:var(--hard);margin:calc(4*var(--p)) 0}
#join label span{font-size:calc(5.5*var(--p));color:var(--dim)}
#join input{margin-top:calc(2*var(--p));padding:calc(3*var(--p)) calc(4*var(--p));border-style:solid;border-width:calc(10*var(--p));border-image:url(/ui/frame_iron.png) 20 fill / calc(10*var(--p)) round;background:none;color:#fff3d2;font:calc(9*var(--p)) var(--font-display);text-shadow:var(--hard);box-shadow:none;border-radius:0}
#enter{position:relative;margin-top:calc(4*var(--p));width:100%;padding:calc(3*var(--p)) calc(8*var(--p)) calc(3*var(--p)) calc(20*var(--p))!important;text-align:left;border-style:solid!important;border-width:0 calc(12*var(--p))!important;border-image:url(/ui/sel_bar.png) 0 12 0 12 fill / 0 calc(12*var(--p)) stretch!important;background:none!important;box-shadow:none!important;color:#fff3d2!important;font:calc(10*var(--p)) var(--font-display)!important;text-shadow:var(--hard)!important}
#enter:before{content:'';position:absolute;left:calc(-4*var(--p));top:50%;transform:translateY(-50%);width:calc(24*var(--p));height:calc(20*var(--p));background:url(/ui/cursor_hand.png) center/100% 100%;image-rendering:pixelated;animation:pointBob .7s steps(2) infinite}
#enter span{display:none}
.atlas-link{font:calc(6*var(--p)) var(--font-display);color:var(--dim);text-shadow:var(--hard);margin-top:calc(3*var(--p))}

/* Brass plates carry their words a little larger, so they read at a glance. */
#quest .eyebrow{font-size:calc(8*var(--p));padding:0 calc(4*var(--p))}
#quest{padding-top:calc(12*var(--p))}
#face-buttons{width:calc(104*var(--p))}
#portrait-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;background:#0a0d1c}

/* ---- A leaner HUD, with the bottom-left corner kept free for the public chat box ----
   The HUD draws its art at 1.5× (1.25× on small windows); dialog, the pause book and the title keep their size.
   Vitals sit top-left, the objective under the minimap on the right, notices down the left under the vitals,
   item slots bottom-centre and the face buttons bottom-right. */
#hud{--p:1.5px}
@media (max-width:1400px),(max-height:820px){#hud{--p:1.25px}}
#vitals{position:fixed;top:4.5vh;left:4.5vw;z-index:3}
#vitals .medallion{width:calc(60*var(--p));height:calc(60*var(--p))}
#vitals .medallion img{left:calc(16.7*var(--p));top:calc(16.7*var(--p));width:calc(26.6*var(--p));height:calc(26.6*var(--p))}
.gauge-track{width:calc(96*var(--p))}.stamina .gauge-track{width:calc(76*var(--p))}
#minimap-button{width:calc(104*var(--p));height:calc(104*var(--p))}
#room-button{top:calc(4.5vh + 142*var(--p))}
#quest{top:calc(4.5vh + 176*var(--p));left:auto;right:4.5vw;width:calc(132*var(--p))}
#toasts{left:4.5vw;right:auto;top:calc(4.5vh + 78*var(--p));align-items:flex-start;max-width:calc(150*var(--p))}
#toasts>div{animation-name:toastInLeft}
@keyframes toastInLeft{from{opacity:0;transform:translateX(calc(-30*var(--p)))}to{opacity:1;transform:none}}
footer{justify-content:flex-end;gap:calc(10*var(--p))}
.hotbar{position:fixed;left:50%;bottom:4.5vh;transform:translateX(-50%);margin:0}
.hotbar .slot{width:calc(34*var(--p));min-height:calc(34*var(--p))}.hotbar .slot-icon{width:calc(20*var(--p));height:calc(20*var(--p))}
.hotbar .slot span{max-width:calc(34*var(--p));font-size:calc(5*var(--p))}
#face-buttons{transform:scale(.85);transform-origin:bottom right}
/* The public chat box will live here. */
#chat-reserve{position:fixed;left:4.5vw;bottom:4.5vh;width:min(30vw,420px);height:26vh;pointer-events:none}

/* ---- A bigger minimap ---- */
#minimap-button{width:calc(140*var(--p));height:calc(140*var(--p))}
#room-button{top:calc(4.5vh + 178*var(--p))}
#quest{top:calc(4.5vh + 212*var(--p))}

/* ---- Public chat, bottom-left: lines float over the world and fade; Enter opens an iron-framed log to type in ---- */
#chat{position:fixed;left:4.5vw;bottom:4.5vh;width:min(30vw,440px);display:flex;flex-direction:column;gap:calc(2*var(--p));pointer-events:none}
#chat-log{max-height:22vh;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:calc(1*var(--p));padding:calc(2*var(--p)) calc(3*var(--p))}
#chat-log::-webkit-scrollbar{display:none}
.chat-line{font:calc(6.5*var(--p))/1.35 var(--font-body);color:var(--ink);text-shadow:var(--hard);transition:opacity 1.2s steps(4);word-wrap:break-word}
.chat-line b{font-family:var(--font-display);font-weight:400;color:var(--gold);margin-right:calc(1*var(--p))}
.chat-line b:after{content:':'}
.chat-line.mine b{color:#bff0c8}
.chat-line.system{font-style:italic;color:var(--dim)}
.chat-line.faded{opacity:0}
body.chatting #chat{pointer-events:auto}
body.chatting #chat-log{border-style:solid;border-width:calc(10*var(--p));border-image:url(/ui/frame_iron.png) 20 fill / calc(10*var(--p)) round;padding:0 calc(2*var(--p))}
body.chatting .chat-line.faded{opacity:1}
#chat-input{border-style:solid;border-width:calc(8*var(--p));border-image:url(/ui/frame_iron.png) 20 fill / calc(8*var(--p)) round;background:none;color:#fff3d2;font:calc(7*var(--p)) var(--font-body);text-shadow:var(--hard);padding:0 calc(2*var(--p));outline:none;border-radius:0;box-shadow:none;margin:0}
#chat-input::placeholder{color:var(--dim)}
.chat-hint{font:calc(5.5*var(--p)) var(--font-display);color:var(--dim);text-shadow:var(--hard);padding-left:calc(3*var(--p))}
.chat-hint .k{display:inline-grid;place-items:center;min-width:calc(12*var(--p));height:calc(12*var(--p));margin-right:calc(2*var(--p));background:url(/ui/btn_key.png) center/100% 100%;image-rendering:pixelated;color:#f3ecd2;font-size:calc(6*var(--p))}
body.chatting .chat-hint{display:none}
/* While someone is speaking in a dialog, the chat steps aside with the rest of the HUD. */
body:has(#dialog:not(.hidden)) #chat{opacity:0}

/* ---- The HUD a size up ---- */
#hud{--p:1.75px}
@media (max-width:1400px),(max-height:820px){#hud{--p:1.5px}}
@media (max-width:1000px),(max-height:600px){#hud{--p:1.25px}}
@media (max-width:1180px),(max-height:700px){:root{--p:1.75px}}

/* ---- The chat bar: always on screen, click or press Enter to type; lines float up above it ---- */
#chat{pointer-events:auto;width:min(32vw,480px)}
#chat-log{pointer-events:none;border:0!important;padding:0 calc(3*var(--p))!important;max-height:24vh}
body.chatting #chat-log{border-image:none!important;background:linear-gradient(90deg,#05060fb0,#05060f40 80%,transparent);pointer-events:auto}
#chat-bar{display:flex;align-items:center;gap:calc(3*var(--p));border-style:solid;border-width:calc(7*var(--p));border-image:url(/ui/frame_iron.png) 20 fill / calc(7*var(--p)) round;padding:0 calc(2*var(--p));opacity:.72;transition:opacity .2s steps(3);cursor:text}
#chat-bar:hover,body.chatting #chat-bar{opacity:1}
#chat-bar .k{display:inline-grid;place-items:center;flex:none;min-width:calc(12*var(--p));height:calc(12*var(--p));background:url(/ui/btn_key.png) center/100% 100%;image-rendering:pixelated;color:#f3ecd2;font:calc(6*var(--p))/1 var(--font-display);text-shadow:0 1px 0 #1a1f33}
#chat-input{flex:1;min-width:0;border:0!important;border-image:none!important;background:none!important;padding:calc(1*var(--p)) 0!important;font:calc(7*var(--p)) var(--font-body)!important;color:#fff3d2;text-shadow:var(--hard)}
#chat-input::placeholder{color:#8e8a7c}

/* ---- Character creator: carved stone panel of options beside a turning preview in an iron frame ---- */
#creator.modal{background:radial-gradient(ellipse at 60% 50%,#0b0f2ac0,#03040cf0 75%);backdrop-filter:none;z-index:40}
.creator-sheet{display:flex;align-items:center;gap:calc(10*var(--p))}
.creator-panel{width:calc(210*var(--p));border-style:solid;border-width:calc(24*var(--p));border-image:url(/ui/frame_stone.png) 24 fill / calc(24*var(--p)) round}
.creator-panel h2{margin:0 0 calc(2*var(--p));font:calc(14*var(--p)) var(--font-display);color:#f2d27f;text-shadow:var(--hard);-webkit-mask-image:none;mask-image:none}
.creator-panel p{margin:0 0 calc(6*var(--p));font:calc(6.5*var(--p))/1.5 var(--font-body);color:var(--dim);text-shadow:var(--hard)}
.creator-row{display:grid;grid-template-columns:calc(46*var(--p)) calc(12*var(--p)) 1fr calc(12*var(--p));align-items:center;gap:calc(2*var(--p));padding:calc(2*var(--p)) calc(6*var(--p));border:solid transparent;border-width:0 calc(12*var(--p))}
.creator-row.on{border-image:url(/ui/sel_bar.png) 0 12 0 12 fill / 0 calc(12*var(--p)) stretch}
.creator-row .label{font:calc(7.5*var(--p)) var(--font-display);color:var(--gold);text-shadow:var(--hard)}
.creator-row .value{display:flex;align-items:center;justify-content:center;gap:calc(3*var(--p));font:calc(7.5*var(--p)) var(--font-body);color:var(--ink);text-shadow:var(--hard);text-align:center}
.creator-row .swatch{display:inline-block;width:calc(8*var(--p));height:calc(8*var(--p));box-shadow:0 0 0 var(--p) #07091a,0 0 0 calc(2*var(--p)) #8a6a34}
.creator-row .arrow{border:0;padding:0;width:calc(12*var(--p));height:calc(12*var(--p));background:url(/ui/btn_key.png) center/100% 100%;image-rendering:pixelated;color:#f3ecd2;font:calc(6*var(--p))/1 var(--font-display)}
.creator-actions{display:flex;gap:calc(4*var(--p));margin-top:calc(8*var(--p))}
#creator-confirm,#creator-cancel{flex:1;padding:calc(3*var(--p)) calc(6*var(--p));border-style:solid;border-width:0 calc(12*var(--p));border-image:url(/ui/sel_bar.png) 0 12 0 12 fill / 0 calc(12*var(--p)) stretch;background:none;color:#fff3d2;font:calc(8*var(--p)) var(--font-display);text-shadow:var(--hard)}
#creator-cancel{flex:.6;filter:saturate(.3) brightness(.8)}
#creator-confirm:disabled{filter:grayscale(1) brightness(.6);cursor:default}
.creator-hint{margin-top:calc(5*var(--p));font:calc(5.5*var(--p)) var(--font-display);color:var(--dim);text-shadow:var(--hard)}
.creator-hint .k{display:inline-grid;place-items:center;min-width:calc(12*var(--p));height:calc(12*var(--p));padding:0 calc(2*var(--p));margin:0 calc(1*var(--p)) 0 calc(4*var(--p));background:url(/ui/btn_key.png) center/100% 100%;image-rendering:pixelated;color:#f3ecd2}
.creator-preview{width:calc(120*var(--p));height:calc(160*var(--p));border-style:solid;border-width:calc(10*var(--p));border-image:url(/ui/frame_iron.png) 20 / calc(10*var(--p)) round;box-sizing:content-box}
#creator-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;background:#0a0d1c}
#toasts{top:calc(4.5vh + 104*var(--p))}

/* ---- The Night Market and the Vault: parchment ledgers ---- */
#exchange.modal{background:#03040cd0;backdrop-filter:none}
.exchange-sheet{width:min(calc(440*var(--p)),94vw)!important;max-height:88vh;overflow:auto;padding:calc(6*var(--p)) calc(10*var(--p))!important;border-style:solid!important;border-width:calc(16*var(--p))!important;border-image:url(/ui/frame_parchment.png) 16 fill / calc(16*var(--p)) stretch!important;background:none!important;box-shadow:none!important;image-rendering:pixelated;color:#2a1a08}
.exchange-sheet h2,.exchange-sheet h3{color:#3a2208!important;text-shadow:none!important}.exchange-sheet .eyebrow{color:#7a4a14!important;text-shadow:none!important}.exchange-sheet .close{color:#3a2208!important;text-shadow:none!important}.exchange-sheet p,.exchange-sheet small{text-shadow:none!important}
.ex-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:calc(8*var(--p))}
#ex-search{width:100%;margin-bottom:calc(3*var(--p));padding:calc(2*var(--p)) calc(4*var(--p));border:var(--p) solid #7a5a2e;background:#efe0bd;color:#2a1a08;font:calc(7*var(--p)) var(--font-body)}
#ex-items{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:var(--p)}
.ex-row{display:grid;grid-template-columns:calc(16*var(--p)) 1fr auto auto auto;align-items:center;gap:calc(3*var(--p));padding:var(--p) calc(3*var(--p));border:0;background:none;text-align:left;font:calc(7*var(--p)) var(--font-body);color:#2a1a08;text-shadow:none}
.ex-row img,.ex-offer img,#ex-sel img{width:calc(16*var(--p));height:calc(16*var(--p));image-rendering:pixelated}
.ex-row small{font-size:calc(5.5*var(--p));color:#5d4526}.ex-row .bid{color:#2f6a2a}.ex-row .ask{color:#8a2a1f}
.ex-row.on,.ex-row:hover{background:#7a5a2e30!important}
#ex-sel{display:grid;grid-template-columns:calc(16*var(--p)) 1fr;column-gap:calc(3*var(--p));align-items:center;color:#2a1a08;font:calc(8*var(--p)) var(--font-display)}
#ex-sel small{grid-column:1/-1;font:calc(6*var(--p)) var(--font-body);color:#5d4526}
.ex-sides{display:flex;gap:calc(3*var(--p));margin:calc(4*var(--p)) 0}
.ex-sides button,#ex-place,#ex-collect,.ex-offer button,.ex-step button{border:0;padding:calc(2*var(--p)) calc(6*var(--p));background:url(/ui/btn_key.png) center/100% 100%;image-rendering:pixelated;color:#f3ecd2;font:calc(7*var(--p)) var(--font-display);text-shadow:0 1px 0 #1a1f33}
.ex-sides button.on{filter:brightness(1.3) sepia(.5)}
.exchange-sheet label{display:flex;justify-content:space-between;align-items:center;color:#3a2208;font:calc(7*var(--p)) var(--font-display);text-shadow:none;margin:calc(2*var(--p)) 0}
.ex-step{display:inline-flex;gap:var(--p);align-items:center}.ex-step input{width:calc(40*var(--p));text-align:center;border:var(--p) solid #7a5a2e;background:#efe0bd;color:#2a1a08;font:calc(7*var(--p)) var(--font-body);padding:var(--p)}
#ex-total,#ex-box,#vault-coins{color:#5d4526;font:calc(6.5*var(--p)) var(--font-body);text-shadow:none}
#ex-place:disabled,#ex-collect:disabled{filter:grayscale(1) brightness(.7)}
.ex-offer{display:grid;grid-template-columns:calc(16*var(--p)) 1fr auto;gap:calc(3*var(--p));align-items:center;color:#2a1a08;font:calc(6.5*var(--p)) var(--font-body)}
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(34*var(--p)),1fr));gap:calc(2*var(--p));margin:calc(3*var(--p)) 0}
.vault-cell{position:relative;display:flex;flex-direction:column;align-items:center;padding:var(--p);border:var(--p) solid #7a5a2e66;background:#efe0bd80;color:#2a1a08;font:calc(5*var(--p)) var(--font-body);text-shadow:none}
.vault-cell img{width:calc(18*var(--p));height:calc(18*var(--p));image-rendering:pixelated}.vault-cell b{position:absolute;top:0;right:var(--p);font:calc(6*var(--p)) var(--font-display);color:#6b3f0f}
.vault-cell:hover{background:#7a5a2e30}

/* Scenery density buttons (Options page) and the F3 performance overlay. */
.scenery-density{display:flex;gap:calc(3*var(--p));margin:calc(3*var(--p)) 0}
.scenery-density button{border:0;padding:calc(2*var(--p)) calc(6*var(--p));background:url(/ui/btn_key.png) center/100% 100%;image-rendering:pixelated;color:#f3ecd2;font:calc(7*var(--p)) var(--font-display);text-shadow:0 1px 0 #1a1f33;cursor:pointer}
.scenery-density button.on{filter:brightness(1.3) sepia(.5)}
.view-options{display:flex;flex-wrap:wrap;gap:calc(3*var(--p));margin:calc(3*var(--p)) 0}
.view-options button{border:0;padding:calc(2*var(--p)) calc(5*var(--p));background:url(/ui/btn_key.png) center/100% 100%;image-rendering:pixelated;color:#f3ecd2;font:calc(6.5*var(--p)) var(--font-display);text-shadow:0 1px 0 #1a1f33;cursor:pointer;opacity:.6}
.view-options button.on{filter:brightness(1.3) sepia(.5);opacity:1}
.density-note{color:var(--parch-ink);font:calc(5.5*var(--p)) var(--font-body);text-shadow:none;opacity:.8}
#perf-overlay{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:70;margin:0;padding:6px 10px;background:#05060ecc;border:1px solid #6b5a3a;color:#d8e8c0;font:12px/1.35 ui-monospace,Menlo,monospace;pointer-events:none;white-space:pre}
#perf-overlay.warn{color:#ffb08a}
#dialog-choices .express-row{margin-top:calc(3*var(--p));padding-left:calc(8*var(--p));font:calc(6*var(--p)) var(--font-body);color:#d8c38e;text-shadow:var(--hard)}
/* The Turtle Casino */
.casino-sheet .casino-bet{display:flex;align-items:center;gap:calc(2*var(--p));margin:calc(3*var(--p)) 0;font:calc(7*var(--p)) var(--font-body);color:#d8c38e}
.casino-sheet .casino-bet b{min-width:3.5em;text-align:center;font-size:1.3em;color:#f2e6c8}
.casino-sheet .casino-table{min-height:calc(34*var(--p));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2*var(--p));font-size:calc(22*var(--p));color:#e8e0ff;text-shadow:0 0 12px #8a6cff88;border:1px solid var(--line);background:radial-gradient(ellipse at center,#12303a,#081418);margin:calc(2*var(--p)) 0}
.casino-sheet .casino-choices{display:flex;flex-wrap:wrap;gap:calc(2*var(--p))}
.casino-sheet .casino-choices button{padding:calc(2*var(--p)) calc(4*var(--p))}
.casino-sheet .casino-result{min-height:1.4em;color:#b9a9c9}.casino-sheet .casino-result.good{color:#f3d27a}
.casino-sheet .hand{display:flex;align-items:center;gap:calc(2*var(--p));font-size:calc(9*var(--p))}.casino-sheet .hand small{min-width:7em;color:#9fb3b8}
.casino-sheet .card{display:inline-block;padding:calc(1.5*var(--p)) calc(2.5*var(--p));background:#efe6d2;color:#7a1830;border-radius:4px;font:bold calc(9*var(--p)) var(--font-display)}.casino-sheet .card.dark{color:#1b1830}.casino-sheet .card.back{background:repeating-linear-gradient(45deg,#2c1f4a 0 6px,#3c2a60 6px 12px);color:transparent;min-width:2em}
.casino-sheet h2{color:#f0d9a0;text-shadow:var(--hard)}.casino-sheet p.muted{color:#b9ab8f}
.casino-sheet .casino-bet button{padding:calc(1*var(--p)) calc(3*var(--p));min-width:0;height:auto;line-height:1}
.casino-sheet .card-art{display:inline-block;width:59.5px;height:83px;background:url(/ui/lantern-cards.png) no-repeat;background-size:773.8px 332.3px;border-radius:5px;box-shadow:0 3px 8px #000a}
.casino-sheet .card-art.back{background:url(/ui/lantern-card-back.png) center/cover no-repeat}
/* Familiars: the advice bubble and the B panel */
.familiar-bubble{position:fixed;left:calc(8*var(--p));bottom:calc(58*var(--p));max-width:calc(170*var(--p));display:flex;gap:calc(3*var(--p));align-items:flex-start;padding:calc(3*var(--p)) calc(4*var(--p));background:#0d1420e6;border:1px solid #cbb78b66;box-shadow:0 4px 18px #000a;color:#e7dcc0;font:calc(6.5*var(--p)) var(--font-body);z-index:30;transition:opacity .4s}
.familiar-bubble.hidden{opacity:0;pointer-events:none}.familiar-bubble img{width:calc(20*var(--p));height:calc(20*var(--p));border-radius:50%;border:1px solid #cbb78b88;background:#1b2433}
.familiar-bubble b{display:block;color:#f0d9a0;margin-bottom:calc(1*var(--p))}
.familiar-sheet .familiar-head{display:flex;gap:calc(4*var(--p));align-items:center}.familiar-sheet .familiar-head img{width:calc(34*var(--p));height:calc(34*var(--p));border-radius:50%;border:1px solid #cbb78b88}
.familiar-sheet .familiar-head input{font:calc(11*var(--p)) var(--font-display);background:none;border:0;border-bottom:1px solid #cbb78b55;color:#f0d9a0;width:100%}
.familiar-sheet .familiar-head small{display:block;color:#b9ab8f}.familiar-sheet .familiar-bar{height:calc(3*var(--p));background:#0b141c;margin:calc(3*var(--p)) 0;box-shadow:0 0 0 1px #cbb78b44}.familiar-sheet .familiar-bar i{display:block;height:100%;background:#cbb78b}
.familiar-sheet li.locked{opacity:.45}
.familiar-sheet p.muted{color:#b9ab8f}.familiar-sheet .shop-list li span{color:#e7dcc0}.familiar-sheet .shop-list li small{color:#cbb78b}.familiar-sheet .shop-list li.locked span{color:#8f8a7c}

/* Story pages stay readable on small screens, including long lists of train destinations. */
#dialog-text{max-height:38vh;overflow-y:auto}
#dialog-choices{max-height:28vh;overflow-y:auto}
#journal-memories button{font:inherit;color:inherit;text-align:left;padding:3px 0;border:0;text-decoration:underline}

/* Skill choices retain the journal's parchment, with readable progress in the facing page. */
#journal-skills>button{padding:0;border:0;border-radius:0;background:none;color:var(--parch-ink);font:inherit;text-align:left;text-shadow:none;box-shadow:none}
#journal-skills>button:hover,#journal-skills>button[aria-pressed="true"]{background:#6b3f0f18;outline:1px solid #6b3f0f55;outline-offset:1px}
#journal-skills>button:focus-visible{outline:2px solid #3b546d}
#journal-skills>button.menu-focus{color:var(--parch-ink);text-shadow:none}
.skill-hint{display:block;font-size:calc(6*var(--p));margin-bottom:calc(5*var(--p))}
#skill-detail h4{font:calc(8*var(--p)) var(--font-display);color:var(--parch-ink);margin:calc(9*var(--p)) 0 calc(3*var(--p))}
#skill-detail p{margin:0 0 calc(4*var(--p))}
#skill-detail .skill-progress{color:#6b3f0f;font-weight:bold}
#skill-detail small{display:block;font-size:calc(6*var(--p))}
#dialog-choices button:disabled{opacity:.48;cursor:default}
.item-cell .use-provision{grid-column:2 / 4;text-align:left;padding:calc(2*var(--p)) calc(3*var(--p));font:calc(6*var(--p)) var(--font-body);color:var(--parch-ink);border:1px solid #6b3f0f55;background:#6b3f0f0c;text-shadow:none}
.item-cell .use-provision:hover,.item-cell .use-provision:focus-visible{background:#6b3f0f22;outline:1px solid #6b3f0f}
.book-page .guide-heading{margin-top:calc(10*var(--p))}

#join-error{font:14px/1.4 var(--font-body);color:#f0c29a;min-height:1em;margin:6px 0}
#save-warning{position:fixed;top:0;left:0;right:0;z-index:40;padding:10px;background:#512f1a;color:#fff0d2;text-align:center;font:14px var(--font-body)}
#connection{max-width:min(560px,90vw);color:#f3ecd2}#connection button[hidden]{display:none}

/* Comfort effects are visual only; world and story rules keep running normally. */
body.reduce-motion #haze{animation:none;transform:none}
body.reduce-motion.tipsy #game{animation:none;transform:none}
body.reduce-motion #game{transition:none}
body.reduce-flashes.trip #game,body.reduce-motion.trip #game{animation:none}
body.reduce-flashes.hurt:after{animation:none;box-shadow:inset 0 0 28px #a4494955}
.comfort-haze{color:var(--parch-ink);font:inherit;letter-spacing:0;margin:calc(5*var(--p)) 0}
.comfort-haze span{color:var(--parch-dim);font:inherit}.comfort-haze input{accent-color:#875d26;padding:0;margin-top:calc(5*var(--p))}
.comfort-options{display:grid;gap:calc(3*var(--p));margin:calc(4*var(--p)) 0}
.comfort-options button,#report-button,#report-copy{color:var(--parch-ink);text-shadow:none;font:inherit;text-align:left;padding:calc(3*var(--p));border:1px solid #7a5a2e66;background:#92734412}
.comfort-options button.on{background:#84622835}.comfort-options button.on:before{content:'✓ '}
#report-text{width:100%;box-sizing:border-box;background:#efe2bf;color:var(--parch-ink);font:11px/1.4 monospace;resize:vertical;user-select:text}
#report-details p{font-size:calc(6*var(--p))}

/* Optional journal bearings retain the parchment palette. */
.map-guide{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid #6e54264d}
.map-guide label{display:block;font-size:14px;margin:9px 0 4px}.map-guide select{width:100%;font:15px Caudex,serif;color:#382a18;background:#e7d5ae;border:1px solid #9e8452;padding:6px;border-radius:3px}.map-guide p{margin:7px 0 4px}.map-guide small{display:block;line-height:1.4}
#guide-bearing{display:block;color:#f2e7c6;font-size:12px;line-height:1.25;max-width:235px;text-align:center;text-shadow:0 1px 3px #000;margin:4px auto 0}#guide-bearing:empty{display:none}

.map-guide label{color:#49341b}

#dialog-choices .recipe-choice{padding-top:calc(4*var(--p))!important;padding-bottom:calc(4*var(--p))!important}
#dialog-choices .recipe-choice small{display:block;white-space:pre-line;font:calc(6*var(--p))/1.5 var(--font-body);margin-top:calc(2*var(--p));opacity:.88}

.item-cell.provision-cell{grid-column:1 / -1;padding:calc(3*var(--p)) 0}
.provision-shortcuts{position:absolute;bottom:calc(100% + 10*var(--p));left:50%;transform:translateX(-50%);display:flex;gap:calc(4*var(--p))}
.hotbar .supply-shortcut{width:calc(66*var(--p));min-height:calc(28*var(--p));flex-direction:row;align-items:center;justify-content:center;gap:calc(3*var(--p));padding:0}
.hotbar .supply-shortcut .slot-icon{width:calc(16*var(--p));height:calc(16*var(--p))}
.hotbar .supply-shortcut span{max-width:calc(38*var(--p));font-size:calc(6*var(--p))}
.hotbar .supply-shortcut:disabled{opacity:.48;cursor:default}
.hotbar .supply-shortcut.cooling{opacity:.72}

#focus-status{display:block;color:#d7b9ed;font:calc(6*var(--p)) var(--font-display);text-shadow:0 1px 2px #090818;padding:calc(3*var(--p)) calc(5*var(--p));border-left:calc(2*var(--p)) solid #9678b0;background:#23152ed9;width:max-content}

#shop-counters{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px}
#shop-counters button{color:var(--parch-ink);padding:6px 10px;border:1px solid #725536;font:14px var(--font-display);text-shadow:none}
#shop-counters button[aria-pressed="true"]{background:#674323;color:#fff1ce}
.shop-sheet .shop-list li{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px 0}
.shop-sheet .shop-list li>span,.shop-sheet .shop-list li>small{grid-column:1/-1;overflow-wrap:anywhere}
.shop-sheet .shop-list li>span{font:15px var(--font-display)}
.shop-sheet .shop-list li>small{color:#614a30;font:12px/1.45 var(--font-body)}
.shop-sheet .shop-list li.shop-accepts{display:block;font:12px/1.6 var(--font-body);color:#614a30}
#shop-upgrades button{grid-column:1/-1;justify-self:start}

/* The previous iron-frame fill painted over the parchment and obscured dark shop text. */
.shop-sheet{border-image:url(/ui/frame_parchment.png) 16 fill / calc(16*var(--p)) stretch!important;background:none!important;border-width:calc(16*var(--p))!important;color:var(--parch-ink)}
#shop-view{display:flex;gap:8px;padding-bottom:12px;border-bottom:1px solid #725536}
#shop-view button{color:var(--parch-ink);padding:7px 12px;font:14px var(--font-display);border:1px solid #725536;text-shadow:none}
#shop-view button[aria-pressed="true"]{background:#674323;color:#fff1ce}

/* Small action prompts keep the playfield clear; full supply selection lives in the satchel. */
#combat-actions{position:absolute;left:48px;bottom:235px;display:flex;gap:6px;pointer-events:auto}
#combat-actions button{font:12px Caudex,serif;background:rgba(16,21,25,.85);color:#dec89c;border:1px solid #716245;padding:7px 10px;border-radius:3px}
#combat-actions button:disabled{opacity:.45}#combat-actions button:focus-visible{outline:2px solid #e6cd92}
#supply-choices{display:grid;gap:10px;margin:12px 0}#supply-choices label{display:grid;gap:4px}#supply-choices select{max-width:100%;padding:8px;color:#e8d7b8;background:#202529;border:1px solid #716245}
@media(max-width:900px){#combat-actions{left:18px;bottom:235px;max-width:95vw}#combat-actions button{font-size:11px;padding:6px}}