/* Shared DS-era menu grammar. Layout, controls and saved progress remain owned by their existing modules. */
:root{--ds-ink:#283c4b;--ds-line:#4d6373;--ds-paper:#f7f8f2;--ds-silver:#c7d1d6;--ds-blue:#376b9e;--ds-red:#d85a4e;--ds-focus:#f59a59}
/* An LCD handheld has crisp pixels, without a CRT overlay or frosted menus. */
.crt{display:none}
#advModal,#dex,#party,#badge,#pause,#wmap,#hof{backdrop-filter:none}
#gameWrap,#fieldDeck{box-shadow:inset 0 0 0 2px #92aebf,0 5px 0 #102333}
#hud{background:linear-gradient(#557a99 0 48%,#416784 48%);border-bottom-color:#2c4359;box-shadow:inset 0 2px 0 #8daac0}
.hbtn{background:linear-gradient(#fcfcf7 0 48%,#d9e1e2 48%);border-color:#405c72;border-radius:4px;box-shadow:inset 0 0 0 1px #fff,0 2px 0 #263d4f;color:#2b4356}
.hbtn:hover{background:#fff1ca}
#btnMe{background:#e6ebe6;border-color:#526a75;padding:0}
#btnMe canvas{width:32px;height:32px;image-rendering:pixelated}
#btnDex{background:#d95551;border-color:#763c45;color:#fffdf1}
#btnBadge{background:#eaba59;border-color:#826239;color:#3c3a28}
#tracker,#advLocation,#toast{background:#f9faf2;border-color:#536a79;border-radius:5px 2px;box-shadow:inset 0 0 0 2px #c6d2cf,0 3px 0 #263d4c55;color:#2b4351}
#advLocation{border-left-color:#d05a4d}
#advLocation span{color:#53676d}
#advPrompt{background:#344d65;border-color:#c7d8df;border-radius:4px}
#fieldDeck{background:repeating-linear-gradient(0deg,#486583 0 3px,#4b6886 3px 6px);border-color:#253e56}
.deck-top{color:#fff5de;letter-spacing:1px}
.deck-screen{background:#f6f7ef;border:2px solid #304d65;border-radius:5px 2px;box-shadow:inset 0 0 0 2px #c6d2cf,0 2px 0 #263e53;color:#2c4554}
.deck-screen small{color:#4d6880}.deck-screen p{color:#506977}
.deck-screen h2{color:#2c4554}
.deck-nav{gap:6px}
.deck-nav button{background:linear-gradient(#fbfcf8 0 46%,#d2dde1 46%);color:#2d4b65;border:2px solid #2c475e;border-radius:6px 3px;box-shadow:inset 0 0 0 1px #faffff,0 2px 0 #263d51}
.deck-nav button span{color:#4d6678}
.deck-nav button:hover,.deck-nav button:focus-visible{background:linear-gradient(#fff8e9 0 46%,#f8d398 46%);border-color:#a34639;outline:2px solid #ffab69;outline-offset:1px}
.deck-hp{border:1px solid #486667;border-radius:2px;background:#b3c6c2}.deck-hp i{background:#4dba71}
.deck-progress>span{background:#acbbc8;border-color:#36536b;border-radius:3px;box-shadow:inset 0 2px 0 #899fb0}
.deck-progress>span.lit{background:#e8eeee;border-color:#617b8d;box-shadow:inset 0 2px 0 #fff}
.deck-balance{border-top:1px solid #92a7bd;padding-top:10px;color:#f9f8e7}
/* Dialogue and menus use solid layered borders and quiet interiors. */
#dlg,#choice{background:#f7f8ef;color:var(--ds-ink);border:3px solid #3e556b;border-radius:7px 2px;box-shadow:inset 0 0 0 3px #c5d0cd,0 3px 0 #213949}
#dlgName{color:#b3433d;letter-spacing:.04em}#dlgText{color:#293e4a}#dlgHint{color:#5b6d77}
#dlgPort{background:#d5e0de;border-color:#718995;border-radius:3px}
#chText{color:#2c4352}
#chBtns button{background:linear-gradient(#fbfcf8 0 48%,#dce4e3 48%);border:2px solid #4a6375;border-radius:4px;color:#2b4457;box-shadow:inset 0 0 0 1px #fff}
#chBtns button.sel{background:#ffdfab;border-color:#b75140;color:#573c2c;outline:2px solid #f39c55;outline-offset:-4px}
.adv-card{--ds-accent:#527d9d;border:3px solid #314e69;border-radius:6px;background:#e6ecec;box-shadow:inset 0 0 0 2px #a9bbc6,0 5px 0 #213b54}
#advModal[data-panel="bag"] .adv-card{--ds-accent:#b88637}
#advModal[data-panel="journal"] .adv-card{--ds-accent:#b65147}
#advModal[data-panel="region"] .adv-card{--ds-accent:#397f78}
#advModal[data-panel="options"] .adv-card{--ds-accent:#627181}
.adv-head{background:var(--ds-accent);color:#fffdf3;border-bottom:3px solid #304d62;box-shadow:inset 0 2px 0 #ffffff45}
.adv-head h2{font-size:22px;letter-spacing:0}
.adv-head button,.adv-button{background:linear-gradient(#fffef8 0 48%,#dce2e0 48%);border:2px solid #4f6471;border-radius:4px;color:#304b5c;box-shadow:inset 0 0 0 1px #fff,0 2px 0 #a0aeb4}
.adv-button:hover{background:#fff0cd;border-color:#b35d40}.adv-button.primary{background:#3973a5;color:#fffef5;border-color:#274d70;box-shadow:inset 0 2px 0 #75a4c7,0 2px 0 #213e5a}
.adv-row,.adv-place,.adv-inventory-card{background:linear-gradient(#fbfcf6 0 52%,#e5eae6 52%);border:2px solid #7e939d;border-radius:5px 2px;box-shadow:inset 0 0 0 1px #fff}
.adv-row.ready{background:#fff0c6;border-color:#b78238}.adv-row.complete{border-left:4px solid #35885a}
.adv-place:focus-visible,.adv-button:focus-visible,.adv-head button:focus-visible{outline:3px solid #f08a48;outline-offset:2px}
.adv-intro,.adv-row p,.adv-place p{color:#465e6b}
.adv-tag{background:#d5e0e6;color:#355970;border:1px solid #91a8b6;border-radius:2px}
.adv-milestones,.adv-hunt,.adv-restore-preview{background:#dce6e8;border-color:#7794a4;border-radius:4px}
.adv-milestones li,.adv-restore-team>div{background:#f6f7ef;border-color:#93a8ab;border-radius:3px}
.adv-milestones li.done{background:#d4e6bd;border-color:#698c67}
.adv-inventory-card strong{color:#294a60}.adv-meter{border-radius:2px}
/* Team slots retain their familiar diagonal handheld-panel corners. */
#party.team-notebook .team-card{background:#c4d8dd;border:3px solid #365c73;border-radius:6px;box-shadow:inset 0 0 0 3px #91b1c0,0 5px 0 #233d53}
.team-card #ptyTabs button{background:linear-gradient(#f4f7ed 0 48%,#bbcfd5 48%);border-color:#55778d;border-radius:5px 2px;color:#2e5068}
.team-card #ptyTabs button.sel{background:#42709c;border-color:#284d71;color:#fff9e6;box-shadow:inset 0 2px 0 #739bbe}
.team-tile{background:linear-gradient(#fbfcf4 0 47%,#d5e3e2 47%);border:2px solid #5b7e8c;border-radius:12px 3px 12px 3px;box-shadow:inset 0 2px 0 #fff,0 2px 0 #90a7b2}
.team-tile[aria-pressed=true]{background:linear-gradient(#fff8e6 0 47%,#ffd39b 47%);border-color:#ac4c3e;box-shadow:inset 0 0 0 2px #f8a267,0 2px 0 #825442}
.team-tile.shiny{background:linear-gradient(#fff8d0 0 47%,#e9d5a0 47%)}
.team-tile.shiny[aria-pressed=true]{border-color:#ac4c3e;box-shadow:inset 0 0 0 2px #f8a267,0 2px 0 #825442}
.team-hp{border-radius:2px;background:#839da0;border-color:#426571}.team-hp i{background:#58b87b}
.team-detail,.team-move,.team-swap{background:#f3f6ee;border-color:#718b9a;border-radius:4px;box-shadow:inset 0 0 0 1px #fff}
.team-stage,.guide-stage{background:linear-gradient(#bad9d2 0 42%,#8bb7a5 43% 49%,#b9d995 50%);border-color:#637f88;border-radius:4px}
.team-stage.shiny,.guide-stage.rare{background:linear-gradient(#e6d69b 0 42%,#b8b881 43% 49%,#d1d3a1 50%);border-color:#9b804e}
.team-empty-slot,.team-empty{background:#b6cbd3;border:2px solid #6a889b;border-radius:8px 2px;color:#3d5b70;box-shadow:inset 0 2px 0 #9cb3c0}
.team-toolbar input,.team-toolbar select,.guide-toolbar input,.guide-toolbar select{border-color:#687f90;border-radius:3px;background:#fbfcf7}
/* A red device surround and neutral list keep field-guide entries easy to scan. */
#dex .dexCard{background:#cc5554;border-color:#723c4a;border-radius:8px;box-shadow:inset 0 0 0 3px #ed8a77,0 5px 0 #472f3d}
#bugScreen.field-guide{background:#dbe5e4}
.guide-detail{background:#f5f7ef;border-color:#657c8b;border-radius:5px;box-shadow:inset 0 0 0 1px #fff,0 3px 0 #a7b9be}
.guide-entry{background:#edf2eb;border-color:#8ca1a8;border-radius:4px}
.guide-entry[aria-pressed="true"]{background:#ffdfac;border-color:#b35042;box-shadow:inset 0 0 0 2px #faab6b}
.guide-pose button,.guide-cry{background:#e0e9e8;border-color:#7c919e;border-radius:3px}
.guide-pose button[aria-pressed="true"]{background:#ffdfac;border-color:#b35042;color:#4e4033}
/* Trainer identity uses the existing character art and compact badge sockets. */
.bcard{background:#e4e9e6;border:3px solid #466680;border-radius:6px;box-shadow:inset 0 0 0 3px #b0c2ce,0 5px 0 #253f58}
.trainer-card-heading{background:#d86d54;color:#fffbe9;border:2px solid #9b5045;border-radius:4px 2px;font:700 15px/1.5 'Courier New',monospace;text-align:left;padding:7px 12px;margin-bottom:14px;letter-spacing:1px}
#trainerCardPortrait{display:block;margin:0 auto;width:96px;height:112px;image-rendering:pixelated;background:repeating-linear-gradient(0deg,#f2bba0 0 4px,#f6c5ad 4px 8px);border:2px solid #b57462;border-radius:4px}
.bcard h2{color:#375775}.bcard .bhead{border-bottom:2px solid #91a5ae;padding-bottom:7px;color:#385a73}
.blinks a,.blinks button{background:#eaf0ed;color:#345c79;border:2px solid #7691a2;box-shadow:inset 0 0 0 1px #fff;border-radius:3px;font-size:12px}
.bslot,.gslot{background:#f4f5ec;border-color:#8d9da8;border-radius:4px;box-shadow:inset 0 2px 0 #fff}
.gslot.lit{background:#e6eced;border-color:#687f90}
.pcard,.wcard,.hcard{background:#e5ebea;border:3px solid #4b677e;border-radius:6px;box-shadow:inset 0 0 0 2px #b6c7ce,0 5px 0 #283f54}
.popt{background:linear-gradient(#fcfcf5 0 48%,#d4dfe0 48%);border:2px solid #688293;border-radius:5px;color:#304f65}
.popt.sel{background:#ffdfac;border-color:#b55242;color:#483b2e;box-shadow:inset 0 0 0 2px #fba66a}
.hcard h2{color:#375976}.hall-record-stats span{background:#cadbe1;border-radius:3px}.hall-record-heading{border-top-color:#8fa7b0}
/* The title keeps its town artwork, with an opaque game-menu panel. */
#title .tcard{background:#2b4962;border:3px solid #94aebe;border-radius:6px;box-shadow:inset 0 0 0 2px #162e48,0 5px 0 #183149}
#titleStart{background:linear-gradient(#fff4cf 0 48%,#f0c786 48%);border:3px solid #bf654b;border-radius:5px;box-shadow:inset 0 0 0 2px #fff1c8,0 3px 0 #8d513d;color:#3c4550}
#titleStart:hover{background:#ffe4a8}
@media(max-width:700px){#btnMe canvas{width:28px;height:28px}.adv-head h2{font-size:20px}.trainer-card-heading{font-size:14px}#trainerCardPortrait{width:82px;height:96px}}

.pbtns button{background:linear-gradient(#fbfcf4 0 48%,#d3dedf 48%);border:2px solid #667f90;border-radius:5px 2px;box-shadow:inset 0 0 0 1px #fff,0 2px 0 #94a7b0;color:#304b60}
.pbtns button.sel{background:#ffdfac;border-color:#af5142;box-shadow:inset 0 0 0 2px #f8a164;color:#493b2e}
.pbtns button[data-o="reset"]{color:#963d32}
#pauseReset p{font:15px/1.6 'Courier New',monospace;text-align:left;margin:0 0 18px;color:#304b60}
.pbtns button[data-r="confirm"]{background:#a33832;color:#fffdf0;border-color:#71302e;box-shadow:inset 0 1px 0 #d88271,0 2px 0 #71302e}
.map-notes{background:#edf2eb;border-left-color:#5a8396;color:#385765}.map-place select{background:#f9faf4;border-color:#718a99;color:#304d63}

#dlgPort canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.hcard,.hcard h2,.hcard .hline,.map-place,.map-notes{font-family:'Courier New',monospace}

/* Restore the original compact portfolio header from the user's reference. */
#hud{
  height:60px;padding:8px 10px;gap:8px;background:linear-gradient(#20242ef2,#20242ecc);
  border-bottom:4px solid #20242e;box-shadow:none;
  font-family:'Press Start 2P','Courier New',monospace;container-type:inline-size;
}
#hud .hbtn,#hud #quick .q,#hud #quick a.q{
  font-family:inherit;font-weight:400;font-size:9px;line-height:1;min-height:0;
  padding:6px 8px;border:3px solid #20242e;border-radius:4px;
  background:#fdf6e3;color:#20242e;box-shadow:0 3px 0 #20242e;
}
#hud .hbtn:hover,#hud #quick .q:hover{background:#efe3c8;color:#b02a22}
#hud .hbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #20242e}
#hud #btnMe{padding:3px;width:40px;height:40px;flex:none;background:#e03a2f}
#hud #btnMe img{display:block;width:28px;height:28px;object-fit:cover;image-rendering:auto;border:2px solid #fdf6e3;border-radius:2px}
#hudInfo{max-width:280px;min-width:0;gap:4px}
#hudInfo b{font-size:8px;line-height:1.4;font-weight:700;color:#f2c037;letter-spacing:0}
#hudInfo b span{color:#5df2ff}
#hud #xpBar{width:120px;max-width:100%;height:9px;border:2px solid #00000088;border-radius:3px;background:#0a0e1a}
#hud #xpBar i{background:#5df2ff}
#hud #quick{position:static;display:flex;gap:6px;align-items:center;flex:none;margin:0}
#hud #quick .q{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:0;text-decoration:none}
#hud #quick .ql{display:inline}
#hud #quick .qic{width:11px;height:11px}
#hud #btnDex{background:#e03a2f;color:#fff;border-color:#20242e;flex:none}
#hud #btnBadge{background:#f2c037;color:#20242e;border-color:#20242e;flex:none}
#hud .hbtn:focus-visible{outline:3px solid #ffe571;outline-offset:3px}
/* The game can be narrower than the window because of the field-guide sidebar. */
@container(max-width:1000px){#hud #quick .ql{display:none}}
@media(max-width:1000px){#hud #quick .ql{display:none}}
@media(max-width:700px){
  #hud{height:58px;padding:7px 8px;gap:5px}
  #hud #btnMe{width:34px;height:34px;padding:2px}
  #hud #btnMe img{width:25px;height:25px}
  #hudInfo{flex:1;max-width:135px}#hudInfo b{font-size:7px}
  #hud #xpBar{width:84px}#hud .spacer{min-width:0}
  #hud #quick{gap:4px}#hud #quick .q{min-width:30px;padding:6px}
  #hud #quick a.q{display:none}
  #hud #btnDex,#hud #btnBadge{font-size:8px;padding:6px}
}