:root {
  --ink: #3b2b2b;
  --paper: #fffaf0;
  --paper2: #fff3dc;
  --accent: #ff7a2a;
  --accent2: #ffd23a;
  --green: #3fb05a;
  --red: #e5395a;
  --blue: #3a8ee8;
  --purple: #7a5ad8;
  --shadow: rgba(40, 20, 30, 0.28);
  --padH: min(38vh, 330px);
  --font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Yu Gothic UI', 'Meiryo', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2b1d3a; color: var(--ink); font-family: var(--font); }
body { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

#app { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
#stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #000; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------- HUD ---------------- */
#hud { position: absolute; left: 0; right: 0; top: 0; padding: 8px 10px; pointer-events: none; z-index: 5; transition: opacity .25s; }
#hud.dim { opacity: 0.35; }
.hud-row, .hud-row2 { display: flex; gap: 6px; align-items: center; }
.hud-row2 { margin-top: 5px; }
.grow { flex: 1; }
.pill { display: flex; align-items: center; gap: 4px; background: var(--paper); border-radius: 999px; padding: 3px 10px 3px 5px;
  box-shadow: 0 0 0 2.5px #fff, 0 3px 0 2.5px var(--shadow); font-weight: 800; font-size: 15px; line-height: 1; white-space: nowrap; }
.pill.hp b { color: var(--red); }
.pill.fp b { color: #d0507a; }
.pill.coin b { color: #b8860b; }
.pill.sp b { color: #d48a00; }
.ic { width: 20px; height: 20px; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; }
.area { background: rgba(43, 29, 58, 0.72); color: #fff; font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.stargauge { display: flex; gap: 3px; }
.stargauge .sg { width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.35); box-shadow: 0 0 0 2px #fff; position: relative; overflow: hidden; }
.stargauge .sg i { position: absolute; left: 0; bottom: 0; width: 100%; background: linear-gradient(#fff6a0, #ffc83a); }
.stargauge .sg::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: rgba(255,255,255,.9); }

/* ---------------- toast / banner ---------------- */
#toast { position: absolute; top: 74px; left: 50%; transform: translateX(-50%) translateY(-10px); background: rgba(43, 29, 58, 0.9); color: #fff;
  padding: 7px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; opacity: 0; transition: .25s; pointer-events: none; z-index: 20; white-space: nowrap; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#banner { position: absolute; left: 0; right: 0; top: 38%; text-align: center; pointer-events: none; z-index: 21; opacity: 0; transition: opacity .35s, transform .35s; transform: scale(.9); }
#banner.on { opacity: 1; transform: scale(1); }
#banner .b1 { display: inline-block; font-size: clamp(24px, 7vw, 44px); font-weight: 800; color: #fff; padding: 8px 26px; background: var(--accent);
  border-radius: 14px; box-shadow: 0 0 0 5px #fff, 0 8px 0 5px var(--shadow); transform: rotate(-2deg); }
#banner .b2 { margin-top: 16px; font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px #000; }

/* ---------------- action command ---------------- */
#acmd { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 12; pointer-events: none; opacity: 0; transition: opacity .15s; }
#acmd.on { opacity: 1; }
.acmd-text { background: rgba(255, 250, 240, 0.95); padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 15px; white-space: nowrap;
  box-shadow: 0 0 0 3px #fff, 0 4px 0 3px var(--shadow); }
.acmd-text .btnA { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; margin: 0 3px; font-size: 13px; }

/* ---------------- dialog ---------------- */
#dialog { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 15; background: var(--paper); border-radius: 18px; padding: 16px 18px 14px;
  min-height: 96px; box-shadow: 0 0 0 4px #fff, 0 8px 0 4px var(--shadow); font-size: 17px; line-height: 1.6; font-weight: 500; max-width: 720px; margin: 0 auto; }
#dialog .dname { position: absolute; top: -16px; left: 16px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; padding: 3px 14px;
  border-radius: 999px; box-shadow: 0 0 0 3px #fff; }
#dialog .dname:empty { display: none; }
#dialog .dtext { white-space: pre-wrap; min-height: 54px; }
#dialog .dnext { position: absolute; right: 16px; bottom: 6px; color: var(--accent); font-size: 14px; animation: bob .6s infinite alternate; opacity: 0; }
#dialog.done .dnext { opacity: 1; }
#dialog .dchoices { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
#dialog .dchoices:empty { display: none; }
.choice { text-align: left; font-size: 16px; font-weight: 800; background: #fff; border: 0; padding: 10px 14px; border-radius: 12px; box-shadow: 0 0 0 2px #e8d8c0; }
.choice.focus { background: var(--accent2); box-shadow: 0 0 0 3px var(--accent); }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(4px); } }

/* ---------------- get item ---------------- */
#getbox { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 16; background: var(--paper); border-radius: 18px;
  padding: 16px 22px; text-align: center; box-shadow: 0 0 0 4px #fff, 0 8px 0 4px var(--shadow); min-width: 240px; max-width: 90%; animation: pop .3s; }
#getbox .gicon img { width: 64px; height: 64px; image-rendering: auto; animation: spin 1.6s infinite ease-in-out; }
#getbox .gtext { font-weight: 800; font-size: 18px; margin-top: 4px; }
#getbox .gdesc { font-size: 13px; color: #7a6060; margin-top: 4px; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }

#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 30; }
#pcMenuBtn { position: absolute; right: 10px; bottom: 10px; z-index: 6; border: 0; background: var(--paper); font-weight: 800; padding: 8px 14px;
  border-radius: 999px; box-shadow: 0 0 0 2.5px #fff, 0 3px 0 2.5px var(--shadow); font-size: 14px; }

/* ---------------- pad (touch) ---------------- */
#pad { position: relative; flex: 0 0 var(--padH); background: linear-gradient(#3a2850, #2b1d3a); overflow: hidden; }
#pad::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, #fff 0 10px, #ffe7b0 10px 20px); opacity: .9; }
.layer { position: absolute; inset: 6px 0 0 0; }
#fieldPad { display: flex; padding-bottom: env(safe-area-inset-bottom); }
#stickZone { position: relative; flex: 1; touch-action: none; }
.zonehint { position: absolute; left: 10px; right: 6px; top: 14px; color: rgba(255,255,255,.45); font-size: 11px; font-weight: 800; pointer-events: none; line-height: 1.5; }
.hand-left .zonehint { text-align: right; }
.zonehint b { color: rgba(255, 230, 150, .8); }
#stickBase { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); opacity: .55; pointer-events: none; transition: opacity .15s; }
#stickBase.on { opacity: 1; }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #ffe7b0); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
#btns { position: relative; width: 190px; flex: 0 0 190px; }
.pbtn { position: absolute; border: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; touch-action: none; box-shadow: 0 5px 0 rgba(0,0,0,.35), inset 0 -4px 0 rgba(0,0,0,.15); transition: transform .05s; }
.pbtn.down { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.15); }
.pbtn .k { font-size: 22px; line-height: 1; }
.pbtn .l { font-size: 10.5px; margin-top: 2px; white-space: nowrap; }
.pbtn.big { width: 96px; height: 96px; right: 14px; bottom: calc(22px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 40% 30%, #6fdc84, #2f9a4a); }
.pbtn.big .k { font-size: 32px; }
.pbtn.mid { width: 70px; height: 70px; right: 104px; bottom: calc(96px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 40% 30%, #ff8a6a, #d8403a); }
.pbtn.small { width: 58px; height: 40px; border-radius: 14px; top: 12px; background: #5a4a7a; }
.pbtn.small .k { font-size: 14px; }
#bMenu { right: 14px; }
#bX { right: 80px; background: #3a78c8; }
#bX.off { opacity: .35; }
.hand-left #fieldPad { flex-direction: row-reverse; }
.hand-left .pbtn.big { right: auto; left: 14px; }
.hand-left .pbtn.mid { right: auto; left: 104px; }
.hand-left #bMenu { right: auto; left: 14px; }
.hand-left #bX { right: auto; left: 80px; }

/* command panel */
#cmdPanel { display: flex; flex-direction: column; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 6px; }
.cmd-head { display: flex; align-items: baseline; gap: 8px; color: #fff; font-weight: 800; padding: 0 4px; }
.cmd-title { font-size: 15px; }
.cmd-info { font-size: 12px; opacity: .75; margin-left: auto; }
.cmd-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 3px 3px 6px; touch-action: pan-y; }
.cmd-list.grid2 { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.cmd-list.grid2 .row { min-height: 58px; padding: 6px 8px; gap: 6px; font-size: 15px; }
.cmd-desc { min-height: 34px; font-size: 12.5px; color: #ffe7b0; padding: 0 4px; line-height: 1.4; }
.row { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: var(--paper); border-radius: 12px; padding: 6px 12px;
  font-size: 16px; font-weight: 800; box-shadow: 0 3px 0 rgba(0,0,0,.3); min-height: 46px; flex: 0 0 auto; }
.row .ri { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; }
.row .ri img { width: 30px; height: 30px; }
.row .rl { flex: 1; min-width: 0; }
.row .rs { display: block; font-size: 11.5px; font-weight: 500; color: #8a7070; margin-top: 1px; }
.row .rr { font-size: 14px; color: #b86a00; white-space: nowrap; }
.row.focus { background: var(--accent2); box-shadow: 0 0 0 3px #fff, 0 3px 0 3px rgba(0,0,0,.3); }
.row.dis { opacity: .5; }
.row.on .rr { color: var(--green); }
.row.back { background: #d8cce8; }

#actPad { display: grid; place-items: center; padding-bottom: env(safe-area-inset-bottom); }
#bigA { width: min(62vw, 230px); height: min(62vw, 230px, calc(var(--padH) - 30px)); border-radius: 50%; border: 0; color: #fff; font-weight: 800;
  background: radial-gradient(circle at 40% 30%, #6fdc84, #2f9a4a); box-shadow: 0 8px 0 rgba(0,0,0,.35), inset 0 -6px 0 rgba(0,0,0,.15);
  display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none; }
#bigA .k { font-size: 56px; line-height: 1; }
#bigA .l { font-size: 14px; margin-top: 4px; }
#bigA.down { transform: translateY(4px) scale(.98); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
#bigA.flash { background: radial-gradient(circle at 40% 30%, #fff38a, #ffb400); }

/* ---------------- modal ---------------- */
#modal { position: absolute; inset: 0; z-index: 40; background: rgba(20, 10, 30, 0.55); display: flex; align-items: center; justify-content: center; padding: 12px; }
.mpanel { width: min(520px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--paper); border-radius: 20px;
  box-shadow: 0 0 0 5px #fff, 0 10px 0 5px var(--shadow); overflow: hidden; animation: mpop .2s; }
@keyframes mpop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mtabs { display: flex; overflow-x: auto; background: #f3e4c8; padding: 8px 8px 0; gap: 4px; flex: 0 0 auto; }
.mtab { border: 0; background: transparent; padding: 8px 10px 9px; border-radius: 12px 12px 0 0; font-weight: 800; font-size: 13.5px; white-space: nowrap; color: #8a7060; }
.mtab.on { background: var(--paper); color: var(--ink); }
.mhead { display: flex; align-items: center; padding: 12px 14px 4px; gap: 8px; }
.mhead h2 { margin: 0; font-size: 19px; }
.mhead .mclose { margin-left: auto; border: 0; background: #e8dcc8; border-radius: 999px; padding: 6px 12px; font-weight: 800; }
.mbody { flex: 1; overflow-y: auto; padding: 10px 14px 14px; touch-action: pan-y; }
.mlist { display: flex; flex-direction: column; gap: 6px; }
.mlist .row { background: #fff; box-shadow: 0 0 0 2px #eadbc0; }
.mlist .row.focus { background: var(--accent2); box-shadow: 0 0 0 3px var(--accent); }
.mfoot { padding: 8px 14px 12px; font-size: 13px; color: #7a6060; min-height: 40px; border-top: 2px dashed #eadbc0; line-height: 1.45; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: #fff; border-radius: 12px; padding: 8px 12px; box-shadow: 0 0 0 2px #eadbc0; }
.stat .t { font-size: 12px; color: #8a7070; font-weight: 800; }
.stat .v { font-size: 20px; font-weight: 800; }
.stat.wide { grid-column: span 2; }
.bar { height: 8px; background: #eadbc0; border-radius: 99px; overflow: hidden; margin-top: 4px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd23a, #ff7a2a); }
.bpbar { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
.bpbar i { width: 14px; height: 14px; border-radius: 4px; background: #eadbc0; }
.bpbar i.on { background: var(--blue); }
.sec { font-weight: 800; font-size: 13px; color: #8a7070; margin: 12px 2px 6px; }
.lvbtns { display: flex; flex-direction: column; gap: 10px; }
.lvbtn { border: 0; background: #fff; border-radius: 16px; padding: 14px; font-size: 20px; font-weight: 800; box-shadow: 0 0 0 3px #eadbc0; display: flex; justify-content: space-between; }
.lvbtn.focus { background: var(--accent2); box-shadow: 0 0 0 3px var(--accent); }
.lvbtn small { font-size: 15px; color: #8a6040; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 0 0 2px #eadbc0; margin-bottom: 8px; font-weight: 800; }
.setrow.focus { box-shadow: 0 0 0 3px var(--accent); background: #fff8e0; }
.seg { display: flex; gap: 4px; }
.seg button { border: 0; padding: 6px 10px; border-radius: 10px; background: #efe4d0; font-weight: 800; font-size: 13px; }
.seg button.on { background: var(--accent); color: #fff; }
.help p { margin: 6px 0; line-height: 1.6; font-size: 14px; }
.help b { color: var(--accent); }
.kbd { display: inline-block; background: #fff; border-radius: 6px; padding: 0 6px; box-shadow: 0 2px 0 #cbb; font-weight: 800; }
.mapbox { position: relative; background: #e8f4d8; border-radius: 14px; height: 300px; box-shadow: inset 0 0 0 2px #cfe0b8; }
.mapnode { position: absolute; transform: translate(-50%, -50%); background: #fff; border-radius: 10px; padding: 4px 8px; font-size: 12px; font-weight: 800; box-shadow: 0 2px 0 rgba(0,0,0,.2); white-space: nowrap; }
.mapnode.here { background: var(--accent); color: #fff; }
.mapnode.lock { background: #ccc; color: #777; }
.mapnode.clear::after { content: ' ★'; color: #e0a000; }
.mapnode.here.clear::after { color: #fff; }

/* ---------------- title ---------------- */
#title { position: absolute; inset: 0; z-index: 35; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.0), rgba(43,29,58,0.35)); }
.logo { text-align: center; transform: rotate(-3deg); }
.logo .l1 { font-size: clamp(32px, 10.5vw, 76px); font-weight: 800; color: #fff; letter-spacing: 0; white-space: nowrap;
  text-shadow: 0 0 0 #fff, 4px 4px 0 var(--accent), 8px 8px 0 rgba(0,0,0,.25); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.logo .l2 { display: inline-block; margin-top: 4px; font-size: clamp(13px, 4vw, 20px); font-weight: 800; background: var(--paper); padding: 4px 14px; border-radius: 999px;
  box-shadow: 0 0 0 3px #fff, 0 4px 0 3px var(--shadow); }
.tmenu { display: flex; flex-direction: column; gap: 10px; width: min(300px, 86vw); margin-top: 18px; }
.tbtn { border: 0; background: var(--paper); font-size: 18px; font-weight: 800; padding: 13px; border-radius: 16px; box-shadow: 0 0 0 3px #fff, 0 5px 0 3px var(--shadow); }
.tbtn.focus { background: var(--accent2); }
.tbtn small { display: block; font-size: 11px; color: #8a7070; font-weight: 500; }
.tapstart { font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 #000; animation: blink 1.2s infinite; margin-top: 30px; }
.tfoot { position: absolute; bottom: 10px; font-size: 11px; color: rgba(255,255,255,.7); text-align: center; left: 0; right: 0; }
@keyframes blink { 50% { opacity: .35; } }

body.nopad #pad { display: none; }
body:not(.pc) #modal { align-items: flex-end; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
body:not(.pc) .mpanel { max-height: 90%; }

/* ---------------- PC ---------------- */
body.pc #pad { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: min(520px, 70vw); height: auto; max-height: 52vh; background: transparent; flex: none; z-index: 14; pointer-events: none; }
body.pc #pad::before { display: none; }
body.pc #fieldPad { display: none; }
body.pc .layer { position: relative; inset: auto; pointer-events: auto; }
body.pc #cmdPanel { background: rgba(43, 29, 58, 0.92); border-radius: 18px; max-height: 40vh; box-shadow: 0 0 0 3px #fff; padding: 6px 8px; }
body.pc .cmd-list.grid2 .row { min-height: 44px; font-size: 14px; }
body.pc .cmd-desc { min-height: 0; }
body.pc #actPad { padding: 0; }
body.pc #bigA { width: 120px; height: 120px; margin-left: auto; }
body.pc #bigA .k { font-size: 36px; }
body.pc #bigA .l { font-size: 11px; }
body:not(.pc) .pc-only { display: none !important; }
body.pc #dialog { bottom: 16px; }