/* Gold's pale screen, dark frame, corner HP panels, and bottom command box. */
:root{--ink:#203145;--paper:#f6f5df;--paper-shadow:#dedfc6;--blue:#315778;--green:#39b45a;--yellow:#e0b337;--red:#d85449}
#hud,#message,#starter,#battle-screen{color:var(--ink);background:var(--paper);border:4px solid var(--ink);outline:3px solid #f3e6a9;box-shadow:0 0 0 6px var(--ink),8px 10px 0 #10182766;border-radius:0}
#hud{z-index:30;top:16px;left:auto;right:16px;width:min(290px,calc(100vw - 34px));min-width:0;padding:7px 9px;font-size:12px}
#hud[hidden]{display:none}
#title{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:var(--blue);color:#fff8de;font-size:15px;letter-spacing:1px;line-height:1.15}
#menu-close{margin:0;padding:0 5px;min-width:26px;min-height:26px;background:transparent;border:2px solid #fff8de;box-shadow:none;color:#fff8de;font-size:18px;line-height:1}
.hud-location{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 2px 3px;font-size:12px;font-weight:800}
#place{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#time-chip{flex:none;padding:2px 5px;background:#dbe5c3;border:1px solid var(--ink);font-size:10px}
#party{margin:0;padding:8px 2px 5px;color:var(--ink);font-size:12px}
.party-heading{display:flex;justify-content:space-between;gap:6px;white-space:nowrap}
.party-heading strong{overflow:hidden;text-overflow:ellipsis}
.hud-hp,.status-hp{display:flex;align-items:center;gap:5px;margin-top:5px}
.hud-hp b,.status-hp b{color:#d38c2d;font-size:11px;letter-spacing:1px;text-shadow:1px 1px 0 var(--ink)}
.hp-track{display:block;flex:1;height:9px;padding:1px;border:2px solid var(--ink);border-radius:8px;background:#e1e0c8;overflow:hidden}
.hp-track i{display:block;width:100%;height:100%;background:var(--green);transition:width .38s ease}
.hp-track i[data-hp-state=yellow]{background:var(--yellow)}
.hp-track i[data-hp-state=red]{background:var(--red)}
#party-hp{font-size:10px;white-space:nowrap}
#party-note{font-size:10px;color:#526479;margin-top:5px}
#party:not(.empty) #party-note,#party.empty .hud-hp{display:none}
#hud-menu{display:grid;gap:6px;min-width:0;max-height:calc(100dvh - 44px);overflow-x:hidden;overflow-y:auto}
#hud-menu>*{min-width:0}
#skin-row{display:flex;margin:0;gap:5px;font-size:10px;font-weight:800}
#skin{flex:1;min-width:0;width:0;padding:3px 4px;color:var(--ink);background:#fffef0;border:2px solid var(--ink);font-size:10px}
.hud-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#save-game,#sound-toggle,#new-game{min-width:0;margin:0;padding:5px 2px;color:var(--ink);background:#fffef0;border:2px solid var(--ink);box-shadow:none;font-size:10px}
#save-game:disabled{opacity:.45;cursor:default}
#opening{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 35%,#49728c,#192c48 65%,#101b30);color:var(--ink)}
#opening-card{width:min(520px,95vw);max-height:92vh;overflow:auto;padding:18px 22px 24px;border:5px solid var(--ink);outline:3px solid #f3e6a9;background:var(--paper);box-shadow:12px 14px 0 #10182788;text-align:center}
#opening-brand{padding:8px;background:#315778;color:#fff8de;font-size:clamp(23px,6vw,37px);font-weight:900;letter-spacing:2px;text-shadow:2px 3px #172c48}
#opening-brand strong{color:#f6cf67}#opening-brand small{margin-left:7px;font-size:12px;color:#e6eec5}
#opening-portrait{display:flex;align-items:center;justify-content:center;height:190px;margin:11px 0;background:linear-gradient(#d9e8c6,#f6f5df);border:2px solid var(--ink)}
#opening-portrait img{height:175px;max-width:90%;object-fit:contain;image-rendering:pixelated}
#opening-copy{min-height:72px;padding:10px;text-align:left;line-height:1.5;white-space:pre-line}
#opening-actions{display:grid;gap:7px;margin-top:12px}#opening-actions button{margin:0;text-align:left;background:#fffef0}
#opening-actions button:hover,#opening-actions button:focus-visible{background:#dce7cd}
#opening-form{display:grid;gap:9px;margin:8px 0;text-align:left}#opening-form[hidden]{display:none}
#opening-form label{display:grid;gap:3px;font-size:12px;font-weight:800}#opening-form input,#opening-form select{width:100%;padding:7px;font:inherit;border:2px solid var(--ink);background:#fffef0;color:var(--ink)}
.opening-active #hud{visibility:hidden}
#hud-menu a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#315778;font-size:10px;font-weight:800}
#open-pokedex{width:100%;min-height:35px;margin:2px 0;padding:5px 8px;text-align:left;color:var(--ink);background:#fffef0;border:2px solid var(--ink);box-shadow:none;font-size:12px}
#pokedex[hidden]{display:none}
#pokedex{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;padding:16px;background:#101b30d9;color:var(--ink)}
#pokedex-card{width:min(760px,100%);height:min(600px,calc(100dvh - 32px));display:flex;flex-direction:column;background:var(--paper);border:4px solid var(--ink);outline:3px solid #f3e6a9;box-shadow:8px 10px 0 #10182766}
#pokedex-title{display:flex;align-items:center;justify-content:space-between;padding:6px 9px;background:var(--blue);color:#fff8de;font-size:18px}
#pokedex-close{min-width:31px;min-height:31px;margin:0;padding:0 5px;color:#fff8de;background:transparent;border:2px solid #fff8de;box-shadow:none;font-size:21px;line-height:1}
#pokedex-body{display:grid;grid-template-columns:minmax(190px,40%) 1fr;gap:12px;min-height:0;flex:1;padding:12px}
#pokedex-detail{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:8px;background:#e8edcf;border:2px solid var(--ink)}
#pokedex-picture{position:relative;width:min(100%,230px);aspect-ratio:1;margin:4px auto 12px;background:#fffef0;border:2px solid var(--ink)}
#pokedex-picture img,#pokedex-picture canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
#pokedex-picture img[hidden]{display:none}
#pokedex-model{display:none}
#pokedex-number{font-size:15px;color:#526479}
#pokedex-name{margin:4px 0;font-size:clamp(18px,3vw,26px);overflow-wrap:anywhere}
#pokedex-types{margin:5px 0;font-size:14px}
#pokedex-art-source{margin:auto 0 5px;padding-top:8px;font-size:11px;color:#526479}
#pokedex-browser{display:flex;flex-direction:column;min-height:0}
#pokedex-search{width:100%;min-height:40px;padding:7px 9px;color:var(--ink);background:#fffef0;border:2px solid var(--ink);font:inherit;font-size:16px}
#pokedex-list{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;margin-top:8px;border:2px solid var(--ink);background:#fffef0}
#pokedex-list button{display:block;width:100%;min-height:37px;margin:0;padding:6px 10px;text-align:left;color:var(--ink);background:transparent;border:0;border-bottom:1px solid #c6cfb6;box-shadow:none;font-size:13px}
#pokedex-list button[aria-current=true],#pokedex-list button:hover,#pokedex-list button:focus-visible{background:#dce7cd}
@media(max-width:600px){#pokedex{padding:8px}#pokedex-card{height:calc(100dvh - 16px)}#pokedex-body{grid-template-columns:1fr;grid-template-rows:minmax(170px,42%) minmax(0,1fr);gap:8px;padding:8px}#pokedex-detail{display:grid;grid-template-columns:42% 1fr;grid-template-rows:repeat(4,auto);align-content:center;column-gap:9px;padding:5px;text-align:left}#pokedex-picture{grid-row:1/5;width:100%;max-height:150px;margin:0}#pokedex-art-source{margin:0}#pokedex-name{font-size:18px}#pokedex-list button{min-height:44px}}
#controls-help{border-top:1px solid #8797a2;padding-top:5px;color:#526479;font-size:9px;line-height:1.5}
#message{z-index:30;left:max(20px,6%);right:max(20px,6%);bottom:22px;padding:14px 18px;min-height:80px;font-size:clamp(13px,1.7vw,19px);line-height:1.5;max-width:900px;margin:auto}
#starter{z-index:40;background:var(--paper)}
#battle{position:fixed;inset:0;z-index:60;transform:none;width:100%;height:100%;padding:14px;align-items:center;justify-content:center;background:#14202ad9;border:0;box-shadow:none;color:var(--ink)}
#battle-screen{display:flex;flex-direction:column;width:min(760px,calc(100vw - 28px),calc(100vh - 28px));aspect-ratio:10/9;max-height:calc(100vh - 28px);min-height:0;padding:0;overflow:hidden}
#battle-art{position:relative;display:block;flex:1;min-height:0;height:auto;margin:0;border:0;background:linear-gradient(#f7f8e9 0%,#f7f8e9 72%,#e9ead6 100%);overflow:hidden}
.combatant{position:absolute;pointer-events:none}
.enemy-combatant{top:13%;right:7%;width:35%;height:43%}
.ally-combatant{bottom:7%;left:7%;width:40%;height:49%}
.battle-ground{position:absolute;left:8%;right:8%;bottom:3%;height:17%;border-radius:50%;background:#b2bd80;box-shadow:inset 0 3px 0 #8d9e68;opacity:.8}
.battle-model,.mon{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:none}
.battle-model{display:none}
#enemy-art,#ally-art{align-self:auto}
.combatant .battle-model,.combatant .mon{transform-origin:50% 85%;animation:battle-idle 2.3s ease-in-out infinite;will-change:transform,opacity,filter}
.enemy-combatant .battle-model,.enemy-combatant .mon{animation-delay:-1.15s}
.ally-combatant.attacking .battle-model,.ally-combatant.attacking .mon{animation:battle-lunge-ally .58s ease-in-out both}
.enemy-combatant.attacking .battle-model,.enemy-combatant.attacking .mon{animation:battle-lunge-enemy .58s ease-in-out both}
.combatant.casting .battle-model,.combatant.casting .mon{animation:battle-cast .58s ease-in-out both}
.combatant.hit .battle-model,.combatant.hit .mon{animation:battle-hit .36s ease-in-out both}
.combatant.hit::after{content:"";position:absolute;z-index:3;left:34%;top:25%;width:36%;aspect-ratio:1;border:5px solid #fff1ac;border-radius:50%;box-shadow:0 0 12px #f5ce65;animation:battle-impact .36s ease-out both}
.combatant.fainted .battle-model,.combatant.fainted .mon{animation:battle-faint .52s ease-in forwards}
@keyframes battle-idle{0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes battle-lunge-ally{0%,100%{transform:translate(0,0) scale(1)}38%{transform:translate(18%,-8%) scale(1.08)}62%{transform:translate(38%,-16%) scale(1.13)}}
@keyframes battle-lunge-enemy{0%,100%{transform:translate(0,0) scale(1)}38%{transform:translate(-18%,8%) scale(1.08)}62%{transform:translate(-34%,16%) scale(1.13)}}
@keyframes battle-cast{0%,100%{transform:scale(1);filter:none}45%{transform:translateY(-10px) scale(1.13);filter:drop-shadow(0 0 12px #b7d978)}}
@keyframes battle-hit{0%,100%{transform:translateX(0);filter:none}25%{transform:translateX(-8px);filter:brightness(1.9)}50%{transform:translateX(8px);filter:brightness(1.5)}75%{transform:translateX(-4px);filter:brightness(1.8)}}
@keyframes battle-impact{0%{transform:scale(.35);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes battle-faint{0%{transform:translateY(0) scaleY(1);opacity:1}100%{transform:translateY(55%) scaleY(.2);opacity:0}}
.battle-status{position:absolute;z-index:2;width:43%;min-width:0;padding:4px 9px 5px;background:var(--paper);font-size:clamp(10px,1.65vw,17px);font-weight:800}
.enemy-status{top:9%;left:4%;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);border-radius:0 0 12px 0}
.ally-status{right:4%;bottom:6%;border-left:3px solid var(--ink);border-top:3px solid var(--ink);border-radius:12px 0 0 0}
.status-heading{display:flex;align-items:baseline;justify-content:space-between;gap:4px;white-space:nowrap}
.status-heading strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
.status-heading span{flex:none;font-size:.85em}
.status-hp{margin:5px 0 0 5px}
.status-hp .hp-track{height:12px}
.status-numbers{text-align:right;font-size:.75em;margin:2px 3px 0 0}
.exp-track{height:5px;margin:4px 2px 0 12%;background:#c8cbac;border:1px solid var(--ink)}
.exp-track i{display:block;height:100%;width:0;background:#4b88c6;transition:width .38s ease}
#battle-bottom{display:grid;grid-template-columns:53% 47%;flex:0 0 25%;min-height:112px;border-top:4px solid var(--ink);background:var(--paper)}
#battle-log{display:flex;align-items:center;min-height:0;padding:10px 14px;font-size:clamp(11px,1.75vw,18px);line-height:1.4;overflow:auto}
#battle-controls{min-width:0;border-left:3px solid var(--ink);padding:5px}
#battle.animating #battle-bottom{grid-template-columns:1fr}
#battle.animating #battle-controls{display:none}
#battle-commands,#move-menu,#item-menu{height:100%;min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}
#battle-commands button,#move-menu button,#item-menu button{min-width:0;min-height:0;margin:0;padding:3px 4px;border:0;box-shadow:none;background:transparent;color:var(--ink);font-size:clamp(10px,1.5vw,15px);text-align:left;white-space:normal;overflow:hidden}
#battle-commands button::before,#move-menu button::before,#item-menu button::before{content:'▶';display:inline-block;margin-right:4px;visibility:hidden}
#battle-commands button:hover::before,#battle-commands button:focus-visible::before,#move-menu button:hover::before,#move-menu button:focus-visible::before,#item-menu button:hover::before,#item-menu button:focus-visible::before{visibility:visible}
#battle-commands button:hover,#move-menu button:hover,#item-menu button:hover{background:#e5eace}
#move-menu small{display:block;margin:1px 0 0 14px;font-size:.68em;line-height:1.05}
@media(max-width:650px){
  #hud{top:10px;left:auto;right:10px;width:min(274px,calc(100vw - 25px))}
  #title{font-size:13px}
  #message{left:12px;right:12px;bottom:12px;padding:12px 14px}
  #battle{padding:8px}
  #battle-screen{width:min(calc(100vw - 16px),calc(100vh - 16px))}
  .battle-status{width:46%;padding:3px 5px;font-size:11px}
  .status-hp{margin:3px 0 0}
  .status-hp .hp-track{height:9px}
  #battle-bottom{grid-template-columns:48% 52%;min-height:112px}
  #battle-log{padding:6px 8px;font-size:12px}
  #battle-controls{padding:3px}
  #battle-commands button,#move-menu button,#item-menu button{font-size:12px}
  .enemy-combatant{top:19%;right:6%;width:36%;height:39%}
  .ally-combatant{bottom:9%;left:6%;width:40%;height:43%}
}
@media(prefers-reduced-motion:reduce){
  .combatant .battle-model,.combatant .mon,.combatant.hit::after{animation:none!important;transition:none!important}
  .combatant.fainted .battle-model,.combatant.fainted .mon{opacity:0}
}
#view{touch-action:none}
#touch-controls{display:none}
#start-button{position:fixed;right:22px;bottom:20px;z-index:25;min-width:70px;min-height:34px;padding:3px 10px;border:3px solid #203145;border-radius:18px;background:#f6f5dfe8;box-shadow:3px 4px 0 #101827aa;color:#203145;font-size:11px;font-weight:800;cursor:pointer}
#start-button[aria-expanded=true],#start-button:active{background:#f7d673}
.opening-active #start-button{display:none}
@media(pointer:coarse),(max-width:650px){
  html,body{height:100%;height:100dvh;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
  #hud{top:max(8px,env(safe-area-inset-top));left:auto;right:max(8px,env(safe-area-inset-right));width:min(250px,calc(100vw - 16px));padding:5px 7px}
  #title{font-size:12px}#party{padding:5px 2px 3px}
  #save-game,#sound-toggle,#new-game{min-height:44px}
  #skin{font-size:16px;min-height:44px}
  #touch-controls{display:block;position:fixed;inset:0;z-index:25;pointer-events:none;touch-action:none}
  #touch-dpad{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:158px;height:158px;pointer-events:none}
  #touch-dpad button,#touch-action{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;background:#f6f5dfe8;border:3px solid #203145;box-shadow:3px 4px 0 #101827aa;color:#203145;margin:0;min-width:48px;min-height:48px;line-height:1}
  #touch-dpad button{position:absolute;width:51px;height:51px;padding:0;font-size:20px;border-radius:8px}
  #touch-dpad .up{left:54px;top:0}#touch-dpad .left{left:0;top:54px}#touch-dpad .right{right:0;top:54px}#touch-dpad .down{left:54px;bottom:0}
  #touch-dpad button:active,#touch-dpad button.pressed,#touch-action:active{background:#f7d673;transform:translate(2px,2px);box-shadow:1px 2px 0 #101827aa}
  #touch-action{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:calc(max(20px,env(safe-area-inset-bottom)) + 33px);width:74px;height:74px;border-radius:50%;font-size:24px}
  #start-button{left:50%;right:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:62px;min-width:0;min-height:34px;padding:3px;font-size:10px}
  #start-button[aria-expanded=true]{background:#f7d673}
  #touch-action small{display:block;font-size:10px;margin-top:3px}
  .message-open #touch-dpad{opacity:.3;pointer-events:none}.message-open #touch-dpad button{pointer-events:none}
  .message-open #message{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 164px);left:10px;right:10px;min-height:80px;padding:9px 12px;font-size:15px}
  .opening-active #touch-controls,.opening-active #start-button{display:none}
  #opening{padding:calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom))}
  #opening-card{max-height:100%;padding:11px 13px 15px}#opening-portrait{height:min(24vh,150px)}#opening-portrait img{height:95%;max-height:140px}
  #opening-copy{font-size:14px;min-height:55px}#opening-actions button{min-height:44px}
  #opening-form input,#opening-form select{font-size:16px}
  #starter{width:min(340px,calc(100vw - 24px));min-width:0;padding:13px}#starter button{min-height:44px}
  #battle-screen{width:calc(100vw - 16px);height:min(600px,calc(100dvh - 16px));aspect-ratio:auto}
  #battle-commands button,#move-menu button,#item-menu button{min-height:44px;font-size:14px}
}
@media(pointer:coarse) and (orientation:landscape),(max-width:650px) and (orientation:landscape){
  #hud{width:220px}#touch-dpad{width:142px;height:142px}#touch-dpad .up{left:47px}#touch-dpad .left{top:47px}#touch-dpad .right{top:47px}#touch-dpad .down{left:47px}
  #touch-action{bottom:max(18px,env(safe-area-inset-bottom))}
  .message-open #message{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 78px);left:180px;right:105px}
  #battle-screen{width:min(760px,calc(100vw - 16px));height:calc(100dvh - 16px)}
  #battle-bottom{flex-basis:36%}
}