/* A warm paper travel journal, with the original paper characters. */
:root { --ink:#3e3450; --paper:#fffcf3; --paper2:#f7f0df; --accent:#e77843; --accent2:#f5d66e; --green:#358e72; --shadow:rgba(51,39,58,.19); --padH:clamp(240px,34vh,300px); }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:3px solid #315fdd; outline-offset:4px; }
#stage::after { content:''; position:absolute; inset:0; border:8px solid rgba(255,250,230,.12); pointer-events:none; z-index:2; }
#title { background:linear-gradient(180deg,rgba(255,251,230,.05),rgba(65,94,71,.04)); gap:13px; padding:28px 20px 115px; }
#title.cover { justify-content:flex-start; padding-top:clamp(32px,12vh,125px); }
.title-eyebrow { font:800 11px/1.5 var(--font); letter-spacing:3px; color:#3b6c70; }
.logo { transform:rotate(-3deg); }
.logo .l1 { font-size:clamp(35px,8vw,80px); color:#fffdf3; text-shadow:3px 4px 0 #e57b48,6px 7px 0 #3e345026; -webkit-text-stroke:1.5px #5e4d48; }
.logo .l2 { background:#fffdf1; color:#5f574d; font-size:clamp(12px,2.2vw,16px); padding:7px 19px; box-shadow:0 2px 0 #fff,0 5px 0 #443d4220; }
.title-copy { font-size:clamp(18px,2.5vw,26px); font-weight:800; text-align:center; color:#365856; line-height:1.65; margin:12px 0 0; letter-spacing:.06em; }
.tapstart { border:2px solid #fff9df; background:#356f60; border-radius:18px; color:#fffef4; text-shadow:none; animation:none; box-shadow:0 5px 0 #244d46,0 10px 24px #2b58432b; padding:15px 26px; font-size:16px; margin-top:9px; transition:transform .15s; }
.tapstart span { margin-left:26px; }
.tapstart:hover { transform:translateY(-3px); background:#2f6558; }
.title-badges { display:flex; gap:16px; font-size:11px; font-weight:800; color:#486653; margin-top:8px; }
.tfoot { color:#3d5744; font-size:11px; padding:8px 15px; background:#fff9e6a6; bottom:0; }
.tmenu { width:min(340px,86vw); gap:11px; margin-top:17px; }
.tbtn { border:1px solid #e5dcc5; border-radius:14px; box-shadow:0 3px 0 #5a55422e; padding:12px 18px; font-size:16px; }
.tbtn.focus { background:#356f60; border-color:#255246; color:#fffdf1; box-shadow:0 4px 0 #244d46; }
.tbtn small { margin-top:5px; font-size:10px; }
.tbtn.focus small { color:#e0ecdf; }
#hud { padding:15px 18px 8px; }
.pill { border:1px solid #e6dbc6; box-shadow:0 3px 0 #392f3926; padding:6px 12px 6px 6px; gap:5px; font-size:14px; }
.hud-row { gap:8px; }
.hud-row2 { margin-top:10px; }
.area { background:#3f3a4ce6; padding:5px 11px; font-size:10px; letter-spacing:.04em; }
#journeyHud { position:absolute; left:18px; top:66px; z-index:6; display:flex; flex-direction:column; align-items:flex-start; gap:12px; pointer-events:none; }
#objective { display:flex; align-items:center; gap:11px; max-width:min(355px,calc(100vw - 36px)); padding:12px 14px; border:1px solid #ded5bd; border-radius:4px 17px 17px 17px; background:#fffdf2f5; box-shadow:0 4px 0 #4d4c3b24; text-align:left; pointer-events:auto; }
#objective small { display:block; color:#837464; font-size:10px; margin-bottom:3px; font-weight:800; letter-spacing:.05em; }
#objective b { display:block; font-size:13px; }
.objective-star { color:#a36f18; background:#fae9aa; width:32px; height:32px; display:grid; place-items:center; border-radius:10px; font-size:22px; }
.objective-open { color:#958a73; font-size:23px; margin-left:8px; }
#fieldMap { background:#fffaf0ee; padding:2px 5px 5px; border-radius:11px; border:1px solid #e0d7c4; box-shadow:0 3px 0 #43392f20; }
#minimap { width:170px; height:40px; display:block; }
#mapCaption { display:block; font-size:8px; color:#827462; text-align:center; }
#keyGuide { position:absolute; z-index:6; bottom:18px; left:18px; display:flex; gap:8px; align-items:center; font-size:10px; color:#fffdf2; background:#3b3443d9; padding:10px 14px; border-radius:12px; }
kbd { font-family:inherit; font-weight:800; background:#fff6dc; color:#534d47; border-radius:4px; padding:2px 5px; border-bottom:2px solid #bbaa89; font-size:10px; }
#saveStatus { position:absolute; bottom:61px; right:18px; z-index:7; color:#365548; background:#fffaf0e8; border-radius:7px; padding:5px 9px; font-size:10px; pointer-events:none; }
#saveStatus:empty { display:none; }
#saveStatus.failed { color:#a33338; }
#pcMenuBtn { bottom:18px; right:18px; padding:11px 16px; border:1px solid #e2d6c0; box-shadow:0 3px 0 #332b3e38; font-size:12px; border-radius:12px; }
#toast { top:auto; bottom:76px; border-radius:12px; font-size:12px; white-space:normal; max-width:90%; width:max-content; text-align:center; }
#dialog { border:1px solid #e4d8c1; box-shadow:0 6px 0 #3e345033,0 16px 40px #3e345021; padding:20px 24px; }
#dialog .dname { background:#3b7e69; border-radius:8px 8px 8px 0; box-shadow:none; top:-18px; padding:4px 14px; }
#dialog .dnext { font-size:12px; color:#367963; right:20px; bottom:8px; }
.mpanel { border:1px solid #e5d9c3; box-shadow:0 12px 60px #20172855; border-radius:22px; }
.mtabs { gap:4px; padding:12px; background:#f1ead8; }
.mtab { border-radius:10px; font-size:11px; padding:8px 12px; color:#776a5d; }
.mtab.on { background:#3b7e69; color:white; box-shadow:none; }
.mhead { padding:13px 20px; }
.mhead h2 { font-size:19px; }
.mclose { border-radius:8px; font-size:12px; }
.mbody { padding:16px 20px; }
.row { border-radius:11px; box-shadow:none; border:1px solid #e6dcc9; padding:11px 13px; }
.row.focus { background:#e8f2df; box-shadow:inset 3px 0 #3b7e69; border-color:#afcaa7; }
.row .rs { color:#817368; }
.stat { border:1px solid #e7ddca; background:#fffdf6; box-shadow:none; border-radius:12px; }
.save-row { display:flex; gap:12px; align-items:center; justify-content:space-between; font-size:11px; color:#786a5d; margin-bottom:16px; }
.save-now { border:0; color:white; background:#3b7e69; border-radius:9px; padding:10px 15px; font-weight:800; white-space:nowrap; }
.journal-goal { background:#eaf0df; padding:18px; border-radius:14px; border:1px solid #d6e0c8; }
.journal-goal small { font-size:10px; color:#6c7b56; font-weight:800; }
.journal-goal h3 { font-size:18px; margin:6px 0 8px; color:#3c664e; }
.journal-goal p { font-size:14px; line-height:1.8; margin:0; }
.chapter-track { display:flex; justify-content:space-between; margin:17px 4px; gap:10px; }
.chapter-track span { flex:1; text-align:center; font-size:10px; color:#9b9180; padding:9px 0; border-bottom:3px solid #e2d9c7; }
.chapter-track b { display:block; font-size:20px; }
.chapter-track .complete { color:#ac7c19; border-color:#e4bd51; }
.mapbox { background:radial-gradient(#d9ccb354 1px,transparent 1px),#f7f1df; background-size:12px 12px; border:1px solid #e2d5bc; border-radius:14px; height:220px; margin:14px 0; }
.mapnode { font-size:10px; padding:7px 8px; box-shadow:0 2px 0 #9a85632e; border:1px solid #d9cbb1; border-radius:8px; }
.mapnode.here { background:#3c7d67; color:white; }
.collection-grid { display:grid; gap:9px; }
.collection-card { display:flex; align-items:center; gap:11px; border:1px solid #e8ddc9; padding:12px; border-radius:12px; background:#fffdf7; }
.collection-card img { width:36px; height:36px; object-fit:contain; }
.collection-card div { flex:1; }
.collection-card b { display:block; font-size:14px; }
.collection-card small { display:block; color:#817263; font-size:12px; line-height:1.7; margin-top:3px; }
.collection-card strong { font-size:10px; color:#9d8f7b; white-space:nowrap; }
.collection-card.complete { background:#f0f5e7; border-color:#c7d8b9; }
.collection-card.complete strong { color:#397961; }
#timingGuide { position:absolute; z-index:13; bottom:22px; left:50%; transform:translateX(-50%); width:min(320px,82vw); background:#fffcf4f5; padding:12px 17px 9px; border:1px solid #eadfc8; border-radius:13px; box-shadow:0 4px 0 #3e345026; text-align:center; }
.timing-label { font-size:13px; font-weight:800; }
.timing-track { margin:10px 0 7px; height:13px; background:#dfd6c6; border-radius:8px; position:relative; }
.timing-zone { position:absolute; height:100%; background:#4b9e78; border-radius:7px; }
.timing-cursor { position:absolute; width:6px; height:23px; background:#4b3756; border:2px solid white; border-radius:4px; top:-5px; transform:translateX(-50%); box-shadow:0 1px 4px #0003; }
#timingGuide small { font-size:9px; color:#928574; }
#timingGuide.ready { border-color:#69a979; background:#f2ffe9; }
#timingGuide.ready .timing-label { color:#2d7d51; }
#acmd { top:66px; }
.acmd-text { font-size:13px; border-radius:10px; box-shadow:0 3px 0 #4b375633; border:1px solid #eadfc8; }
#hud.low-hp .pill.hp { background:#fff0e9; border-color:#df816e; }
#pad { background:linear-gradient(135deg,#f3ecd9,#e9dfc8); }
#pad::before { background:repeating-linear-gradient(90deg,#c7bca7 0 6px,transparent 6px 12px); height:2px; }
.zonehint { color:#857663; }
.zonehint b { color:#477259; }
#stickBase { background:#b4a88c29; box-shadow:inset 0 0 0 2px #bfb29888; }
#stickKnob { background:#fffcf0; box-shadow:0 3px 0 #b8aa8e; border:2px solid #d4c7af; }
.pbtn { box-shadow:0 4px 0 #544c3830,inset 0 0 0 2px #fff7; }
.pbtn.big { background:linear-gradient(140deg,#61ae8b,#347a62); }
.pbtn.mid { background:linear-gradient(140deg,#e5a269,#c57648); }
.pbtn.small { background:linear-gradient(140deg,#9b8cb0,#766486); }
#bigA { background:linear-gradient(140deg,#59ad8c,#34795f); }
body[data-scene="battle"] #pad { background:#3b3447; }
body.pc[data-scene="battle"] #pad { background:transparent; }
@media(max-width:600px) {
  #hud { padding:10px 11px; }
  .pill { padding:5px 8px 5px 4px; gap:3px; font-size:12px; }
  .ic { width:17px; height:17px; }
  #journeyHud { left:11px; top:89px; gap:9px; }
  #objective { padding:8px 10px; gap:8px; max-width:calc(100vw - 22px); }
  #objective b { font-size:11px; }
  #objective small { font-size:8px; }
  .objective-star { width:26px; height:26px; font-size:18px; }
  #fieldMap { display:none; }
  .area { font-size:9px; }
  #dialog { font-size:14px; line-height:1.65; padding:17px 18px; }
  #toast { bottom:15px; }
  #saveStatus { bottom:10px; right:12px; font-size:9px; }
  #stage::after { border-width:4px; }
  .title-copy { font-size:19px; }
  #title.cover { padding-top:12vh; }
  .title-eyebrow { letter-spacing:2px; font-size:9px; }
  .title-badges { font-size:9px; gap:12px; }
  .tapstart { font-size:14px; padding:14px 20px; }
  .mbody { padding:12px; }
  .mtabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:8px; overflow:visible; gap:4px; }
  .mtab { padding:9px 3px; font-size:11px; min-height:35px; }
  #cmdPanel { padding:6px 8px; gap:4px; }
  .cmd-list.grid2 .row { min-height:46px; padding:5px 7px; }
  .cmd-title { font-size:13px; }
  .cmd-desc { min-height:28px; font-size:11px; }
  .journal-goal h3 { font-size:16px; }
  .mapnode { font-size:9px; padding:7px 5px; }
  #timingGuide { bottom:16px; width:240px; padding:9px 12px 6px; }
  #acmd { top:85px; }
  .acmd-text { font-size:11px; }
}
@media(max-height:550px) and (min-width:601px) {
  #title { padding:12px 20px 80px; gap:8px; }
  #title.cover { padding-top:20px; gap:8px; }
  .logo .l1 { font-size:44px; }
  .title-copy { font-size:16px; margin:0; }
  .title-copy br { display:none; }
  .title-badges { display:none; }
  .tmenu { gap:7px; margin-top:4px; }
  .tbtn { padding:7px 14px; }
  #fieldMap { display:none; }
  #timingGuide { bottom:16px; padding:6px 10px; }
  #timingGuide small { display:none; }
}
@media(orientation:landscape) and (max-height:550px) {
  body:not(.pc) #app { flex-direction:row; }
  body:not(.pc) #stage { min-width:0; }
  body:not(.pc) #pad { flex:0 0 280px; height:100%; }
  body:not(.pc) #journeyHud { left:12px; right:12px; top:66px; }
  body:not(.pc) #objective { max-width:100%; padding:8px 12px; }
  body:not(.pc) #objective b { font-size:11px; }
  body:not(.pc) #bigA { width:190px; height:190px; }
  body:not(.pc) .zonehint { width:140px; right:auto; white-space:nowrap; font-size:9px; }
  body:not(.pc) #stickBase { width:84px; height:84px; margin:-42px 0 0 -42px; }
  body:not(.pc) #stickKnob { width:42px; height:42px; }
  body:not(.pc) .cmd-list.grid2 .row { min-height:50px; font-size:13px; }
  body:not(.pc) .cmd-list .row .rs { font-size:10px; }
  body:not(.pc) #timingGuide { width:240px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }