/* Friends' Nunito typography, rounded cards and quiet controls in a black palette. */
html body[data-mode][data-screen=burning]{--burn-bg:#0c0c0e;--burn-card:#19191c;--burn-soft:#242427;--burn-line:#ffffff14;--burn-ink:#f5f5f5;--burn-muted:#a2a2a8}
html body[data-mode][data-screen=burning] :is(.burning-page,#dialog){--dx-font:Nunito,Arial,sans-serif;--look-ink:var(--burn-ink);--look-muted:var(--burn-muted);--look-pale:var(--burn-soft);color:var(--burn-ink)}
html body[data-mode][data-screen=burning] .burning-page{background:var(--burn-bg);max-width:1280px;margin-inline:auto}
html body[data-mode][data-screen=burning] :is(.burn-hero,.burn-offer,.burn-history-panel){background:var(--burn-card);border:0;box-shadow:none;border-radius:24px;padding:24px}
html body[data-mode][data-screen=burning] .burn-hero{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);grid-template-rows:auto 1fr auto;column-gap:40px;row-gap:0}
html body[data-mode][data-screen=burning] .burn-available{grid-column:1;grid-row:1;padding-top:0;text-align:center}
html body[data-mode][data-screen=burning] .burn-available>span{display:block;font-size:11px;font-weight:700;line-height:15px;color:var(--burn-muted)}
html body[data-mode][data-screen=burning] .burn-available>strong{font-size:34px;line-height:40px;font-weight:700!important;letter-spacing:-.02em;color:var(--burn-ink);margin-top:4px}
html body[data-mode][data-screen=burning] .burn-available strong small{font-size:12px;font-weight:700;color:var(--burn-muted)}
html body[data-mode][data-screen=burning] .burn-hero-art{grid-column:1;grid-row:2;height:220px;margin:8px 0}
html body[data-mode][data-screen=burning] .burn-hero-art .burn-mascot-animation{height:220px;width:220px;max-height:220px}
html body[data-mode][data-screen=burning] .burn-mission{grid-column:2;grid-row:1/4;text-align:left;align-self:center;max-width:none}
html body[data-mode][data-screen=burning] .burn-mission h1{margin:0;color:var(--burn-ink);font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.56px;text-wrap:balance}
html body[data-mode][data-screen=burning] .burn-mission p{color:var(--burn-muted);font-size:14px;font-weight:600;line-height:1.5;margin-top:12px}
html body[data-mode][data-screen=burning] .burn-mission .text-link{margin-top:14px;color:var(--burn-ink);font-size:12px;font-weight:700}
html body[data-mode][data-screen=burning] .burn-craft-details{margin-top:16px;padding:14px 0 0;border-color:var(--burn-line)}
html body[data-mode][data-screen=burning] .burn-craft-details summary{color:var(--burn-ink);font-size:13px;font-weight:700}
html body[data-mode][data-screen=burning] .burn-craft-details p{font-size:12px;font-weight:600}
html body[data-mode][data-screen=burning] .burn-totals{grid-column:1;grid-row:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
html body[data-mode][data-screen=burning] .burn-totals>div{padding:12px 8px;border-radius:12px;background:var(--burn-soft);border:0}
html body[data-mode][data-screen=burning] .burn-totals dt{font-size:10px;line-height:13px;font-weight:700;color:var(--burn-muted)}
html body[data-mode][data-screen=burning] .burn-totals dd{font-size:19px;line-height:24px;font-weight:700;margin-top:3px;color:var(--burn-ink)}
html body[data-mode][data-screen=burning] .burn-totals dd small{font-size:10px;font-weight:700;color:var(--burn-muted)}
html body[data-mode][data-screen=burning] .burn-totals [data-burn-bind=burned]{color:var(--burn-ink);-webkit-text-fill-color:currentColor;font-weight:700}
html body[data-mode][data-screen=burning] .burn-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px;margin-top:12px}
html body[data-mode][data-screen=burning] :is(.burn-offer-title,.burn-history-heading) .section-title{font-size:20px;font-weight:800;line-height:1.25;letter-spacing:0;color:var(--burn-ink)}
html body[data-mode][data-screen=burning] .burn-market-prices{gap:0;margin-top:18px}
html body[data-mode][data-screen=burning] .burn-market-prices>div{padding:12px 0;border-bottom:1px solid var(--burn-line)}
html body[data-mode][data-screen=burning] .burn-market-prices dt{font-size:13px;line-height:1.4;font-weight:600;color:var(--burn-muted)}
html body[data-mode][data-screen=burning] .burn-market-prices dd{font-size:16px;line-height:1.35;font-weight:700;color:var(--burn-ink)}
html body[data-mode][data-screen=burning] :is(.burn-test-note,.burn-test-settings){font-size:11px;line-height:1.5;color:var(--burn-muted);margin-top:12px}
html body[data-mode][data-screen=burning] .burn-history-heading p{font-size:12px;line-height:1.4;color:var(--burn-muted);margin-top:4px}
html body[data-mode][data-screen=burning] .burn-history-panel .text-link{color:var(--burn-ink);font-size:12px;font-weight:700}
html body[data-mode][data-screen=burning] .burn-tabs{gap:4px;min-height:44px;margin-top:16px;padding:4px;border-radius:16px;background:#0c0c0e66}
html body[data-mode][data-screen=burning] .burn-tabs>button{padding:8px 6px;border-radius:12px;color:var(--burn-muted);font-size:12px;font-weight:700;line-height:1.25}
html body[data-mode][data-screen=burning] .burn-tabs>button[aria-pressed=true]{background:#37373b;color:var(--burn-ink)}
html body[data-mode][data-screen=burning] .burn-history-list{--burn-row-height:76px;min-height:228px;max-height:380px;margin-top:10px;overflow:auto;scrollbar-color:#48484d transparent}
html body[data-mode][data-screen=burning] .burn-history-row{flex:none;grid-template-columns:46px minmax(0,1fr) minmax(80px,.8fr);gap:12px;padding:10px 0;border-color:var(--burn-line)}
html body[data-mode][data-screen=burning] .burn-history-row>img{background:var(--burn-soft);border-radius:12px;width:46px;height:46px}
html body[data-mode][data-screen=burning] .burn-history-row strong{font-size:13px;font-weight:700;color:var(--burn-ink)}
html body[data-mode][data-screen=burning] .burn-history-row small{font-size:10px;font-weight:600;color:var(--burn-muted)}
html body[data-mode][data-screen=burning] .burn-history-state{font-size:10px;font-weight:700;color:var(--burn-muted);background:transparent}
html body[data-mode][data-screen=burning] .burn-empty{color:var(--burn-muted);padding:24px 12px}
html body[data-mode][data-screen=burning] .burn-empty>span{color:#66666e}
html body[data-mode][data-screen=burning] .burn-empty>strong{color:var(--burn-ink);font-size:14px;font-weight:700}
html body[data-mode][data-screen=burning] .burn-empty>p{color:var(--burn-muted);font-size:12px;font-weight:600;line-height:1.5}
html body[data-mode][data-screen=burning] .burn-history-footer{min-height:38px;font-size:10px;font-weight:600;color:var(--burn-muted);border-top:1px solid var(--burn-line);margin-top:8px}
html body[data-mode][data-screen=burning] .burn-pager button{width:30px;height:30px;border:0;border-radius:9px;background:var(--burn-soft);color:var(--burn-ink);font-size:14px}
html body[data-mode][data-screen=burning] :is(button,summary,a):focus-visible{outline:2px solid #d3d3db;outline-offset:3px}
/* Dialogs use the same neutral surfaces as the page. */
html body[data-mode][data-screen=burning] #dialog{background:var(--burn-card);border:1px solid var(--burn-line);border-radius:24px;--hero-background:var(--burn-card)}
html body[data-mode][data-screen=burning] #dialog :is(.phase-current,.phase-list li,.phase-next-season,.burn-selected-gift,.burn-dialog-warning,.burn-proof,.burn-scenarios>button,.burn-gift-choice){background:var(--burn-soft);color:var(--burn-ink);border-color:var(--burn-line)}
html body[data-mode][data-screen=burning] #dialog :is(p,small,dt,label,.phase-note,.phase-section-label,.phase-copy small,.phase-amount,.burn-dialog-note,.burn-admin-summary,.burn-queue-footer,.burn-demo-label,.burn-selected-gift small,.burn-gift-choice small,.burn-scenarios small,.burn-proof code,.burn-confirm-check){color:var(--burn-muted)}
html body[data-mode][data-screen=burning] #dialog :is(.phase-number,.phase-list li.is-current .phase-number,.button-secondary,.dialog-close,.burn-tabs,.phase-rounds-link){background:var(--burn-soft);color:var(--burn-ink);border-color:var(--burn-line)}
html body[data-mode][data-screen=burning] #dialog :is(.button-primary,.burn-tabs>button[aria-pressed=true]){background:#eee;color:#1e1e1e;border-radius:12px}
html body[data-mode][data-screen=burning] #dialog :is(.text-link,.burn-proof strong,.burn-proof a,.burn-step-list li.is-complete){color:var(--burn-ink)}
html body[data-mode][data-screen=burning] #dialog :is(.burn-key-values>div,.burn-queue-row,.phase-list li,.burn-step-list li){border-color:var(--burn-line)}
html body[data-mode][data-screen=burning] #dialog :is(input,select,textarea){background:var(--burn-bg);color:var(--burn-ink);border-color:#44444b;accent-color:#ccc}
html[data-look] body[data-mode=mobile][data-screen=burning] .mobile-player-header button.mobile-phase-links{background:var(--burn-soft)}
html[data-look] body[data-mode=mobile][data-screen=burning] .mobile-phase-links :is(.phase-season,.phase-round){color:var(--burn-ink)}
html body[data-mode=mobile][data-screen=burning] .phase-chevron{border-color:var(--burn-muted)}
html body[data-mode=mobile][data-screen=burning] .mobile-nav .is-active{color:var(--burn-ink)}
html body[data-mode=mobile][data-screen=burning] .mobile-nav .is-active img{filter:brightness(0) invert(1)}
html body[data-mode=mobile][data-screen=burning] .burn-hero{display:flex;flex-direction:column;gap:0;padding:0 16px 20px;border-radius:0 0 24px 24px}
html body[data-mode=mobile][data-screen=burning] .burn-hero>.mobile-player-header{order:-4;align-self:stretch}
html body[data-mode=mobile][data-screen=burning] .burn-available{order:-3;padding-top:8px}
html body[data-mode=mobile][data-screen=burning] .burn-available>strong{font-size:30px;line-height:36px}
html body[data-mode=mobile][data-screen=burning] .burn-hero-art{order:-2;height:190px;margin:4px 0 12px}
html body[data-mode=mobile][data-screen=burning] .burn-hero-art .burn-mascot-animation{height:190px;width:190px}
html body[data-mode=mobile][data-screen=burning] .burn-totals{order:-1;width:100%;margin:0 0 20px}
html body[data-mode=mobile][data-screen=burning] .burn-mission h1{text-align:center;font-size:28px}
html body[data-mode=mobile][data-screen=burning] .burn-mission p{font-size:13px;line-height:1.5}
html body[data-mode=mobile][data-screen=burning] .burn-layout{display:flex;flex-direction:column;gap:12px;margin:12px 12px 0}
html body[data-mode=mobile][data-screen=burning] :is(.burn-offer,.burn-history-panel){padding:16px;border-radius:24px}
@media(max-width:360px){
  html body[data-mode][data-screen=burning] .burn-history-row{grid-template-columns:36px minmax(0,1fr) minmax(65px,.8fr);gap:8px}
  html body[data-mode][data-screen=burning] .burn-history-row>img{width:36px;height:36px}
  html body[data-mode][data-screen=burning] .burn-tabs>button{font-size:11px;padding-inline:3px}
  html body[data-mode][data-screen=burning] .burn-market-prices dt{font-size:12px}
  html body[data-mode][data-screen=burning] .burn-market-prices dd{font-size:14px}
}

/* Manual purchases happen on external markets; this screen reports burns. */
html body[data-mode][data-screen=burning] .burn-manual-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr)}
html body[data-mode][data-screen=burning] .burn-coming-soon{align-self:start}
html body[data-mode][data-screen=burning] .burn-coming-soon .section-title{color:var(--burn-ink);font-size:20px;font-weight:800;line-height:1.25;margin:0}
html body[data-mode][data-screen=burning] .burn-coming-soon p{color:var(--burn-muted);font-size:13px;font-weight:600;line-height:1.5;margin:12px 0 0}
html body[data-mode][data-screen=burning] [data-burn-manual] .burn-history-row{grid-template-columns:46px minmax(0,1fr) auto}
html body[data-mode][data-screen=burning] [data-burn-manual] .burn-history-row a{display:block;margin-top:6px;white-space:nowrap}
html body[data-mode][data-screen=burning] [data-burn-manual] .burn-empty>strong{font-size:16px;font-weight:800}
html body[data-mode][data-screen=burning] [data-burn-manual] .burn-empty>p{max-width:300px;line-height:1.5}
@media(max-width:700px){html body[data-mode][data-screen=burning] .burn-manual-layout{display:flex;flex-direction:column}html body[data-mode][data-screen=burning] .burn-coming-soon{align-self:stretch}}

html[data-look] body[data-mode][data-screen=burning] .burning-page :is(.panel,.burn-hero,.burn-offer,.burn-history-panel,.burn-totals>div){border:0;box-shadow:none}
html[data-look] body[data-mode][data-screen=burning] .burning-page .burn-unit{font-size:10px;font-weight:600;line-height:1;letter-spacing:0;color:var(--burn-muted)}