/* Adopt Me values + trade calculator. Dark-first "market terminal" design with a
   light theme override; teen-neutral (COPPA posture), same family as the other
   GamerToolHub tools. Every component reads tokens only. */
*{box-sizing:border-box}
:root{
  color-scheme:dark light;
  --bg:#0b0f0d; --surface-1:#121814; --surface-2:#18201a; --surface-3:#1e2821;
  --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.16);
  --ink:#e9f0ea; --muted:#93a297;
  --accent:#3dbb63; --accent-ink:#08130c; --accent-text:#58d385;
  --accent-soft:rgba(61,187,99,.12);
  --up:#45c877; --down:#ef5f5f; --mixed:#e0a530; --single:#8b949c;
  --agree:var(--up); --disagree:var(--down);
  --r-common:#98a6ad; --r-uncommon:#58b368; --r-rare:#5b90e8; --r-ultra:#a86ede; --r-legendary:#e0a417;
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 10px 32px rgba(0,0,0,.55);
  --glow:radial-gradient(600px 220px at 18% 0,rgba(61,187,99,.07),transparent);
}
[data-theme="light"]{
  color-scheme:light dark;
  --bg:#f4f7f5; --surface-1:#ffffff; --surface-2:#ffffff; --surface-3:#fafcfa;
  --hairline:#dde5df; --hairline-strong:#c8d4cc;
  --ink:#15231b; --muted:#5c6b61;
  --accent:#3aa856; --accent-ink:#ffffff; --accent-text:#2c8443;
  --accent-soft:#e7f5ec;
  --up:#1f8a4c; --down:#c9403c; --mixed:#b3821f; --single:#9aa0a6;
  --shadow-1:0 1px 2px rgba(21,35,27,.06);
  --shadow-2:0 10px 30px rgba(21,35,27,.14);
  --glow:none;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);background-image:var(--glow);background-repeat:no-repeat;
  color:var(--ink);line-height:1.45}
h1,h2,h3,.wordmark,.verdict-word{font-family:"Space Grotesk",system-ui,sans-serif}
.num{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
html.theme-anim *{transition:background-color .25s ease,color .25s ease,border-color .25s ease}

/* brand bar (family standard, dark in both themes) */
.brandbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:#12241a;padding:10px 16px}
.brandmark{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;
  font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;font-size:16px}
.brandmark .wordmark span{color:#6ee29a}
.brandmark svg{border-radius:5px;flex-shrink:0}
.brand-right{display:flex;align-items:center;gap:14px}
.brandall{color:#bfe6cc;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.brandall:hover{color:#fff}
.theme-toggle{border:1px solid rgba(255,255,255,.22);background:none;color:#bfe6cc;
  border-radius:8px;width:32px;height:32px;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;padding:0}
.theme-toggle:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.theme-toggle svg{width:16px;height:16px}
[data-theme="dark"] .theme-toggle .ic-moon{display:none}
[data-theme="light"] .theme-toggle .ic-sun{display:none}

.wrap{max-width:860px;margin:0 auto;padding:0 14px 60px}
header.tool{padding:22px 0 6px}
header.tool h1{margin:0 0 6px;font-size:clamp(24px,5.5vw,34px);line-height:1.12}
.updated{display:inline-block;background:var(--accent-soft);color:var(--accent-text);
  border:1px solid var(--hairline-strong);border-radius:999px;padding:3px 12px;
  font-size:13px;font-weight:600;margin:2px 0 8px}
.lede{margin:6px 0 12px;color:var(--muted);font-size:15px;max-width:64ch}
.lede a{color:var(--accent-text)}
.lede b{color:var(--ink)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px}
.btn{display:inline-block;border:0;border-radius:10px;padding:12px 18px;font-size:15px;
  font-weight:700;cursor:pointer;text-decoration:none;text-align:center}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:var(--surface-1);color:var(--ink);border:1.5px solid var(--hairline-strong)}
.btn-ghost:hover{border-color:var(--accent)}

/* agreement legend + dots */
.legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted);margin:0 0 10px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle;flex-shrink:0}
.dot-a{background:var(--agree)}.dot-m{background:var(--mixed)}.dot-d{background:var(--disagree)}.dot-s{background:var(--single)}

