[hidden] { display: none !important; }
:root { --fs: 16px; --sfs: 12px; --ink: #f4efe2; --bg: #151a2c; --panel: #1f2640; --edge: #e8c547; --accent: #e8c547; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: var(--fs);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior: none; }
#app { position: fixed; inset: 0; }
#screen { position: absolute; background: #000; box-shadow: 0 0 0 3px #0b0e19, 0 8px 30px rgba(0,0,0,.5); border-radius: 4px; overflow: hidden; }
#cv { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }

/* HUD */
#hud { position: absolute; pointer-events: none; font-size: var(--sfs); line-height: 1.3; z-index: 3; }
#hud #hudObj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.portrait #hud { font-size: calc(var(--fs) * .9); }
body.portrait #hud #hudObj { white-space: normal; display: block; border: 2px solid #2f3a5a; }
body.portrait #hud #hudObj::before { content: "▸ Goal: "; color: var(--accent); font-weight: 700; }
body.portrait #hudDay { border: 2px solid #2f3a5a; border-bottom: 0; }
#hudDay { display: inline-block; background: rgba(15,18,32,.82); padding: 2px 8px; border-radius: 4px 4px 0 0; color: var(--accent); font-weight: 700; }
#hudObj { background: rgba(15,18,32,.82); padding: 3px 8px; border-radius: 0 4px 4px 4px; display: inline-block; max-width: 100%; }
#menuBtn { position: absolute; right: 6px; top: 6px; width: 36px; height: 32px; border-radius: 6px; border: 2px solid #0b0e19; background: rgba(15,18,32,.85); color: var(--ink); font-size: 18px; cursor: pointer; padding: 0; }
body.haspad #menuBtn { display: none; }

/* Toast */
#toast { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 20px); background: #fff6d8; color: #222; border: 2px solid #222; padding: 6px 10px; border-radius: 6px; font-size: var(--sfs); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: 90%; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
body.reduced #toast { transition: none; }

/* UI panel (dialogue + menus) */
#ui { position: absolute; display: flex; flex-direction: column-reverse; gap: 6px; pointer-events: none; z-index: 5; }
body.portrait #ui { flex-direction: column; justify-content: flex-start; }
#ui > * { pointer-events: auto; }
#dialog { position: relative; background: #fbf6e9; color: #1d1a22; border: 3px solid #1d1a22; box-shadow: inset 0 0 0 2px #c9b98f, 0 4px 0 rgba(0,0,0,.35); border-radius: 6px; padding: 10px 12px 14px; line-height: 1.4; min-height: 4.4em; cursor: pointer; overflow: auto; }
#dname { display: inline-block; background: #2f3a5a; color: #fff; font-weight: 700; padding: 1px 8px; border-radius: 4px; margin-bottom: 4px; font-size: .9em; }
#dtext { white-space: pre-wrap; }
#dmore { position: absolute; right: 10px; bottom: 2px; font-size: .8em; animation: bob 0.8s steps(2) infinite; }
body.reduced #dmore { animation: none; }
@keyframes bob { 50% { transform: translateY(2px); } }

.menu { background: var(--panel); border: 3px solid #0b0e19; box-shadow: inset 0 0 0 2px #3a4670, 0 4px 0 rgba(0,0,0,.35); border-radius: 6px; padding: 8px; overflow: auto; }
.menu[hidden] { display: none; }
.mtitle { color: var(--accent); font-weight: 700; margin: 2px 4px 8px; }
.mtext { margin: 0 4px 8px; line-height: 1.45; user-select: text; }
.mlist { display: grid; gap: 4px; }
.mitem { font: inherit; color: var(--ink); background: transparent; border: 2px solid transparent; border-radius: 4px; text-align: left; padding: 7px 8px 7px 22px; position: relative; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; min-height: 40px; align-items: center; }
.mitem .mr { opacity: .8; font-size: .85em; white-space: nowrap; }
.mitem.sel { border-color: var(--accent); background: rgba(232,197,71,.12); }
.mitem.sel::before { content: "▶"; position: absolute; left: 6px; color: var(--accent); font-size: .8em; }
.mitem.dis { opacity: .4; }
.mitem:hover { background: rgba(255,255,255,.06); }
.mhint { margin: 8px 4px 2px; font-size: .85em; opacity: .85; min-height: 2.6em; line-height: 1.35; }
.menu.ask { align-self: flex-end; min-width: 50%; }
body.portrait .menu.ask { align-self: stretch; }
.menu.center { max-height: 100%; }
.info ul, .menu ul { margin: 0; padding-left: 1.1em; }
.info li { margin-bottom: 6px; }
.mv li.locked { opacity: .55; }
.mv i, .ql i { opacity: .8; }
.ql li.done { opacity: .7; }
.stats div { margin-bottom: 3px; }
.qmain { margin-top: 0; }

/* Battle HUD */
#bhud { position: absolute; left: 4px; right: 4px; top: 4px; display: flex; justify-content: space-between; gap: 6px; font-size: var(--sfs); pointer-events: none; }
.bp { background: rgba(15,18,32,.88); border: 2px solid #0b0e19; border-radius: 5px; padding: 3px 6px; width: 49%; }
.bn { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb { height: 7px; background: #3a3f55; border-radius: 3px; overflow: hidden; flex: 1; margin-top: 2px; }
.bb i { display: block; height: 100%; width: 100%; transition: width .35s; }
body.reduced .bb i { transition: none; }
.chaos { background: linear-gradient(90deg, #e05b5b, #ff9a5a); }
.hp { background: linear-gradient(90deg, #4fbf6a, #9be07a); }
.en { background: linear-gradient(90deg, #4f8fe0, #8fc4ff); }
.bs { color: #ffb0a0; min-height: 1em; font-size: .9em; }
.bme .row { display: flex; align-items: center; gap: 4px; }
.bme .row span { width: 2.6em; opacity: .8; font-size: .85em; }
.bme .row b { font-weight: 400; font-size: .85em; min-width: 3.6em; text-align: right; }
#bhud.low .bme { border-color: #e05b5b; }

/* Overlays */
#overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
#overlay[hidden] { display: none; }
.overlay.title { background: radial-gradient(ellipse at center, rgba(21,26,44,.55), rgba(21,26,44,.95)); }
.overlay.title.dim .tt { visibility: hidden; }
.overlay.daycard, .overlay.endcard { background: rgba(12,15,28,.94); }
.tt, .dc, .ec { text-align: center; max-width: 520px; width: 100%; }
.tt h1 { font-size: calc(var(--fs) * 2.4); margin: 4px 0 4px; letter-spacing: 2px; color: var(--accent); text-shadow: 3px 3px 0 #8a3b1f, 6px 6px 0 #0b0e19; line-height: 1.05; }
.tt h1 span { display: block; font-size: .5em; color: var(--ink); letter-spacing: 6px; text-shadow: 2px 2px 0 #0b0e19; margin-top: 4px; }
.tt h2, .dc h2, .ec h2 { color: var(--accent); margin: 4px 0 8px; }
.dc h2 { font-size: calc(var(--fs) * 2.2); }
.dcw { opacity: .75; margin: 0; letter-spacing: 1px; font-size: .85em; text-transform: uppercase; }
.dcs { font-weight: 700; margin: 0 0 12px; }
.dct, .tag { opacity: .9; line-height: 1.45; }
.tmenu { max-width: 360px; margin: 14px auto 8px; text-align: left; }
.foot { opacity: .5; font-size: .7em; margin-top: 10px; }
button.big { font: inherit; font-weight: 700; padding: 12px 22px; border-radius: 6px; border: 3px solid #0b0e19; background: var(--accent); color: #1d1a22; cursor: pointer; margin: 8px 4px 0; box-shadow: 0 4px 0 #8a6f20; }
button.big.ghost { background: #2f3a5a; color: var(--ink); box-shadow: 0 4px 0 #0b0e19; }
button.big.sel { outline: 3px solid #fff; outline-offset: 2px; }
#nameIn { font: inherit; font-size: 1.2em; width: 100%; max-width: 320px; padding: 10px 12px; border-radius: 6px; border: 3px solid #0b0e19; background: #fbf6e9; color: #1d1a22; text-align: center; -webkit-user-select: text; user-select: text; }
.report { background: #fbf6e9; color: #1d1a22; border: 3px solid #0b0e19; border-radius: 6px; text-align: left; padding: 12px 14px; margin: 10px 0; box-shadow: 0 5px 0 rgba(0,0,0,.4); }
.rh { display: flex; justify-content: space-between; align-items: center; font-weight: 700; border-bottom: 2px solid #c9b98f; padding-bottom: 6px; margin-bottom: 8px; }
.grade { background: #2f3a5a; color: #e8c547; font-size: 1.6em; padding: 2px 12px; border-radius: 6px; }
.report dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 8px; font-size: .9em; }
.report dt { opacity: .7; } .report dd { margin: 0; font-weight: 700; }
.comment { font-style: italic; line-height: 1.45; margin: 0; font-size: .92em; }
.soon { background: #2f3a5a; border: 2px dashed var(--accent); border-radius: 6px; padding: 10px; line-height: 1.45; font-size: .9em; }

/* Touch pad */
#pad { position: absolute; left: 0; right: 0; bottom: 0; display: none; padding: 10px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); touch-action: none; z-index: 4; }
body.haspad #pad { display: flex; align-items: center; justify-content: space-between; }
#dpad { position: relative; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #2a3252 0%, #1f2640 70%); border: 3px solid #0b0e19; touch-action: none; flex: none; }
#dpad span { position: absolute; color: #8b93b5; font-size: 18px; pointer-events: none; }
#dpad .u { top: 10px; left: 50%; transform: translateX(-50%); } #dpad .d { bottom: 10px; left: 50%; transform: translateX(-50%); }
#dpad .l { left: 12px; top: 50%; transform: translateY(-50%); } #dpad .r { right: 12px; top: 50%; transform: translateY(-50%); }
#dpad .c { left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%,-50%); background: #151a2c; border-radius: 50%; }
#dpad[data-dir="up"] .u, #dpad[data-dir="down"] .d, #dpad[data-dir="left"] .l, #dpad[data-dir="right"] .r { color: var(--accent); }
#ab { position: relative; width: 150px; height: 130px; flex: none; }
#ab button, #mid button { font: inherit; font-weight: 700; border: 3px solid #0b0e19; color: #1d1a22; touch-action: none; cursor: pointer; }
#btnA, #btnB { position: absolute; width: 66px; height: 66px; border-radius: 50%; font-size: 22px; box-shadow: 0 4px 0 #0b0e19; }
#btnA { right: 0; top: 4px; background: var(--accent); }
#btnB { left: 0; bottom: 4px; background: #e07a5f; }
#ab button.on, #mid button.on { transform: translateY(3px); box-shadow: 0 1px 0 #0b0e19; }
#mid { flex: 1; display: flex; justify-content: center; align-self: flex-end; padding-bottom: 6px; }
#btnMenu { background: #8b93b5; border-radius: 14px; padding: 6px 14px; font-size: 12px; box-shadow: 0 3px 0 #0b0e19; }
/* Landscape phones: pad either side of the screen */
body.haspad:not(.portrait) #pad { top: 0; align-items: flex-end; pointer-events: none; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
body.haspad:not(.portrait) #pad > * { pointer-events: auto; }
body.haspad:not(.portrait) #dpad { width: 140px; height: 140px; }
body.haspad:not(.portrait) #ab { width: 140px; }
body.haspad:not(.portrait) #mid { position: absolute; right: 16px; top: 12px; align-self: auto; flex: none; }
@media (max-height: 360px) { #dpad, body.haspad:not(.portrait) #dpad { width: 120px; height: 120px; } #btnA, #btnB { width: 56px; height: 56px; } }

/* Big menus (pause, options, info) take the whole top area on portrait phones */
body.portrait.bigmenu #ui { top: 8px !important; max-height: var(--bigmax) !important; z-index: 6; }
body.portrait.bigmenu #ui .menu { max-height: var(--bigmax); }
body.portrait.bigmenu #hud { visibility: hidden; }
#ui > .menu, #ui > #dialog { min-height: 0; flex-shrink: 1; }
#ui > #dialog { flex-shrink: 0; }