/* Classic frame proportions; independent of browser and device pixel density. */
#screen { container-type:inline-size; border-radius:8px; overflow:hidden; }
#screen #overlay { position:absolute; inset:0; padding:8px; display:block; background:#14282b88; border:0; border-radius:0; font:clamp(10px,2.4cqw,18px)/1.35 monospace; }
#screen #overlay[hidden],#screen [hidden] { display:none!important; }
#overlay .trainer-menu-top,#overlay .trainer-menu-foot,#overlay .menu-icon { display:none; }
#screen #menu { position:absolute; inset:8px 8px 8px auto; width:42%; background:#fffef2; color:#3c4448; border:5px double #59627c; border-radius:7px; padding:10px 5px; box-shadow:2px 2px #192635; gap:0; overflow:auto; }
#screen #menu button { display:block; color:#39464e; background:transparent; border:0; min-height:0; padding:5px 9px 5px 22px; border-radius:0; text-transform:uppercase; position:relative; font:inherit; }
#screen button:focus-visible { outline:2px solid #e09936; outline-offset:-2px; background:#f6dfa0; color:#243938; }
#screen #menu button:focus::before { content:'▶'; position:absolute; left:3px; }
#screen #overlay[data-view=menu] #detail,#screen #overlay[data-view=menu] .panel-back { display:none; }
#screen #overlay[data-view=panel] #menu { display:none; }
#screen #detail { position:absolute; inset:8px 8px 38px; width:auto; max-width:none; max-height:none; overflow:auto; background:#f5f5df; color:#344844; border:5px double #567371; border-radius:6px; padding:10px; font:inherit; }
.panel-back { position:absolute; bottom:6px; left:10px; color:#fff8de; padding:5px 12px; background:#295e54; }
#detail button { min-height:28px; padding:5px 8px; }
#detail input,#detail select { max-width:100%; min-width:0; }
#detail .party-row { grid-template-columns:32px minmax(0,1fr) minmax(60px,28%); gap:4px; padding:5px; }
#detail .party-row > button:last-child { grid-column:2/-1; }
#screen #detail canvas.pokemon-sprite { width:64px!important; height:64px!important; aspect-ratio:1; }
#screen #detail canvas.icon { width:32px!important; height:32px!important; }
#screen #battle.emerald-battle { padding:0; display:grid; grid-template-rows:minmax(0,72%) minmax(0,28%); overflow:hidden; font:clamp(10px,2.6cqw,19px)/1.2 monospace; }
#battle.emerald-battle .battle-field { height:100%; min-height:0; overflow:hidden; background:radial-gradient(ellipse at 75% 43%,#97c950 0 15%,transparent 15.5%),radial-gradient(ellipse at 26% 100%,#a9d568 0 23%,transparent 23.5%),repeating-linear-gradient(#d9efbb 0 4px,#d0e8b0 4px 8px); }
#battle.emerald-battle .combatant { display:block; position:absolute; width:28%; height:65%; }
#battle.emerald-battle .enemy { top:2%; right:10%; left:auto; bottom:auto; }
#battle.emerald-battle .ally { left:10%; bottom:-12%; top:auto; right:auto; }
#screen #battle.emerald-battle .combatant canvas { width:100%!important; height:100%!important; object-fit:contain; aspect-ratio:1; filter:drop-shadow(1px 3px 1px #37583538); animation:none; }
#battle.emerald-battle .health-box { display:block; position:absolute; width:44%; padding:4px 8px; background:#ffffdf; border:4px double #45604a; border-radius:8px 2px 8px 2px; box-shadow:4px 4px #395949; font-size:.85em; }
#battle.emerald-battle .enemy-health { left:3%; top:6%; }
#battle.emerald-battle .ally-health { right:3%; bottom:5%; }
.health-box strong { text-transform:uppercase; }
.hp-line { display:flex; gap:5px; align-items:center; margin:4px 0 0; }
#battle.emerald-battle progress { width:100%; height:9px; accent-color:#40b978; }
#battle progress[data-health=medium] { accent-color:#eab43b; }
#battle progress[data-health=low] { accent-color:#e75642; }
.hp-numbers { display:block; text-align:right; }
.battle-bottom { display:grid; grid-template-columns:52% 48%; min-height:0; border-top:3px solid #a75459; }
.battle-log { margin:0; padding:7px; color:#fff; text-shadow:1px 1px #384b60; background:#5d9397; border:4px double #ded9c2; overflow:auto; white-space:pre-line; font-size:.85em; }
#battle.emerald-battle .battle-actions { display:grid; grid-template-columns:1fr 1fr; align-content:start; padding:4px; gap:2px; min-height:0; background:#fffff0; color:#343f4c; border:4px double #616779; overflow:auto; }
#battle.emerald-battle .battle-actions button { border:0; background:transparent; min-height:26px; margin:0; padding:3px; font:inherit; font-size:.8em; }
.move-effect { pointer-events:none; position:absolute; inset:10%; border-radius:50%; background:radial-gradient(circle,#fff 0 8%,var(--move-color) 15%,transparent 65%); box-shadow:0 0 18px var(--move-color); }
.battle-field,.pvp-field { position:relative; isolation:isolate; }
#battle.emerald-battle .battle-field[data-scene=meadow] { background:#93c35c var(--asset-route-battle, url('/assets/remake/route-battle.png')) center 58%/cover no-repeat; }
#battle.emerald-battle .battle-field[data-scene=water] { background:radial-gradient(ellipse at 70% 70%,#74cad7 0 12%,transparent 13%),repeating-linear-gradient(176deg,#60c4d4 0 12px,#55b8ce 13px 16px,#55afc6 17px 28px); }
#battle.emerald-battle .battle-field[data-scene=cave] { background:radial-gradient(ellipse at 75% 45%,#aaa388 0 14%,transparent 15%),radial-gradient(ellipse at 26% 100%,#a8a189 0 23%,transparent 24%),linear-gradient(#444959,#8b8f90); }
#battle.emerald-battle .battle-field[data-scene=sand] { background:radial-gradient(ellipse at 75% 45%,#ebcf89 0 15%,transparent 16%),linear-gradient(#cce6de 0 25%,#efdbae 26%,#d3b471); }
#battle.emerald-battle .battle-field[data-scene=indoor] { background:radial-gradient(ellipse at 75% 45%,#cee4c9 0 15%,transparent 16%),linear-gradient(#b4c4c9,#e2e5d2); }
.battle-vfx { position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.battle-particle { display:block; position:absolute; margin:-6px; background:var(--fx-color); border-radius:50%; box-shadow:0 0 10px var(--fx-color); }
.battle-particle.ring { background:transparent; border:3px solid var(--fx-color); }
.battle-particle.star { clip-path:polygon(50% 0,61% 35%,98% 35%,68% 58%,80% 95%,50% 74%,20% 95%,32% 58%,2% 35%,39% 35%); border-radius:0; }
.battle-particle.leaf { border-radius:0 90% 0 90%; }
.battle-particle.needle,.battle-particle.slash { border-radius:80% 0; }
.battle-particle.teeth { clip-path:polygon(0 0,100% 0,100% 50%,80% 100%,65% 50%,50% 100%,35% 50%,20% 100%,0 50%); border-radius:0; }
.battle-particle.bolt { clip-path:polygon(45% 0,95% 0,60% 40%,90% 40%,15% 100%,40% 55%,10% 55%); border-radius:0; }
.battle-particle.rock { border-radius:25% 40% 20% 45%; box-shadow:inset -3px -3px #0004; }
.battle-particle.beam { margin:0; border-radius:4px; background:linear-gradient(transparent,var(--fx-color),#fff,var(--fx-color),transparent); }
.battle-particle.eyes { clip-path:polygon(0 0,40% 35%,45% 100%,5% 70%,0 0,100% 0,95% 70%,55% 100%,60% 35%); }
.summary-exp { width:100%; accent-color:#68b8d6; height:9px; }
#screen #battle canvas.remake-stage { position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none; aspect-ratio:auto; object-fit:fill; pointer-events:none; z-index:1; image-rendering:auto; }
.stage-ready .combatant canvas { visibility:hidden; }
#battle .health-box { z-index:6; }
.battle-backdrop { position:absolute;inset:0;background-position:center 58%;background-size:cover;background-repeat:no-repeat;z-index:-2;pointer-events:none; }
#screen #battle canvas.battle-distance,#screen #battle canvas.battle-atmosphere { position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;aspect-ratio:auto;object-fit:fill;pointer-events:none;image-rendering:auto; }
#screen #battle canvas.battle-distance { z-index:-1; }
#screen #battle canvas.battle-atmosphere { z-index:3; }
#battle .pvp-field { overflow:hidden;min-height:200px;padding:12px;border-radius:8px;background:#307f72; }
#battle .pvp-field .pvp-side,#battle .pvp-field>.pvp-mon { position:relative;z-index:2; }
#battle .pvp-field .pvp-mon { background:#173a426e;border:1px solid #dbefd799;text-shadow:0 1px 2px #000; }
#screen #detail.emerald-summary { display:grid; grid-template-columns:32% minmax(0,1fr); grid-template-rows:auto 1fr auto; gap:6px; background:linear-gradient(125deg,#75bc83,#96caa6 35%,#b0afd5 35%); border-color:#59647c; }
.emerald-summary .summary-tabs { grid-column:1/-1; display:flex; gap:4px; }
.emerald-summary .summary-portrait { display:flex; flex-direction:column; justify-content:center; gap:7px; text-transform:uppercase; padding:4px; min-width:0; overflow-wrap:anywhere; }
#screen #detail.emerald-summary .summary-portrait canvas { width:100%!important; height:auto!important; aspect-ratio:1; }
.summary-data { padding:5px; border-radius:5px; background:#ffffdc; min-width:0; overflow:auto; }
.summary-line { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px; padding:5px 2px; border-bottom:1px solid #cdd1a9; font-size:.8em; }
.summary-line span { color:#68794c; }
#screen .chat { position:absolute; z-index:12; left:1%; bottom:1%; width:70%; max-height:45%; margin:0; padding:5px; background:#152d36e8; border:1px solid #bed6bf; border-radius:6px; font:11px/1.2 sans-serif; }
#screen #chat-log { height:65px; max-height:20cqw; overflow:auto; }
#screen #chat-form { display:flex; flex-wrap:wrap; gap:3px; }
#screen #chat-form input { width:50%; min-width:0; flex:1; font-size:12px; }
#screen #chat-form select { max-width:90px; font-size:11px; }
#chat-toggle { position:absolute; left:6px; top:6px; z-index:3; background:#153d39c9; color:white; font:10px sans-serif; border-radius:5px; padding:4px 7px; }
#screen:has(#battle:not([hidden])) #chat-toggle,#screen:has(#overlay:not([hidden])) #chat-toggle { display:none; }
#auth { background:radial-gradient(ellipse at 20% 15%,#75b783,#174d4c 70%); border:4px double #d8e9b4; box-shadow:0 20px 80px #071e27; }
.auth-art { position:relative; background:radial-gradient(circle at 50% 70%,#ffffff20 0 22%,transparent 23%); }
.auth-art::before { content:'◓'; display:block; font:80px/1 sans-serif; color:#f6f0d6; text-shadow:3px 5px #b3454f; }
.nuzlocke-rules { padding:12px; border:1px solid #dcba7b; border-radius:8px; color:#ffe5a4; line-height:1.5; }
@media(max-width:760px) {
  header { display:flex; flex-wrap:wrap; gap:7px; justify-content:space-between; line-height:1.5; }
  #screen:has(#battle:not([hidden])) { height:320px!important; aspect-ratio:auto; }
  #screen:has(#overlay:not([hidden])[data-view=panel]) { height:min(500px,calc(100dvh - 300px))!important; min-height:300px; aspect-ratio:auto; }
  #screen #battle.emerald-battle { font-size:13px; }
  #screen #battle.emerald-battle .battle-actions button { font-size:12px; }
  #screen #detail.emerald-summary { font-size:13px; }
  #screen #overlay { inset:0; font-size:clamp(10px,2.8cqw,15px); }
  #screen #detail { inset:5px 5px 30px; padding:6px; }
  #screen #menu { inset:4px 4px 4px auto; width:47%; padding:4px; }
  #screen #menu button { padding-block:4px; }
  #screen #campaign-scene,#screen #cinematic { max-height:100%; max-width:100%; overflow:auto; inset:0; }
  #screen #battle.emerald-battle { grid-template-rows:66% 34%; }
  #battle.emerald-battle .health-box { padding:3px; border-width:3px; }
  #battle.emerald-battle .battle-actions button { min-height:23px; }
  .battle-log { padding:4px; border-width:3px; }
  .summary-line { padding:3px 1px; }
}