/* HD-2D skin: navy + gold ornate frames, portrait dialogue, clock, minimap */
:root{--navy:#1c1a30;--navy2:#2a2744;--gold:#d8b46a;--gold2:#f2d898;--cream:#f6ecd6}
#stage{background:#1a1424}
#stage canvas{position:absolute;left:0;top:0;image-rendering:pixelated;cursor:pointer}
#actors,#fx-grain{display:none}
#fx-vignette{display:none}
#game.drift #stage{filter:saturate(.35) contrast(.92) brightness(.95)}
#game.drift-heavy #stage{filter:saturate(.1) contrast(.85) brightness(.85) blur(1px)}

/* ornate frame */
#dialog,.choice,.hud-btn,.menu-btn,#prompt,#toast,#clock,#minimap,#loclabel,.notice{
  background:linear-gradient(180deg,var(--navy2),var(--navy))!important;color:var(--cream)!important;
  box-shadow:inset 0 0 0 2px #0e0c1a,inset 0 0 0 4px var(--gold),inset 0 0 0 5px #6a5430,0 6px 0 rgba(10,6,20,.45)!important;border-radius:2px!important}
#dialog{width:min(1100px,94vw);min-height:150px;padding:30px 36px 28px 36px;bottom:3vh}
#dialog::before,#dialog::after{content:"\25C6";position:absolute;top:-8px;color:var(--gold2);font-size:16px;text-shadow:0 0 6px rgba(255,220,140,.6)}
#dialog::before{left:-6px}#dialog::after{right:-6px}
#dialog.has-portrait{padding-left:150px}
#dialog .portrait{display:none;position:absolute;left:28px;top:26px;width:96px;height:96px;background-size:cover;image-rendering:pixelated;box-shadow:0 0 0 3px #0e0c1a,0 0 0 5px var(--gold)}
#dialog.has-portrait .portrait{display:block}
#dialog .speaker{position:absolute;top:-22px;left:40px;margin:0!important;font-family:"Pixelify Sans",monospace;font-weight:700;letter-spacing:.12em;font-size:20px;text-transform:uppercase;color:var(--gold2)!important;background:linear-gradient(180deg,#2e2a4a,#1c1a30)!important;padding:4px 18px!important;box-shadow:inset 0 0 0 2px #0e0c1a,inset 0 0 0 4px var(--gold)!important}
#dialog.has-portrait .speaker{left:140px}
#dialog .text{font-family:"Pixelify Sans",monospace;font-size:clamp(18px,1.7vw,26px)!important;line-height:1.45;color:var(--cream)!important}
#dialog.ledger,#dialog.letter{background:linear-gradient(180deg,#f8eed6,#ead8b0)!important}
#dialog.ledger .text,#dialog.letter .text{color:#3a2430!important}
#dialog.quiet{background:linear-gradient(180deg,#1a1a22,#0e0e14)!important}
#dialog.quiet .text{color:#9a9aa8!important}
#dialog .advance{color:var(--gold2)}

.choice{padding:13px 20px 13px 46px}
.choice .key{color:var(--gold2)!important}
.choice:hover,.choice:focus-visible{background:linear-gradient(180deg,#3a3560,#24213c)!important}
.choice:hover::before,.choice:focus-visible::before{color:var(--gold2)}
.hud-btn{font-size:15px;padding:8px 14px!important}
.hud-btn .leaf{color:#8ce08a}.hud-btn .flw{color:#f8a0c0}

#clock{position:absolute;right:2vw;top:64px;display:flex;align-items:center;gap:12px;padding:10px 18px;z-index:13;font-family:"Cinzel",serif}
#clock .time{font-size:26px;font-weight:700;color:var(--gold2);letter-spacing:.04em;line-height:1}
#clock .when{font-size:14px;color:var(--cream);font-style:italic}
#clock .sun{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#fff2b0 30%,#ffb040 60%,transparent 70%);box-shadow:0 0 14px #ffb040}
#clock .sun.moon{background:radial-gradient(circle at 60% 40%,transparent 38%,#e8ecff 40%);box-shadow:0 0 12px #aab8ff}
#minimap{position:absolute;right:2vw;top:132px;padding:8px;z-index:13}
#minimap canvas{display:block;width:176px;height:123px;image-rendering:pixelated}
#minimap.hidden{display:none}

#loclabel{left:2vw!important;top:3vh!important;transform:none!important;text-align:left;padding:10px 22px!important;font-family:"Cinzel",serif!important;text-shadow:none!important}
#loclabel .ln{font-size:clamp(20px,2vw,30px);font-weight:700;color:var(--gold2);letter-spacing:.06em}
#loclabel .ls{font-size:14px;color:var(--cream);font-style:italic}
#objective{top:auto!important;bottom:auto;left:2vw;margin-top:0!important;top:calc(3vh + 84px)!important;font-family:"Pixelify Sans",monospace}
#objective::before{content:"Next \2014 ";color:var(--gold2)}
#prompt{padding:6px 14px 6px 8px!important;font-size:16px}
#prompt .key{background:var(--gold)!important;color:#1c1a30!important;border-radius:2px}
.emote{background:var(--cream);color:#e0446a;box-shadow:0 0 0 3px #1c1a30,0 0 0 5px var(--gold)}
#caption{display:none}
#hud{top:16px!important}
#controls-hint{font-family:"Pixelify Sans",monospace}

#overlay{background:rgba(20,16,36,.78)}
#overlay[data-kind=title],#overlay[data-kind=note]{background:radial-gradient(ellipse at 50% 50%,rgba(20,16,36,.55),rgba(20,16,36,.1) 75%)}
.screen h1{font-family:"Cinzel",serif;font-weight:700;color:var(--gold2);text-shadow:0 4px 0 #6a3a2a,0 8px 24px rgba(0,0,0,.6)}
.screen h1 .amp{color:#8ce08a}
.screen h2{font-family:"Cinzel",serif;color:var(--gold2);text-shadow:0 3px 0 #3a2430}
.menu-btn{font-family:"Pixelify Sans",monospace}
.menu-btn.primary{background:linear-gradient(180deg,#5a4020,#3a2810)!important;color:var(--gold2)!important}

/* chapter flow: compass, goal lists, journal */
#compass{position:absolute;width:34px;height:34px;z-index:14;opacity:0;transition:opacity .3s;pointer-events:none}
#compass.show{opacity:1}
#compass::before{content:"";position:absolute;inset:0;background:var(--gold2);clip-path:polygon(100% 50%,0 0,22% 50%,0 100%);filter:drop-shadow(0 0 6px rgba(255,220,140,.9))}
#compass::after{content:attr(data-dist);position:absolute;left:50%;top:40px;transform:translateX(-50%);white-space:nowrap;font:13px "Pixelify Sans",monospace;color:var(--cream);text-shadow:0 2px 4px #000}
.goal-list{margin:18px auto 0;max-width:520px;text-align:left;background:rgba(20,16,36,.55);box-shadow:inset 0 0 0 2px var(--gold);padding:14px 20px}
.goal-list .gl-h{font-family:Cinzel,serif;color:var(--gold2);letter-spacing:.12em;font-size:13px;text-transform:uppercase;margin-bottom:6px}
.goal-list .gl-i{font-family:"Pixelify Sans",monospace;color:var(--cream);line-height:1.8}
.book.journal .jc{padding:6px 0;border-bottom:1px dashed #d8c4a0;font-family:"Pixelify Sans",monospace;color:#6a5a50}
.book.journal .jc.done{color:#3a2a30}.book.journal .jc.now{color:#8a3a1e}.book.journal .jc.later{opacity:.5}
.book.journal .jg{margin-left:14px;font-size:15px;color:#5a4a44}.book.journal .jg.ok{color:#3a7a44}.book.journal .jg.cur{color:#c0501e;font-weight:700}
.jstats{margin-top:18px;font-family:"Pixelify Sans",monospace;color:#5a3a2a}
#objective{font-size:18px!important;background:linear-gradient(180deg,rgba(42,39,68,.92),rgba(28,26,48,.92));padding:8px 16px;box-shadow:inset 0 0 0 2px var(--gold)}
#objective::before{content:"Next \2014 "}

#stage canvas{cursor:pointer}
#loclabel{top:3vh!important}
#objective{left:2vw!important;top:calc(3vh + 78px)!important;margin:0!important}