:root{ --ink:#2a2233; --paper:#fffaf0; --green:#2f8f4e; --gold:#f6d04d; --red:#e0574f; --blue:#3d7fd9; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; background:#1d1830; color:#fff; font-family:Verdana, "Trebuchet MS", Tahoma, sans-serif; overflow:hidden; overscroll-behavior:none; }
body{ touch-action:manipulation; -webkit-user-select:none; user-select:none; }
button{ font:inherit; cursor:pointer; }
[hidden]{ display:none !important; }
#app{ height:100%; display:flex; flex-direction:column; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#topbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; background:#2a2233; border-bottom:3px solid #120e1f; }
.tb-title{ font-weight:bold; color:var(--gold); letter-spacing:1px; text-shadow:2px 2px 0 #000; }
.tb-right{ display:flex; gap:6px; }
.tb-btn{ background:#4b3d5e; color:#fff; border:2px solid #120e1f; box-shadow:inset -2px -2px 0 #352a45, inset 2px 2px 0 #6d5a85; padding:5px 10px; font-size:14px; text-decoration:none; border-radius:0; }
.tb-btn:active{ transform:translateY(1px); }
#stage{ flex:1; min-height:0; display:flex; align-items:stretch; justify-content:center; gap:8px; padding:8px; }
#frame-box{ flex:1; min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; }
#frame{ position:relative; width:480px; height:320px; background:#000; border:4px solid #120e1f; box-shadow:0 0 0 4px #4b3d5e, 0 10px 30px rgba(0,0,0,.5); overflow:hidden; font-size:12px; }
#screen{ width:100%; height:100%; display:block; image-rendering:pixelated; image-rendering:crisp-edges; }

/* touch controls */
.touch{ display:none; }
@media (pointer:coarse){ .touch{ display:flex; } }
.pad-side{ flex-direction:column; align-items:center; justify-content:center; gap:16px; width:150px; flex:none; }
#dpad{ position:relative; width:140px; height:140px; touch-action:none; }
#dpad .dp{ position:absolute; background:#4b3d5e; border:3px solid #120e1f; box-shadow:inset -3px -3px 0 #352a45, inset 3px 3px 0 #6d5a85; }
#dpad .up{ left:47px; top:0; width:46px; height:50px; } #dpad .down{ left:47px; bottom:0; width:46px; height:50px; }
#dpad .left{ top:47px; left:0; width:50px; height:46px; } #dpad .right{ top:47px; right:0; width:50px; height:46px; }
#dpad .mid{ left:44px; top:44px; width:52px; height:52px; box-shadow:none; border-color:#4b3d5e; }
#dpad[data-dir="up"] .up, #dpad[data-dir="down"] .down, #dpad[data-dir="left"] .left, #dpad[data-dir="right"] .right{ background:#7a6898; }
.abtns{ display:flex; gap:14px; align-items:center; }
.pbtn{ touch-action:none; border:3px solid #120e1f; color:#fff; font-weight:bold; }
.pbtn.a, .pbtn.b{ width:62px; height:62px; border-radius:50%; font-size:22px; }
.pbtn.a{ background:var(--red); box-shadow:inset -4px -4px 0 #a83a33; margin-top:-26px; }
.pbtn.b{ background:var(--blue); box-shadow:inset -4px -4px 0 #2a5ea8; margin-top:20px; }
.pbtn.menu{ background:#4b3d5e; padding:8px 16px; font-size:14px; border-radius:20px; }
.pbtn.down{ transform:translateY(2px); filter:brightness(1.2); }
@media (pointer:coarse) and (orientation:portrait){
  #stage{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr auto; grid-template-areas:"f f" "l r"; }
  #frame-box{ grid-area:f; align-items:flex-end; } #pad-left{ grid-area:l; width:auto; } #pad-right{ grid-area:r; width:auto; }
}

/* in-frame UI (sizes in em; JS sets frame font-size from scale) */
#toast{ position:absolute; top:2.4em; left:50%; transform:translate(-50%,-30%); opacity:0; visibility:hidden; background:var(--paper); color:var(--ink); border:.25em solid var(--ink); padding:.25em .9em; font-weight:bold; transition:transform .25s, opacity .25s, visibility .25s; white-space:nowrap; }
#toast.show{ transform:translate(-50%,0); opacity:1; visibility:visible; }
#hud-world{ position:absolute; top:.4em; left:.4em; background:rgba(42,34,51,.85); border:.18em solid #120e1f; padding:.2em .5em; font-size:.75em; display:flex; gap:.5em; align-items:center; }
#hud-name{ font-weight:bold; color:var(--gold); }
.hud-c{ display:flex; align-items:center; gap:.3em; } .lbl{ font-size:.8em; opacity:.9; }
.barwrap{ display:inline-block; width:5em; height:.6em; background:#3a3046; border:.12em solid #120e1f; position:relative; }
.bar{ display:block; height:100%; width:100%; background:#5fd36a; transition:width .5s ease; }
.bar.mid{ background:#f6c445; } .bar.low{ background:#e0574f; }
.bar.courage{ background:#ff7fae; } .bar.courage.low{ background:#e0574f; }
.hud-q b{ color:var(--gold); }

#hud-battle .bbox{ position:absolute; background:var(--paper); color:var(--ink); border:.25em solid var(--ink); box-shadow:inset -.2em -.2em 0 #e6dcc6; padding:.25em .5em; width:46%; font-size:.85em; }
#hud-battle .enemy{ top:.5em; left:.5em; }
#hud-battle .player{ top:16.5%; left:.5em; width:40%; }
.brow{ display:flex; align-items:center; justify-content:space-between; gap:.4em; margin:.1em 0; }
.bbox .barwrap{ flex:1; height:.7em; }
.type{ color:#fff; font-size:.75em; padding:.05em .4em; border:.12em solid var(--ink); font-weight:bold; }
.xpwrap{ flex:1; height:.35em; background:#d8d0c0; position:relative; } #bp-xp{ display:block; height:100%; background:var(--blue); transition:width .5s; }
#bp-num{ font-size:.85em; font-weight:bold; }

#dialog{ position:absolute; left:.35em; right:.35em; bottom:.35em; height:32%; background:var(--paper); color:var(--ink); border:.3em solid var(--ink); box-shadow:inset 0 0 0 .2em #d9c79b; padding:.5em .8em; line-height:1.35; cursor:pointer; }
#dlg-name{ position:absolute; top:-1.6em; left:.5em; background:var(--green); color:#fff; border:.22em solid var(--ink); padding:.1em .6em; font-weight:bold; font-size:.9em; }
#dlg-text{ font-size:1em; }
#dlg-next{ position:absolute; right:.6em; bottom:.3em; animation:bob .6s infinite alternate; color:var(--red); }
@keyframes bob{ to{ transform:translateY(.2em); } }

.optlist{ display:flex; flex-direction:column; gap:.25em; }
.opt{ text-align:left; background:var(--paper); color:var(--ink); border:.2em solid var(--ink); padding:.35em .6em; font-size:.9em; line-height:1.25; border-radius:0; }
.opt.hi{ background:#ffe680; box-shadow:inset .35em 0 0 var(--red); }
.opt:hover{ background:#fff1b8; }
#choices{ position:absolute; right:.4em; left:12%; bottom:calc(32% + .7em); max-height:62%; overflow:auto; padding:.2em; }
#choices .opt{ box-shadow:.15em .15em 0 rgba(0,0,0,.4); }
#choices .opt.hi{ box-shadow:inset .35em 0 0 var(--red), .15em .15em 0 rgba(0,0,0,.4); }
#bmenu{ position:absolute; right:.8em; bottom:.8em; width:30%; height:calc(32% - .9em); justify-content:space-between; }
#bmenu .opt{ flex:1; font-weight:bold; text-align:center; padding:.1em; }
#bskills{ position:absolute; left:.35em; right:.35em; bottom:.35em; height:34%; background:var(--paper); border:.3em solid var(--ink); padding:.3em; display:grid; grid-template-columns:1fr 1fr 1fr; grid-auto-rows:min-content; gap:.25em; overflow:auto; }
#bskills .opt{ font-weight:bold; padding:.2em .4em; font-size:.8em; display:flex; align-items:center; gap:.3em; }
.dot{ display:inline-block; width:.7em; height:.7em; border:.12em solid var(--ink); flex:none; background:#ccc; }
#bdesc{ position:absolute; left:.35em; right:.35em; bottom:calc(34% + .3em); background:#2a2233; color:#fff; border:.2em solid #120e1f; padding:.3em .6em; font-size:.8em; line-height:1.3; }

.panel{ position:absolute; inset:6% 10%; background:var(--paper); color:var(--ink); border:.3em solid var(--ink); box-shadow:0 0 0 .2em #fff, .4em .4em 0 rgba(0,0,0,.5); padding:.6em .9em; display:flex; flex-direction:column; gap:.4em; }
.panel h2{ margin:0; font-size:1.2em; color:var(--green); }
#menu-body{ flex:1; overflow:auto; font-size:.85em; line-height:1.4; }
#menu-body:empty{ display:none; }
#menu-body p{ margin:.3em 0; }
#menu-list{ flex:none; }
#menu-body:empty + #menu-list{ flex:1; overflow:auto; }
.book, .log{ list-style:none; padding:0; margin:0; }
.book li, .log li{ border-bottom:.12em dashed #d9c79b; padding:.35em 0; }
.book .locked{ opacity:.45; } .tag{ font-size:.75em; background:var(--green); color:#fff; padding:0 .3em; }
.log li.done{ color:#2f7a3a; }

.screen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em; text-align:center; padding:1em; }
#title{ background:linear-gradient(rgba(29,24,48,.2), rgba(29,24,48,.6)); }
.logo{ margin:0; font-size:3em; line-height:1; letter-spacing:.05em; color:var(--gold); text-shadow:.08em .08em 0 #b8572b, .14em .14em 0 var(--ink); }
.logo span:last-child{ color:#fff; text-shadow:.08em .08em 0 var(--green), .14em .14em 0 var(--ink); }
.sub{ margin:0 0 .5em; font-size:.9em; text-shadow:1px 1px 0 #000; max-width:80%; }
#title-menu{ min-width:55%; } #title-menu .opt{ text-align:center; font-weight:bold; font-size:1.05em; }
.hint{ font-size:.7em; opacity:.85; margin:.2em 0 0; text-shadow:1px 1px 0 #000; }
#select{ background:rgba(29,24,48,.92); }
#select h2{ margin:0; color:var(--gold); font-size:1.3em; }
#looks{ display:flex; gap:.4em; flex-wrap:wrap; justify-content:center; }
.look{ background:#4b3d5e; border:.2em solid #120e1f; padding:.2em; }
.look canvas{ width:3.4em; height:3.4em; image-rendering:pixelated; display:block; }
.look.hi{ background:var(--gold); box-shadow:0 0 0 .2em #fff; }
#select label{ font-size:.85em; }
#name-input{ font:inherit; font-size:1.1em; padding:.3em .5em; width:12em; text-align:center; border:.2em solid var(--ink); background:var(--paper); color:var(--ink); -webkit-user-select:text; user-select:text; }
.err{ color:#ff9a9a; margin:0; font-size:.8em; }
.big{ background:var(--red); color:#fff; border:.2em solid var(--ink); box-shadow:inset -.2em -.2em 0 #a83a33; padding:.35em 1.4em; font-weight:bold; font-size:1.1em; }
.cert{ background:rgba(29,24,48,.85); }
.cert-inner{ background:#fffaf0; color:var(--ink); border:.4em double var(--green); outline:.25em solid var(--gold); padding:.6em 1.2em; max-width:92%; max-height:96%; overflow:auto; }
.cert-inner p{ margin:.2em 0; font-size:.8em; } .cert-inner h2{ margin:.1em 0; color:var(--green); }
.cert-top{ font-weight:bold; letter-spacing:.1em; text-transform:uppercase; }
#cert-sprite{ width:3em; height:3em; image-rendering:pixelated; }
.cert-name{ font-size:1.5em !important; font-weight:bold; color:var(--red); }
.cert-skills{ font-size:.7em !important; color:#555; } .cert-stats{ font-size:.7em !important; }
.cert-btns{ display:flex; gap:.6em; justify-content:center; margin-top:.4em; }
.cert-btns button:not(.big){ background:var(--paper); border:.2em solid var(--ink); padding:.3em 1em; }
@media print{
  body{ background:#fff; } #topbar, .touch, .cert-btns, #screen{ display:none !important; }
  #frame{ border:none; box-shadow:none; width:100% !important; height:auto !important; font-size:18px !important; background:#fff; }
  #ending{ position:static; background:#fff; }
}

/* v2: read-aloud, calm bar, journal */
.bar.calm{ background:linear-gradient(90deg,#7fd3f5,#7be07a); }
.calmnum{ font-size:.75em; font-weight:bold; color:#2f7a3a; }
#dlg-speak{ position:absolute; right:.4em; top:.3em; background:#fff; border:.15em solid var(--ink); font-size:.85em; line-height:1; padding:.15em .3em; cursor:pointer; }
#dlg-speak:hover{ background:#ffe680; }
.tb-btn:disabled{ opacity:.5; cursor:not-allowed; }
.tb-btn[aria-pressed="true"]#btn-tts{ background:var(--green); }
.tlink{ color:#fff; }
.opt:focus-visible, .tb-btn:focus-visible{ outline:3px dashed var(--blue); outline-offset:2px; }
.jentry{ border-bottom:.15em dashed #d9c79b; padding:.2em 0 .5em; }
.jentry h3{ margin:.3em 0 .2em; font-size:1.05em; color:var(--green); }
.jentry p{ margin:.2em 0; } .jentry ol{ margin:.1em 0 .3em; padding-left:1.4em; }
.jentry li.good i{ color:#2f7a3a; font-style:normal; font-weight:bold; } .jentry li.meh i{ color:#8a6a2a; font-style:normal; }
@media (max-width:900px){ #btn-replay{ display:none; } }
#menu-list.row{ flex-direction:row; flex-wrap:wrap; } #menu-list.row .opt{ flex:1; text-align:center; white-space:nowrap; }