/* Pixel-art UI skin — cute, chunky, warm */
:root{--px-ink:#3a2430;--px-paper:#fff4e2;--px-panel:#2e1f2a;--px-edge:#ffcf6a;--px-accent:#ff8f6a;--px-mint:#7fd08a}
html,body,button{font-family:"Pixelify Sans","Courier New",monospace}
#stage canvas{image-rendering:pixelated;image-rendering:crisp-edges}
#fx-grain{display:none}
#fx-vignette{background:radial-gradient(ellipse at 50% 45%,transparent 62%,rgba(30,10,30,.28) 100%)}

/* pixel frame helper: stepped corners via box-shadow */
.px,#dialog,.choice,.hud-btn,.menu-btn,#prompt,#toast,.book,.notice{
  border-radius:0!important;border:none!important;
  box-shadow:0 -4px 0 0 var(--px-edge),0 4px 0 0 var(--px-edge),-4px 0 0 0 var(--px-edge),4px 0 0 0 var(--px-edge),0 0 0 4px var(--px-panel),6px 10px 0 2px rgba(40,10,30,.35)!important}

#dialog{background:var(--px-panel);padding:20px 28px 24px;min-height:140px;width:min(960px,90vw)}
#dialog .speaker{font-family:"Pixelify Sans",monospace;font-weight:700;font-size:18px;letter-spacing:.06em;color:var(--px-edge);display:inline-block;background:var(--px-accent);color:#fff;padding:2px 10px;margin:-36px 0 10px -8px;box-shadow:0 0 0 3px var(--px-panel)}
#dialog .speaker:empty{display:none}
#dialog .text{font-size:clamp(17px,1.5vw,22px);line-height:1.5;color:#fff4e2}
#dialog .advance{color:var(--px-edge);animation:hop .6s steps(2) infinite}
@keyframes hop{50%{transform:translateY(-4px)}}
#dialog.vo .text{color:#ffe2c4}
#dialog.ledger,#dialog.letter{background:var(--px-paper)}
#dialog.ledger .text,#dialog.letter .text{color:var(--px-ink);font-family:"Pixelify Sans",monospace}
#dialog.ledger .speaker,#dialog.letter .speaker{background:#8a5a3e}
#dialog.quiet{background:#1a1a24}
#dialog.quiet .speaker{background:#5a5a6a;font-size:12px}
#dialog.quiet .text{color:#a8a8b8}
#dialog.wire{background:#1c1a14}
#dialog.wire .speaker{background:#3a6a5a}
#dialog.narr .text{color:#e8d8c8}

#choices{gap:14px}
.choice{background:var(--px-panel);color:#fff4e2;padding:12px 18px 12px 40px;position:relative;font-size:clamp(15px,1.3vw,19px)}
.choice .key{position:absolute;left:12px;color:var(--px-edge)}
.choice:hover,.choice:focus-visible{background:#4a2f3e;transform:translateX(6px)}
.choice:hover::before,.choice:focus-visible::before{content:"\25B6";position:absolute;left:-26px;color:var(--px-edge);animation:hop .5s steps(2) infinite}
.choice.silent{color:#c8b8c0}
.timer{height:6px;background:#2e1f2a;box-shadow:0 0 0 2px var(--px-edge)}
.timer span{background:var(--px-accent)}

.hud-btn{background:var(--px-panel);padding:6px 12px;font-size:15px;color:#fff4e2;margin:4px}
.hud-btn:hover{background:#4a2f3e}
.hud-btn svg{color:var(--px-edge)}
#notch-count{color:var(--px-edge)}
.clover-count .leaf{color:var(--px-mint);font-size:18px}
#hud{gap:6px}

#prompt{background:var(--px-panel);padding:5px 12px 5px 6px;font-size:15px}
#prompt .key{border-radius:0;background:var(--px-edge);color:var(--px-ink)}
#objective{font-style:normal;font-size:17px;color:#fff4e2;text-shadow:2px 2px 0 #3a2430}
#objective .dot{border-radius:0;width:10px;height:10px}
#loclabel{font-family:"Pixelify Sans",monospace;font-weight:700;font-size:clamp(22px,2.4vw,34px);color:#fff4e2;text-shadow:3px 3px 0 #e0644a,6px 6px 0 #3a2430}
#toast{background:var(--px-panel);color:#fff4e2;font-size:16px}
#controls-hint{font-size:14px;color:#fff4e2;text-shadow:2px 2px 0 #3a2430}
#caption .cap-place{font-family:"Pixelify Sans",monospace;font-weight:700;color:#fff4e2;text-shadow:2px 2px 0 #e0644a,4px 4px 0 #3a2430}
#caption .cap-date{font-style:normal;color:#ffe2c4;text-shadow:2px 2px 0 #3a2430}

.emote{position:absolute;transform:translate(-50%,-100%);font-family:"Pixelify Sans",monospace;font-weight:700;font-size:22px;color:#ff5a7a;background:#fff4e2;padding:2px 8px;pointer-events:none;z-index:12;box-shadow:0 0 0 3px #3a2430,3px 3px 0 3px rgba(40,10,30,.3)}
.emote::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-4px;border:4px solid transparent;border-top-color:#3a2430}

#overlay{background:rgba(46,31,42,.82)}
#overlay[data-kind=title],#overlay[data-kind=note]{background:rgba(46,31,42,.25)}
.screen h1{font-family:"Pixelify Sans",monospace;font-weight:700;font-size:clamp(48px,8vw,104px);color:#fff4e2;letter-spacing:.02em;text-shadow:5px 5px 0 #e0644a,10px 10px 0 #3a2430}
.screen h1 .amp{color:var(--px-mint)}
.screen h2{font-family:"Pixelify Sans",monospace;font-weight:700;color:#fff4e2;text-shadow:3px 3px 0 #e0644a,6px 6px 0 #3a2430}
.screen .sub{font-style:normal;color:#ffe2c4;text-shadow:2px 2px 0 #3a2430}
.screen p{text-shadow:2px 2px 0 #3a2430}
.menu-btn{background:var(--px-panel);color:#fff4e2;font-size:18px;margin:6px}
.menu-btn.primary{background:var(--px-accent);color:#fff}
.menu-btn:hover{background:#4a2f3e}
.menu-btn.primary:hover{background:#ff7a50}
.fine{color:#ffe2c4!important}
.book{border:none;font-family:"Pixelify Sans",monospace;background:var(--px-paper)}
.book .page{border-right:4px dashed #e8c8a8}
.page h3{font-family:"Pixelify Sans",monospace;font-weight:700;color:#e0644a}
.ledger-pick .choice{background:#fff;color:var(--px-ink);font-family:"Pixelify Sans",monospace}
.ledger-pick .choice:hover{background:#ffe8c8}
.notice{background:#fff4e2;color:var(--px-ink);font-style:normal}
.ride-bar{border-radius:0;height:10px;background:#2e1f2a;box-shadow:0 0 0 3px var(--px-edge)}
.ride-bar span{background:var(--px-mint)}
.ride-hint{font-style:normal;color:#fff4e2;text-shadow:2px 2px 0 #3a2430}
.chapter-card .num{color:var(--px-edge)}