/* fact chips: the kid-first replacement for explainer paragraphs */
.facts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.fact{display:inline-flex;align-items:center;gap:8px;background:var(--surface-1);
  border:1px solid var(--hairline);border-radius:12px;padding:9px 14px;
  font-size:13.5px;font-weight:600;color:var(--ink)}
.fact .num{color:var(--accent-text);font-size:15px}
.fact .dot{margin-right:0}
.hint-line{font-size:14px;color:var(--muted);margin:0 0 10px}

/* collapsed long-form copy (still in the page for search engines) */
details.copy{margin-top:30px}
details.copy summary{cursor:pointer;font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:700;font-size:16px;color:var(--muted);padding:12px 0;list-style:none;
  display:flex;align-items:center;gap:8px}
details.copy summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
details.copy[open] summary::before{transform:rotate(45deg)}
details.copy summary::-webkit-details-marker{display:none}

/* movers strip (hidden until real history exists) */
.movers{display:none;gap:8px;overflow-x:auto;padding:2px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.movers.on{display:flex}
.movers::-webkit-scrollbar{display:none}
.mover{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;background:var(--surface-1);
  border:1px solid var(--hairline);border-radius:10px;padding:7px 11px;font-size:13px;
  cursor:pointer;color:var(--ink)}
.mover b{font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mover .pct{font-size:12.5px;font-weight:600}
.mover .pct.up{color:var(--up)}.mover .pct.down{color:var(--down)}
.movers-label{flex:0 0 auto;align-self:center;font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;padding-right:2px}

/* sticky controls */
.controls{position:sticky;top:0;z-index:20;background:var(--bg);padding:8px 0 10px;border-bottom:1px solid var(--hairline)}
.search{width:100%;padding:12px 14px;font-size:16px;border:1.5px solid var(--hairline-strong);
  border-radius:10px;background:var(--surface-1);color:var(--ink)}
.search::placeholder{color:var(--muted)}
.search:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.chiprow{display:flex;gap:6px;overflow-x:auto;padding:8px 0 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1.5px solid var(--hairline);background:var(--surface-1);color:var(--ink);
  border-radius:999px;padding:6px 13px;font-size:13.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background-color .15s,border-color .15s}
.chip:hover{border-color:var(--hairline-strong)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sortrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:8px;font-size:13px;color:var(--muted)}
.sortrow select{font-size:14px;padding:5px 8px;border-radius:8px;border:1.5px solid var(--hairline-strong);
  background:var(--surface-1);color:var(--ink)}

/* item list: market-table rows */
.list{margin:10px 0 0;padding:0;list-style:none}
.item{background:var(--surface-1);border:1px solid var(--hairline);border-radius:12px;
  margin:0 0 8px;overflow:hidden;box-shadow:var(--shadow-1)}
.item-head{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.item-head:hover{background:var(--surface-3)}
.rchip{flex:0 0 auto;width:12px;height:26px;border-radius:4px}
.r-common{background:var(--r-common)}.r-uncommon{background:var(--r-uncommon)}.r-rare{background:var(--r-rare)}
.r-ultra-rare{background:var(--r-ultra)}.r-legendary{background:var(--r-legendary)}
.item-name{flex:1 1 auto;min-width:0;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-sub{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.spark{flex:0 0 auto;width:64px;height:22px}
@media(max-width:400px){.spark{display:none}}
.item-val{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  font-weight:600;font-size:15px}
.item-val small{font-weight:600;color:var(--muted);font-size:11px}
.delta{font-size:11px;font-weight:600}
.delta.up{color:var(--up)}.delta.down{color:var(--down)}.delta.flat{color:var(--muted)}
.item-body{border-top:1px dashed var(--hairline);padding:10px 12px 12px;font-size:14px}
.agree-note{margin:0 0 8px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.conf{display:inline-flex;gap:2px;margin-left:2px}
.conf i{width:10px;height:3px;border-radius:2px;background:var(--hairline-strong)}
.conf.c3 i{background:var(--agree)}
.conf.c2 i:nth-child(-n+2){background:var(--mixed)}
.conf.c1 i:nth-child(1){background:var(--disagree)}
.vgrid{width:100%;border-collapse:collapse}
.vgrid th,.vgrid td{padding:6px 4px;text-align:right;font-size:13.5px;border-top:1px solid var(--hairline)}
.vgrid th{color:var(--muted);font-weight:600;text-align:right;font-family:inherit}
.vgrid th:first-child,.vgrid td:first-child{text-align:left}
.vgrid tr:first-child th{border-top:0}
.sentinel{height:8px}
.count-note{color:var(--muted);font-size:13px;margin:8px 0}

/* calculator */
.calc-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px}
@media(min-width:760px){.calc-grid{grid-template-columns:1fr 1fr}}
.offer{background:var(--surface-1);border:1px solid var(--hairline);border-radius:14px;padding:12px;box-shadow:var(--shadow-1)}
.offer h2{margin:0 0 8px;font-size:17px}
.offer-list{list-style:none;margin:0;padding:0}
.offer-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--hairline);font-size:14px}
.offer-item .nm{flex:1 1 auto;min-width:0}
.offer-item .nm b{display:block;font-size:14px}
.offer-item .nm span{font-size:12px;color:var(--muted)}
.offer-item .vv{font-weight:600;white-space:nowrap;font-size:14px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--hairline-strong);border-radius:8px;overflow:hidden}
.qty button{border:0;background:var(--surface-1);color:var(--ink);width:30px;height:30px;font-size:16px;cursor:pointer}
.qty button:hover{background:var(--surface-3)}
.qty span{min-width:22px;text-align:center;font-weight:700;font-size:14px}
.rm{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;padding:2px 6px}
.rm:hover{color:var(--down)}
.add-btn{width:100%;margin-top:10px}
.subtotal{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);padding-top:9px}
.subtotal b{color:var(--ink);font-size:15px}

/* verdict: the designed moment */
.verdict{background:var(--surface-1);border:2px solid var(--hairline-strong);border-radius:16px;
  text-align:center;padding:18px 14px;margin:14px 0;box-shadow:var(--shadow-1)}
.beam-wrap{position:relative;max-width:440px;margin:0 auto 6px;padding:6px 0 14px}
.beam{display:flex;justify-content:space-between;align-items:center;position:relative;
  transform:rotate(var(--tilt,0deg));transform-origin:50% 100%;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.beam::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:3px;margin-top:-1.5px;
  background:var(--hairline-strong);border-radius:2px}
.beam-end{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--surface-3);border:1px solid var(--hairline-strong);border-radius:12px;
  padding:8px 14px;min-width:96px}
