/* Shared trainer interface: all existing panels keep their own actions. */
#overlay {
  display: grid;
  grid-template-columns: minmax(145px, 27%) minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr) 26px;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(135deg, #102e30f7, #153d39f5);
  border: 2px solid #93b6a0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px #092725;
  font-family: 'Segoe UI', sans-serif;
  font-size: 13px;
}
.trainer-menu-top { grid-column: 1 / -1; position: relative; padding: 4px 40px 0 4px; color: #f3f5da; }
.menu-brand { display:block; font: 800 22px/1.1 'Segoe UI', sans-serif; letter-spacing: 4px; color:#e8d18b; }
.menu-edition { display:block; margin-top:5px; font-size:9px; letter-spacing:2px; color:#aac6b5; }
.menu-identity { position:absolute; right:42px; top:6px; text-align:right; display:grid; gap:4px; }
.menu-identity strong { font-size:16px; }
.menu-identity span { font-size:11px; color:#bdd8c5; }
#overlay .menu-close { position:absolute; top:0; right:0; font:24px/1 'Segoe UI',sans-serif; color:#f2f6df; padding:4px 9px; border:1px solid #668e79; background:#224d44; border-radius:7px; }
#menu { min-width:0; max-width:none; min-height:0; display:flex; flex-direction:column; gap:3px; padding:7px; background:#0b292b; border:1px solid #456f5d; border-radius:8px; box-shadow:none; scrollbar-width:thin; scrollbar-color:#6b9c80 #0b292b; }
#menu button { display:flex; flex-shrink:0; align-items:center; gap:10px; padding:9px 8px; min-height:37px; color:#d4e3d3; border:1px solid transparent; font-weight:600; border-radius:5px; text-align:left; }
#menu button:hover, #menu button:focus-visible { color:#fffde8; background:#234f43; outline:1px solid #b7d6a4; outline-offset:-1px; }
#menu button[aria-current='page'] { background:linear-gradient(100deg,#d7e9ba,#b4d7a0); color:#163e35; border-color:#e0eccb; box-shadow:inset 3px 0 #dfaa4b; }
.menu-icon { position:relative; display:inline-block; width:17px; height:17px; flex:0 0 17px; border:2px solid currentColor; border-radius:50%; opacity:.9; }
.icon-ball { background:linear-gradient(#dc7660 0 43%,#294c46 43% 57%,#f5ecd6 57%); border-color:#a2b99f; }
.icon-ball:after { content:''; position:absolute; width:5px; height:5px; border:1px solid #284e46; border-radius:50%; background:#faf4d7; left:4px; top:4px; }
.icon-dex,.icon-card,.icon-pc,.icon-save { border-radius:3px; }
.icon-dex { background:#d76558; box-shadow:inset 4px 0 #a94743; }
.icon-pc:after,.icon-card:after { content:''; position:absolute; inset:3px 2px; border-top:2px solid currentColor; border-bottom:2px solid currentColor; }
.icon-bag { border-radius:4px 4px 7px 7px; background:#c9a854; height:15px; margin-top:2px; }
.icon-bag:before { content:''; position:absolute; width:7px; height:4px; border:2px solid currentColor; left:1px; top:-6px; border-radius:4px 4px 0 0; }
.icon-egg { width:14px; flex-basis:14px; margin-right:3px; border-radius:60% 60% 45% 45%; background:radial-gradient(ellipse at 35% 35%,#64a45f 0 2px,transparent 3px),#ede3b9; }
.icon-coin { color:#e5c26c; box-shadow:inset 0 0 0 2px #997d40; }
.icon-link { border-radius:5px; transform:rotate(-30deg); width:13px; height:11px; flex-basis:13px; margin-right:4px; box-shadow:4px 4px 0 -1px #83a897; }
.icon-badge,.icon-star { border-radius:3px; transform:rotate(45deg); width:13px; height:13px; flex-basis:13px; margin:0 4px 0 1px; background:#c6b575; }
.icon-leaf { border-radius:0 80% 0 80%; background:#92bd77; }
.icon-save { border-bottom-width:6px; }
#detail { min-width:0; min-height:0; width:100%; max-width:none; max-height:none; border:1px solid #a9c297; border-radius:8px; padding:16px; background:linear-gradient(#fcfae9,#e9eed9); box-shadow:inset 0 0 0 3px #fffef4; color:#284b40; scrollbar-width:thin; scrollbar-color:#8eaf8b #eaf0db; }
#detail > h2 { margin:0 0 14px; padding:0 0 10px; font-size:19px; letter-spacing:.2px; border-bottom:1px solid #b8cba9; color:#244f43; }
#detail p { line-height:1.6; }
#detail button { min-height:32px; padding:7px 10px; border:1px solid #b6c6a4; border-radius:5px; background:#f7f8e9; box-shadow:0 2px 0 #b9c9a73b; font-weight:600; color:#305644; }
#detail button:hover, #detail button:focus-visible { background:#d7e8bf; outline:2px solid #42806a; }
#detail .party-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:4px 8px; padding:8px; margin-bottom:8px; background:#fffdf0; border:1px solid #b9cba8; border-radius:7px; box-shadow:0 3px 0 #98b78a26; }
#detail .party-row > :nth-child(2) { text-align:left; border:0; background:none; box-shadow:none; }
#detail .party-row > span { grid-column:2; font:11px monospace; color:#4d705c; }
#detail .party-row > :last-child { grid-column:3; grid-row:1 / 3; font-size:10px; }
#detail .party-row img { image-rendering:pixelated; }
#detail .dex-grid { gap:7px; }
#detail .summary-tabs { border-bottom:1px solid #b9cba8; padding-bottom:8px; }
#detail progress { accent-color:#3b9768; height:10px; }
.trainer-menu-foot { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; color:#b2c9ac; font:10px 'Segoe UI',sans-serif; gap:8px; padding:0 4px; }
@media(max-width:600px) {
  #overlay { position:fixed; inset:12px; z-index:70; grid-template-columns:112px minmax(0,1fr); grid-template-rows:64px minmax(0,1fr) 26px; padding:10px; gap:7px; font-size:12px; }
  .menu-brand { font-size:18px; letter-spacing:2px; }
  .menu-edition { font-size:8px; letter-spacing:1px; }
  .menu-identity { top:35px; left:4px; right:4px; display:flex; justify-content:space-between; text-align:left; }
  .menu-identity strong,.menu-identity span { font-size:10px; }
  #menu { padding:4px; }
  #menu button { padding:8px 4px; gap:6px; font-size:11px; }
  #detail { padding:10px; }
  #detail .party-row { grid-template-columns:28px minmax(0,1fr); gap:2px; padding:4px; }
  #detail .party-row > :last-child { grid-column:2; grid-row:auto; }
  #detail .party-row > :nth-child(2) { padding:3px; font-size:11px; }
  .trainer-menu-foot > :first-child { display:none; }
}

#dialog { z-index:10; border:4px double #438271; background:#fffde8; color:#294e44; padding:16px 20px; font-size:15px; line-height:1.65; box-shadow:0 0 0 2px #dce4bd,0 6px 16px #0005; }
.dialog-next { display:block; text-align:right; font-size:10px; line-height:1; color:#5b8266; }
.dialog-choices { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.dialog-choices button { border:1px solid #688d71; min-width:64px; text-align:center; background:#e4edce; }
.dialog-choices button:focus-visible { outline:2px solid #32785b; }
@media(max-width:600px) { #dialog { font-size:11px; padding:8px; line-height:1.45; } }

#detail .party-row > span { display:grid; gap:3px; }
#detail .party-row progress { display:block; width:100%; max-width:140px; height:7px; accent-color:#39946a; border:0; }
#detail .party-row progress[data-health='low'] { accent-color:#c65b4c; }
#detail .party-row progress[data-health='medium'] { accent-color:#c29d3c; }
#detail .party-row small { font-size:10px; }

#detail .party-row progress { appearance:none; -webkit-appearance:none; border-radius:5px; overflow:hidden; background:#d6dfcd; --hp-color:#39946a; }
#detail .party-row progress[data-health='low'] { --hp-color:#c65b4c; }
#detail .party-row progress[data-health='medium'] { --hp-color:#c29d3c; }
#detail .party-row progress::-webkit-progress-bar { background:#d6dfcd; border-radius:5px; }
#detail .party-row progress::-webkit-progress-value { background:var(--hp-color); border-radius:5px; }
#detail .party-row progress::-moz-progress-bar { background:var(--hp-color); border-radius:5px; }