/* Cartridge hardware: the title screen's mint-silver metal, with recessed reading surfaces. */
.metal-ui {
  --metal-face:linear-gradient(180deg,#f1faf5 0 4px,var(--metal-mid,#c7d8d2) 4px calc(100% - 7px),var(--metal-low,#adc4bb) calc(100% - 7px) calc(100% - 3px),var(--metal-edge,#607e75) calc(100% - 3px) 100%);
  --metal-rim:inset 3px 3px 0 #e9f6ed,inset -3px -3px 0 #47665e;
  --metal-shadow:var(--metal-rim),0 12px 28px #02121c55;
  --metal-dark:var(--metal-recess,#19312f);
  --metal-paper:#e5eee8;
}
/* Sections flow together; borders belong only to interactive UI and panels. */
html[data-palette] .metal-ui :is(main>section,.site-header,.site-footer,.footer-bottom,.integration-line) {border:0}
html[data-palette] .metal-ui .site-header {box-shadow:none}
.pixel-section-divider {display:flex;justify-content:center;align-items:center;gap:18px;height:24px;margin:0 auto;pointer-events:none}
.pixel-section-divider img {width:24px;height:24px;image-rendering:pixelated;filter:saturate(.65);opacity:.8}
.pixel-section-divider span {width:6px;height:6px;background:var(--metal-low,#adc4bb);box-shadow:18px 0 #8caf9e66,36px 0 #8caf9e33,54px 0 #8caf9e18}
.pixel-section-divider span:first-child {scale:-1 1}
@media(max-width:600px){.pixel-section-divider{gap:14px;height:20px}.pixel-section-divider img{width:20px;height:20px}.pixel-section-divider span{width:4px;height:4px}}
.metal-ui .closing {overflow:visible;border:0}
.closing .closing-logo {width:112vw;max-width:none;flex:none;margin:0;line-height:1}
.closing-logo img {display:block;width:100%;height:auto}
.closing .closing-inner {display:flex;align-items:flex-start;justify-content:center;width:100%;max-width:none;height:clamp(260px,26vw,500px);padding:0}
/* The art continues behind the copyright, clipped only at the page's edge. */
.closing .closing-logo {position:relative;top:calc(100% - 16.5vw - 28px);margin-bottom:0}
.closing-logo canvas {display:none;width:100%;height:100%;position:absolute;inset:0}
.closing-logo.pixel-ready img {opacity:0}
.closing-logo.pixel-ready canvas {display:block}
.questions>.faq-illustration:first-child {position:relative;min-width:0;padding-right:0}
.questions.section {padding-bottom:32px}
.faq-art {position:relative;width:calc(100% + clamp(40px,7vw,130px));max-width:640px;aspect-ratio:1;margin-top:36px;margin-left:clamp(-120px,-6vw,-40px);pointer-events:none}
.questions .faq-art .faq-pokemon {position:static;display:block;width:100%;height:auto;max-width:none;margin:0;image-rendering:pixelated;transform:scaleX(-1);filter:drop-shadow(0 20px 22px #0004)}
@media(max-width:900px){.faq-art{width:min(360px,90%);margin:24px auto 0}}
@media(max-width:600px){.faq-art{width:min(280px,88%);margin-top:20px}}
.metal-ui .site-footer {position:relative;isolation:isolate;overflow:clip;padding:0}
.site-footer::after {content:"";position:absolute;inset:auto 0 0;height:100px;z-index:1;background:linear-gradient(transparent,#061411a8);pointer-events:none}
.compact-footer {position:absolute;z-index:2;bottom:0;left:0;right:0;margin-inline:auto;padding-block:18px;display:flex;align-items:center;justify-content:space-between;gap:12px 30px;font:8px/1.8 var(--pixel)}
.compact-footer p {margin:0;font:13px/1.6 Chakra,Arial,sans-serif;color:var(--muted)}
@media(max-width:600px){.questions.section{padding-bottom:24px}.compact-footer{flex-direction:column;text-align:center;gap:6px;padding-block:14px}.closing .closing-logo{top:calc(100% - 16.5vw - 100px)}}
html[data-palette] .metal-ui .closing .closing-start {padding:22px 12px;min-height:72px;width:min(350px,80vw);background:var(--metal-face);border:3px solid #071719;box-shadow:var(--metal-shadow)}
.closing-start img {display:block;width:100%;height:auto;image-rendering:pixelated}
html[data-palette] .metal-ui :is(.pixel-frame,.pokedex-display,dialog,.faq-list details,.analysis-item,.agent-conclusion,.found-pokemon,.trade-offer,.battle-info,.party-line,.route-name,.logo-controls,.map-pixel-controls,.text-controls) {
  border:4px solid #071719;border-radius:0;outline:0;
  background:var(--metal-paper);color:var(--metal-ink,#172f31);
  box-shadow:var(--metal-shadow);
}
html[data-palette] .metal-ui :is(.pixel-frame,.pokedex-display) {padding:5px;background:var(--metal-edge,#9eb8ae)}
html[data-palette] .metal-ui :is(.mode-copy,.scene-controls,.pokedex-heading,.pokedex-grid,.pokedex-bottom) {background:var(--metal-paper);color:var(--metal-ink,#172f31)}
html[data-palette] .metal-ui :is(.mode-copy h3,.pokedex-heading h3,.dex-tile strong,dialog h2,dialog .pixel-label) {color:var(--metal-ink,#172f31)}
html[data-palette] .metal-ui :is(.window-top,.pokedex-top,.faq-list summary,.logo-controls>summary,.map-pixel-controls>summary,.text-controls>summary) {
  background:var(--metal-face);color:var(--metal-ink,#102b2a);border-radius:0;
  border:0;border-bottom:3px solid #47665e;box-shadow:var(--metal-rim);
}
html[data-palette] .metal-ui :is(.button,.header-cta,.menu-button,.mode-action,.segmented button,.filter-row button,.close-dialog,.starter-choice button,.pokedex-bottom button,.next-encounter,.trade-offer a,.trade-offer button,.logo-control-fields button,.map-pixel-controls button,.text-controls button,.pixel-exchange,.back-top) {
  background:var(--metal-face);color:var(--metal-ink,#102b2a);border:3px solid #071719;
  border-radius:0;box-shadow:var(--metal-shadow);text-shadow:none;
  transition:filter 180ms ease,box-shadow 180ms ease;
}
html[data-palette] .metal-ui :is(.button,.header-cta,.menu-button,.mode-action,.segmented button,.filter-row button,.close-dialog,.starter-choice button,.pokedex-bottom button,.next-encounter,.trade-offer a,.trade-offer button,.logo-control-fields button,.map-pixel-controls button,.text-controls button,.pixel-exchange,.back-top):hover {
  background:var(--metal-face);color:var(--metal-ink,#102b2a);filter:brightness(1.08);
  box-shadow:var(--metal-rim),0 14px 30px #02121c66;
}
html[data-palette] .metal-ui :is(.button,.header-cta,.menu-button,.mode-action,.segmented button,.filter-row button,.close-dialog,.starter-choice button,.pokedex-bottom button,.next-encounter,.trade-offer a,.trade-offer button,.pixel-exchange):active {
  filter:brightness(.93);box-shadow:inset 0 3px 8px #07171955,0 5px 16px #02121c44;
}
html[data-palette] .metal-ui :is(.segmented button.selected,.filter-row button.selected,.starter-choice button[aria-pressed=true]) {
  background:var(--metal-recess,#19312f);color:#b5ffd2;border-color:#8cc7b0;
  box-shadow:inset 0 3px 9px #061b1a88,0 6px 16px #02121c33;
}
html[data-palette] .metal-ui .mode-action {border-width:3px 0 0;min-height:72px}
html[data-palette] .metal-ui :is(.next-encounter,.trade-offer a,.trade-offer button,.back-top) {padding:12px 16px;min-height:44px}
html[data-palette] .metal-ui .header-cta {padding:14px 18px}
html[data-palette] .metal-ui .mode-action>span:last-child {color:#245446}
html[data-palette] .metal-ui .pixel-exchange svg path {fill:#193f35}
html[data-palette] .metal-ui .battle-dialogue {
  background:var(--metal-recess,#19312f);border:4px solid #071719;border-radius:0;
  box-shadow:var(--metal-rim);color:#edfff5;
}
html[data-palette] .metal-ui .battle-dialogue p {color:#edfff5}
html[data-palette] .metal-ui :is(.faq-list details[open],.faq-list details:first-child) {border-color:#071719}
html[data-palette] .metal-ui .faq-list summary {padding:22px 24px;color:var(--metal-ink,#102b2a)}
html[data-palette] .metal-ui .faq-list summary:hover {background:var(--metal-face);color:var(--metal-ink,#102b2a);filter:brightness(1.05)}
html[data-palette] .metal-ui .faq-list details[open] summary {border-bottom:3px solid #47665e}
html[data-palette] .metal-ui .faq-list summary>span {
  border:2px solid #071719;border-radius:0;background:var(--metal-recess,#19312f);color:#c5f5dc;
  box-shadow:inset 0 2px 5px #061b1a88;
}
html[data-palette] .metal-ui :is(.faq-list p,.analysis-item p,.agent-conclusion p,.trade-offer p,dialog p,dialog label,.dialog-note) {color:var(--metal-copy,#3a5654)}
html[data-palette] .metal-ui :is(.analysis-item h4,.agent-conclusion>.tiny-code) {color:var(--metal-ink,#172f31)}
html[data-palette] .metal-ui .analysis-icon {border:2px solid #678b7c;border-radius:0;background:#c9dfd1;color:#215a42}
html[data-palette] .metal-ui .caution .analysis-icon {background:#e9debb;border-color:#99875b;color:#695323}
html[data-palette] .metal-ui .dex-tile {
  background:var(--metal-tile,#cbdcd2);border:3px solid #47665e;border-radius:0;
  box-shadow:inset 2px 2px 0 #f2faf4,inset -2px -2px 0 #91aa9f,0 7px 18px #061b1a20;
}
html[data-palette] .metal-ui .dex-tile:hover {background:#dcf2e4;border-color:#365f50}
html[data-palette] .metal-ui .collection-benefits>div {
  padding:20px 24px;border:3px solid #6e9488;border-radius:0;
  background:var(--metal-recess,#19312f);box-shadow:inset 2px 2px 0 #a4c3b5,inset -2px -2px 0 #071719,0 12px 28px #02121c33;
}
html[data-palette] .metal-ui :is(.logo-controls,.map-pixel-controls,.text-controls) {background:var(--metal-recess,#19312f);color:#edfff5}
html[data-palette] .metal-ui :is(.logo-controls label,.logo-controls output,.map-pixel-controls label,.map-pixel-controls output,.map-pixel-controls p,.text-controls label) {color:#d6eee2}
html[data-palette] .metal-ui :is(.logo-controls summary span,.map-pixel-controls summary span,.text-controls>summary>span) {color:#245446}
html[data-palette] .metal-ui :is(input[type=search],.text-controls textarea,.text-controls select,.text-controls input[type=number]) {border-radius:0}
html[data-palette] .metal-ui :is(button,a,summary,input,select,textarea):focus-visible {outline:3px solid #a0ffc3;outline-offset:4px}
@media(max-width:600px) {
  html[data-palette] .metal-ui :is(.pixel-frame,.pokedex-display,dialog,.faq-list details,.analysis-item,.agent-conclusion,.found-pokemon,.trade-offer,.battle-info) {border-width:3px}
  html[data-palette] .metal-ui .faq-list summary {padding:20px 16px}
  html[data-palette] .metal-ui .collection-benefits>div {padding:18px}
  html[data-palette] .metal-ui :is(.trade-offer a,.trade-offer button) {padding:8px 10px}
}
@media(prefers-reduced-motion:reduce) {
  html[data-palette] .metal-ui :is(button,.button,.mode-action,summary) {transition:none}
}