.beam-end b{font-size:17px;font-weight:600}
.beam-end i{font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pivot{position:absolute;left:50%;bottom:0;width:0;height:0;transform:translateX(-50%);
  border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:12px solid var(--hairline-strong)}
.verdict-word{font-size:clamp(36px,9vw,54px);font-weight:700;letter-spacing:1px;margin:2px 0 0;line-height:1.1}
.verdict.win{border-color:var(--up)} .verdict.win .verdict-word{color:var(--up)}
.verdict.lose{border-color:var(--down)} .verdict.lose .verdict-word{color:var(--down)}
.verdict.fair{border-color:var(--mixed)} .verdict.fair .verdict-word{color:var(--mixed)}
.verdict.empty .verdict-word{color:var(--muted);font-size:20px;letter-spacing:0}
.verdict-word.pop{animation:verdict-pop .3s ease}
@keyframes verdict-pop{0%{opacity:0;transform:scale(.85)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.verdict-detail{margin:6px 0 0;font-size:14px;color:var(--muted)}
.verdict-fair{margin:8px 0 0;font-size:13.5px;color:var(--ink)}
.suggest-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.suggest{border:1.5px solid var(--hairline-strong);background:var(--surface-3);color:var(--ink);
  border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.suggest:hover{border-color:var(--accent)}
.suggest small{color:var(--muted);font-weight:600}
.verdict-actions{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.verdict-actions .btn{padding:9px 14px;font-size:13.5px}
.lowconf{display:inline-block;margin-top:10px;background:var(--accent-soft);color:var(--mixed);
  border:1px solid var(--hairline-strong);border-radius:999px;padding:3px 12px;font-size:12.5px;font-weight:600}
.honesty{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* sticky mobile summary bar */
.summarybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  background:var(--surface-2);border-top:1px solid var(--hairline-strong);box-shadow:var(--shadow-2);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));cursor:pointer}
.summarybar.on{display:flex;justify-content:space-between;align-items:center;gap:10px}
@media(min-width:760px){.summarybar.on{display:none}}
.summarybar .sb-side{font-size:13px;color:var(--muted)}
.summarybar .sb-side b{display:block;color:var(--ink);font-size:15px;font-weight:600}
.summarybar .sb-verdict{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:18px;letter-spacing:.5px}
.summarybar .sb-verdict.win{color:var(--up)}.summarybar .sb-verdict.lose{color:var(--down)}
.summarybar .sb-verdict.fair{color:var(--mixed)}.summarybar .sb-verdict.empty{color:var(--muted);font-size:13px}

/* picker modal */
.modal{position:fixed;inset:0;z-index:50;display:none}
.modal.open{display:block}
.modal-bg{position:absolute;inset:0;background:rgba(4,8,6,.6)}
.modal.open .modal-bg{animation:fade-in .2s ease}
@keyframes fade-in{from{opacity:0}}
.modal-card{position:absolute;left:0;right:0;bottom:0;top:8vh;background:var(--bg);
  border:1px solid var(--hairline-strong);border-bottom:0;
  border-radius:16px 16px 0 0;display:flex;flex-direction:column;max-width:560px;margin:0 auto;overflow:hidden}
.modal.open .modal-card{animation:sheet-up .25s ease-out}
@keyframes sheet-up{from{transform:translateY(24px);opacity:.6}}
@media(min-width:760px){.modal-card{top:10vh;bottom:10vh;border-radius:16px;border-bottom:1px solid var(--hairline-strong)}}
.modal-head{padding:12px 14px 8px;background:var(--bg);border-bottom:1px solid var(--hairline)}
.modal-head .search{margin-bottom:0}
.modal-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px}
.modal-title h3{margin:0;font-size:16px}
.modal-close{border:0;background:none;font-size:22px;cursor:pointer;color:var(--muted);padding:2px 8px}
.modal-close:hover{color:var(--ink)}
.modal-list{flex:1 1 auto;overflow-y:auto;padding:8px 14px 14px}
.pick-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface-1);
  border:1px solid var(--hairline);border-radius:10px;padding:10px 12px;margin:0 0 6px;cursor:pointer;
  font-size:14.5px;color:var(--ink)}
