*{box-sizing:border-box}html,body{margin:0;background:#0a0c11;color:#ece7d8;font-family:system-ui,Segoe UI,Arial,sans-serif;height:100%;overflow:hidden}button{font:inherit;color:inherit;border:0;cursor:pointer}.topbar{height:58px;background:linear-gradient(#191d28,#0e1118);border-bottom:2px solid #2e3545;display:flex;align-items:center;justify-content:space-between;padding:0 14px}.brand{font-weight:900;letter-spacing:.08em;font-size:18px}.sub,.muted{color:#8e96a9;font-size:12px}.top-actions{display:flex;gap:6px}.top-actions button{background:#202633;border:1px solid #394052;padding:7px 9px;font-size:11px;border-radius:5px}.layout{height:calc(100vh - 58px);display:grid;grid-template-columns:minmax(520px,1fr) 300px;gap:12px;padding:12px}.screen-wrap{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.screen-frame{position:relative;width:min(96%,960px);aspect-ratio:3/2;background:#000;border:10px solid #232835;border-radius:10px;box-shadow:0 0 0 2px #10131a,0 16px 40px rgba(0,0,0,.45);overflow:hidden}.screen-frame canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.touch-ui{position:absolute;inset:0;pointer-events:none}.dpad{position:absolute;left:16px;bottom:14px;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:2px}.dpad>div{display:flex;gap:2px}.dpad button,.touch-actions button{width:42px;height:42px;border-radius:8px;background:rgba(13,15,22,.78);border:1px solid #525a70;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);font-size:18px}.touch-actions{position:absolute;right:18px;bottom:15px;display:flex;gap:10px;pointer-events:auto}.touch-actions button:first-child{width:58px;height:58px;border-radius:50%;background:rgba(137,55,72,.78)}.touch-actions button:last-child{width:48px;height:48px;border-radius:50%;background:rgba(59,67,92,.8)}.tip{margin-top:8px;font-size:11px;color:#7f8697}.sidebar{overflow:auto}.card{background:#131720;border:1px solid #293040;border-radius:7px;padding:11px;margin-bottom:10px}.label{font-size:10px;letter-spacing:.13em;color:#7f8aa3;margin-bottom:6px}.loc{font-size:17px;font-weight:800}.stats>div,.row,.party-mini{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #232a37}.party-mini.active{color:#ffd777}.battle-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.movebtn{padding:10px;background:#232b3a;border:1px solid #3b465d;border-radius:5px;text-align:left}.movebtn small{display:block;color:#8b94a6;font-size:10px;margin-top:2px}.movebtn.back{grid-column:1/-1}.overlay{position:fixed;inset:0;background:rgba(5,7,10,.78);display:flex;align-items:center;justify-content:center;z-index:20}.hidden{display:none!important}.modal-box{position:relative;width:min(680px,92vw);max-height:86vh;overflow:auto;background:#12161f;border:1px solid #424b5e;border-radius:10px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.55)}.panel-box{width:min(760px,94vw)}.x{position:absolute;right:10px;top:8px;background:transparent;font-size:25px;color:#949db0}.modal-title{font-size:21px;font-weight:900;margin-bottom:10px}.modal-box p{line-height:1.5;color:#d1cabb}.choice{width:100%;padding:11px;margin-top:8px;border-radius:6px;text-align:left;background:#202736;border:1px solid #364054}.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.mon-card{padding:10px;background:#1a202c;border:1px solid #303a4f;border-radius:7px;text-align:left}.mon-card.active{outline:2px solid #d5a94f}.mon-card span,.mon-card small{display:block;color:#9098aa;font-size:11px}.box-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.box-mon{min-height:54px;background:#1a202c;border:1px solid #30394b;border-radius:5px;font-size:11px;text-align:left;padding:6px}.box-mon small{display:block;color:#81899b}.section-title{font-size:11px;color:#8f9bb4;margin:14px 0 6px;letter-spacing:.08em}.worldmap{display:block;width:100%;image-rendering:pixelated;border:1px solid #3a4251}.boot-box{text-align:center;width:min(520px,92vw);padding:30px;background:radial-gradient(circle at 50% 25%,#242938,#11141b 65%);border:1px solid #3b4354;border-radius:12px}.boot-logo{font-size:62px;line-height:.8;font-weight:1000;letter-spacing:.08em;color:#d6b95c;text-shadow:6px 6px 0 #7f252d,0 0 30px rgba(213,178,75,.15)}.boot-sub{margin:18px 0 24px;color:#9aa2b4}.big{display:block;width:100%;padding:13px;margin:8px 0;border-radius:6px;background:#a33e45;font-weight:900}.big.secondary{background:#2a3140}.boot-status{margin-top:10px;font-size:11px;color:#798295}@media(max-width:900px){.topbar{height:50px}.brand{font-size:14px}.top-actions button{padding:6px 5px}.layout{height:calc(100vh - 50px);grid-template-columns:1fr;padding:6px}.sidebar{display:none}.screen-frame{width:100%;border-width:6px}.tip{font-size:9px}.touch-ui{display:block}}@media(min-width:901px){.touch-ui{opacity:.18}.touch-ui:hover{opacity:1}}

.dialogue-box{position:absolute;left:12px;right:12px;bottom:10px;min-height:90px;background:linear-gradient(180deg,rgba(246,242,226,.98),rgba(215,209,187,.98));border:3px solid #2b2931;border-radius:9px;box-shadow:0 0 0 2px #d0b56c,0 8px 0 rgba(0,0,0,.25);display:flex;gap:9px;padding:8px;color:#27232a;z-index:8}.dialogue-portrait{width:58px;height:70px;flex:0 0 58px;background-image:url("assets/sprites/characters.png");background-size:384px 256px;background-position:-96px -64px;background-repeat:no-repeat;image-rendering:pixelated;border:2px solid #6d6356;border-radius:5px;background-color:#e3dcc9}.dialogue-content{flex:1;position:relative;padding-right:18px}.dialogue-name{display:inline-block;background:#343346;color:#fff4d0;border:2px solid #23222c;padding:3px 8px;font-size:11px;font-weight:900;margin-top:-18px;margin-left:-2px;border-radius:4px}.dialogue-text{font-family:monospace;font-size:12px;line-height:1.45;margin-top:7px;max-width:100%}.dialogue-next{position:absolute;right:2px;bottom:0;font-size:15px;color:#6d2736;animation:bounce .8s infinite}.mobile-tip{display:none;font-size:10px;color:#777f93;margin-top:4px}.starter-modal{width:min(820px,95vw);background:linear-gradient(#161b26,#0f121a)}.starter-intro{font-size:12px;color:#c7c0b0;line-height:1.45;margin-bottom:12px}.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.starter-card{background:linear-gradient(#222a36,#171d27);border:2px solid #394458;border-radius:8px;padding:8px;text-align:left;transition:.15s}.starter-card:hover{transform:translateY(-2px);border-color:#d5b45b}.starter-card .starter-art{width:128px;height:112px;margin:0 auto 5px;background-repeat:no-repeat;image-rendering:pixelated;background-size:384px 336px}.starter-card[data-starter="pyrune"] .starter-art{background-image:url('assets/sprites/evolutions.png');background-position:0 0}.starter-card[data-starter="aquarex"] .starter-art{background-image:url('assets/sprites/evolutions.png');background-position:-128px 0}.starter-card[data-starter="florven"] .starter-art{background-image:url('assets/sprites/evolutions.png');background-position:-256px 0}.starter-card b{display:block;color:#ffe9a7;font-size:15px}.starter-card small{display:block;color:#9fa8ba;line-height:1.35;margin-top:4px}.starter-type{display:inline-block;padding:2px 6px;border-radius:4px;font-size:9px;margin-top:5px;background:#2f4354}.building-hint{color:#fff0bd;font-size:10px}.service-bubble{background:rgba(20,15,20,.9);color:#f4ead3;border:1px solid #8e784c;padding:3px 6px;font-size:8px;border-radius:4px}.interior-title{position:absolute;left:12px;top:8px;background:rgba(21,18,24,.82);color:#f6ebc9;border:1px solid #917647;padding:4px 7px;font:700 10px monospace;z-index:5}.touch-ui{position:relative;display:flex;justify-content:space-between;align-items:center;padding:8px 14px 2px;pointer-events:auto}.touch-ui .dpad{position:static;display:flex;flex-direction:column;align-items:center;gap:2px}.touch-ui .dpad>div{display:flex;gap:2px}.touch-ui .touch-actions{position:static;display:flex;gap:10px}.touch-ui .dpad button,.touch-ui .touch-actions button{background:#161c27;border:1px solid #46536d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);width:44px;height:44px}.touch-ui .touch-actions button:first-child{width:58px;height:58px;border-radius:50%;background:#873f50}.touch-ui .touch-actions button:last-child{width:48px;height:48px;border-radius:50%;background:#38445b}@keyframes bounce{50%{transform:translateY(3px)}}@media(max-width:900px){.mobile-tip{display:block}.touch-ui{display:flex}.tip{display:none}.screen-wrap{justify-content:flex-start;padding-top:6px}.screen-frame{width:100%}.dialogue-box{left:6px;right:6px;bottom:6px;min-height:84px}.dialogue-portrait{width:50px;height:62px;flex-basis:50px;background-size:320px 213px;background-position:-80px -53px}.dialogue-text{font-size:11px}.starter-grid{grid-template-columns:1fr}.starter-card{display:grid;grid-template-columns:118px 1fr;column-gap:8px;align-items:center}.starter-card .starter-art{grid-row:1/4;margin:0;width:112px;height:98px;background-size:336px 294px}.starter-card[data-starter="pyrune"] .starter-art{background-position:0 0}.starter-card[data-starter="aquarex"] .starter-art{background-position:-112px 0}.starter-card[data-starter="florven"] .starter-art{background-position:-224px 0}}@media(min-width:901px){.touch-ui{display:none}.mobile-tip{display:none}}
/* v5 PWA / battle / grass polish */
html,body{touch-action:none}
.touch-ui{position:relative;inset:auto;width:100%;max-width:960px;min-height:66px;z-index:5}
.screen-wrap{width:100%}
.starter-card .starter-art{background-repeat:no-repeat;background-position:center}
.movebtn{min-height:44px}
.movebtn[disabled]{opacity:.45;cursor:not-allowed}

/* v6 visual/gameplay pass */
html,body,#app,button,canvas,.touch-ui,.touch-ui *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
canvas{image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor;}
.screen-frame{overflow:hidden;position:relative;}
.dialogue-portrait{object-fit:contain;background:#e3dcc9;width:64px;height:74px;flex:0 0 64px;padding:2px;image-rendering:pixelated;transition:opacity .12s,transform .12s;}
.dialogue-portrait.speaker-swap{animation:speakerIn .18s ease-out both;}
@keyframes speakerIn{from{opacity:0;transform:translateX(-6px) scale(.97)}to{opacity:1;transform:none}}
.starter-card .starter-art{width:136px;height:120px;margin:0 auto 5px;display:flex;align-items:center;justify-content:center;background:linear-gradient(#202837,#151a23);overflow:hidden;border-radius:6px;}
.starter-card .starter-art img{width:128px;height:112px;object-fit:contain;image-rendering:pixelated;display:block;}
.touch-ui{user-select:none;touch-action:none;overscroll-behavior:none;z-index:9;}
.touch-ui button{touch-action:none;user-select:none;cursor:pointer;}
@media(max-width:900px){.touch-ui{padding:10px 14px 3px;min-height:74px}.touch-ui .dpad button{width:48px;height:48px}.touch-ui .touch-actions button:first-child{width:64px;height:64px}.dialogue-portrait{width:56px;height:68px;flex-basis:56px}.starter-card .starter-art{width:112px;height:104px}.starter-card .starter-art img{width:112px;height:98px;object-fit:contain}}
.map-canvas-note{font-size:10px;color:#7d879b;margin-top:6px;}
/* v8 UX / Pokémon-like front end */
:root{--gold:#e5c56b;--cream:#f6efd9;--red:#8e2f3d;--ink:#0a0c12}
body{background:#080b10;overscroll-behavior:none;overflow:hidden}
.start-button{border-color:#9a7a42!important;color:#ffe7a1!important}
.screen-frame{box-shadow:0 0 0 2px #04050a,0 16px 48px rgba(0,0,0,.42)}
.canvas-status{position:absolute}
.title-screen{background:#03050a;overflow:hidden}
.title-art{position:absolute;inset:0;background:url('assets/cinematics/title_scene.png') center/cover no-repeat;image-rendering:auto;transform:scale(1.04);animation:titleDrift 9s ease-in-out infinite alternate}
.title-vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,transparent 15%,rgba(0,0,0,.18) 44%,rgba(0,0,0,.78) 100%),linear-gradient(180deg,rgba(3,4,8,.15),rgba(5,6,12,.66))}
.title-logo{position:absolute;left:50%;top:11%;transform:translateX(-50%);text-align:center;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));animation:logoFloat 2.5s ease-in-out infinite}
.poke-word{font-family:Impact,system-ui,sans-serif;font-size:clamp(40px,9vw,86px);letter-spacing:.05em;color:#f2cc62;text-shadow:5px 5px 0 #2457a5,-2px -2px 0 #fff8dc,8px 10px 0 rgba(0,0,0,.45);line-height:.9}
.dead-word{font-family:Impact,system-ui,sans-serif;font-size:clamp(44px,10vw,96px);letter-spacing:.09em;color:#df4d52;text-shadow:4px 5px 0 #2a1118,8px 10px 0 rgba(0,0,0,.45);line-height:.9}
.title-sub{margin-top:9px;font:700 11px/1 monospace;letter-spacing:.28em;color:#f5e9c4}
.title-prompt{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);font:900 13px/1 monospace;color:#fff3c9;letter-spacing:.18em;text-shadow:0 2px 0 #31260f;animation:blinkPrompt 1.05s steps(2,end) infinite}
@keyframes titleDrift{to{transform:scale(1.09) translate3d(-.8%,.8%,0)}}
@keyframes logoFloat{50%{transform:translateX(-50%) translateY(-4px)}}
@keyframes blinkPrompt{50%{opacity:.3}}
.main-menu-box{backdrop-filter:blur(3px);background:rgba(10,13,20,.9);box-shadow:0 22px 80px rgba(0,0,0,.55);border-color:#5e5036}
.menu-brand{font:900 28px/1 Impact,system-ui,sans-serif;color:#f3cf68;text-shadow:3px 3px 0 #28549b,0 4px 0 rgba(0,0,0,.35);letter-spacing:.03em}
.menu-brand span{display:block;color:#de5960;text-shadow:3px 3px 0 #2c1720;letter-spacing:.08em}
.menu-profile{margin:12px 0;color:#bbb09a;font:11px monospace;min-height:18px}
.startMenu-open{display:flex!important}
.menu-panel{width:min(500px,92vw);padding:18px;background:linear-gradient(180deg,#1a1f2c,#11151e);border:1px solid #5e5441;border-radius:10px;box-shadow:0 22px 60px rgba(0,0,0,.55)}
.menu-title{font:900 24px/1 Impact,system-ui,sans-serif;color:#f4d66e;letter-spacing:.06em;text-align:center;margin-bottom:14px}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.menu-grid button,.menu-back{padding:13px 12px;border:1px solid #3f485d;border-radius:6px;background:#1b2330;color:#eee4cc;font:900 12px monospace;text-align:left}
.menu-grid button:hover,.menu-back:hover{border-color:#a58949;background:#2a3140}
.menu-back{width:100%;margin-top:10px;text-align:center;background:#28212b}
.profile-card{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;background:#1a202c;border:1px solid #354055;border-radius:8px;padding:10px}
.profile-card img{width:82px;height:82px;object-fit:contain;image-rendering:pixelated;background:#d9d0ba;border:2px solid #85775d}
.profile-card strong{display:block;color:#ffeab0;font-size:16px}.profile-card small{display:block;color:#9aa4b8;margin-top:3px}
.setup-box{width:min(660px,94vw);background:linear-gradient(180deg,#1b2130,#10131b);border:1px solid #65543b;border-radius:10px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.56)}
.setup-title{font:900 25px/1 Impact,system-ui,sans-serif;color:#f0ce69;text-align:center}.setup-sub{font:11px monospace;color:#9ea7ba;text-align:center;margin:7px 0 15px}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.setup-card{padding:14px;border:1px solid #344054;border-radius:7px;background:#171d28;color:#eee6d4;text-align:left}.setup-card.selected{border-color:#e5bf5e;box-shadow:inset 0 0 0 1px #e5bf5e;background:#232b39}.setup-card h3{margin:0 0 4px}.setup-card p{margin:0;color:#9fa8b8;font:11px/1.35 monospace}
.name-input{width:100%;box-sizing:border-box;padding:12px;border-radius:6px;border:1px solid #3a4458;background:#0e1219;color:#fff1ca;font:700 14px monospace;margin-top:10px}
.setup-actions{display:flex;gap:8px;margin-top:12px}.setup-actions button{flex:1}
.starter-card.selected{border-color:#e6c866;box-shadow:0 0 0 2px rgba(230,200,102,.22),inset 0 0 0 1px #e6c866;background:linear-gradient(#293141,#1a202c)}
.starter-confirm{margin-top:12px;width:100%;padding:13px;border-radius:6px;background:#a03b49;color:#ffe9c1;font-weight:900;border:1px solid #d57b6d}
.starter-card .starter-art img{width:128px;height:128px;object-fit:contain}
/* Responsive game board: keep the logical 480x320 viewport while allowing the device to rotate. */
.layout{min-height:0}
.screen-wrap{min-width:0}
@media (orientation:portrait) and (max-width:900px){
  .screen-frame{width:min(96vw,620px);margin:0 auto}
  .screen-frame canvas{width:100%;height:auto;display:block}
  .topbar .top-actions button:not(.start-button){display:none}
  .mobile-tip{text-align:center}
}
@media (orientation:landscape) and (max-width:900px){
  .layout{height:calc(100vh - 48px);padding:5px 8px}
  .screen-wrap{max-width:78vw;margin:0 auto}
  .screen-frame{width:100%}
  .screen-frame canvas{width:100%;height:auto;display:block}
  .touch-ui{padding:6px 4px 0}
  .touch-ui .dpad button{width:40px;height:40px}.touch-ui .touch-actions button:first-child{width:52px;height:52px}
}
@media(max-width:560px){.title-logo{top:8%}.title-sub{font-size:9px}.title-prompt{bottom:9%;font-size:11px}.menu-grid{grid-template-columns:1fr}.menu-brand{font-size:24px}}

.setup-card .setup-art{display:block;width:82px;height:82px;object-fit:contain;margin:0 auto 6px;image-rendering:pixelated;background:#d8cfb9;border:2px solid #71644d;border-radius:5px;}