.pick-row:hover{border-color:var(--accent)}
.pick-row .item-val{font-size:14px}
/* variant step */
.vstep{padding:12px 14px;border-top:1px solid var(--hairline-strong);background:var(--surface-2)}
.vstep .nm{font-weight:700;margin:0 0 8px}
.seg{display:flex;border:1.5px solid var(--hairline-strong);border-radius:10px;overflow:hidden;margin:0 0 8px}
.seg button{flex:1;border:0;background:var(--surface-1);color:var(--ink);padding:10px 4px;
  font-size:13.5px;font-weight:600;cursor:pointer;transition:background-color .15s}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg button:disabled{color:var(--single);opacity:.45;cursor:not-allowed}
.togglerow{display:flex;gap:8px;margin:0 0 10px}
.toggle{flex:1;border:1.5px solid var(--hairline-strong);border-radius:10px;background:var(--surface-1);
  color:var(--ink);padding:10px 4px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background-color .15s}
.toggle[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.toggle:disabled{color:var(--single);opacity:.45;cursor:not-allowed}
.vstep-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vstep-val{font-weight:600;font-size:17px}
.vstep-val small{color:var(--muted);font-size:12px;font-weight:600}

/* motion: list + offers */
.row-in{animation:row-in .32s ease both;animation-delay:calc(var(--i,0)*16ms)}
@keyframes row-in{from{opacity:0;transform:translateY(6px)}}
.pop-in{animation:pop-in .2s ease}
@keyframes pop-in{from{opacity:0;transform:scale(.96)}}
.item-out{opacity:0;transition:opacity .16s ease}

/* SEO copy + footer */
.copy{margin-top:34px;font-size:15px}
.copy h2{font-size:20px;margin:22px 0 6px}
.copy p{margin:6px 0;max-width:70ch;color:var(--ink)}
.copy a{color:var(--accent-text)}
.foot{margin-top:36px;padding-top:14px;border-top:1px solid var(--hairline);color:var(--muted);font-size:12.5px}
.foot a{color:var(--accent-text)}
.install-hint{display:none;margin:10px 0 0}
.install-hint.on{display:inline-block}
@media(display-mode:standalone){.install-hint{display:none !important}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}