@import url('/home/tokens.css');
/* Dragon Bowl Z presentation layer. Keep gameplay and touch geometry in the existing styles. */
.dragon-bowl {
  --brand-ink: var(--arcade-black);
  --brand-panel: var(--arcade-black);
  --brand-raised: var(--arcade-black);
  --brand-line: var(--energy-blue);
  --brand-cream: var(--pixel-ivory);
  --brand-gold: var(--power-yellow);
  --brand-red: var(--db-orange);
  --brand-cyan: var(--energy-blue);
  --brand-muted: var(--pixel-ivory);
  --brand-sans: Inter, system-ui, sans-serif;
  background: var(--brand-ink);
  color: var(--brand-cream);
}
.dragon-bowl :focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 3px;
}
.dragon-workshop body,
.dragon-workshop body.butoden-draft {
  background: var(--brand-ink);
  color: var(--brand-cream);
  font-family: var(--brand-sans);
}
.dragon-workshop #db22-root > header {
  margin: 0;
  padding: 7px clamp(12px, 2vw, 28px);
  min-height: 54px;
  gap: 8px clamp(12px, 2vw, 28px);
  background: var(--arcade-black);
  border: 0;
  border-bottom: 2px solid var(--brand-red);
  box-shadow: none;
}
.dragon-workshop .db-wordmark { flex: none; line-height: 0; }
.dragon-workshop .db-wordmark img {
  display: block;
  width: clamp(158px, 22vw, 260px);
  height: auto;
}
.dragon-workshop #db22-root > header nav :is(button, a) {
  font: 700 12px/1.3 var(--brand-sans);
  color: var(--brand-cream);
  text-decoration: none;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}
.dragon-workshop #db22-root > header nav [aria-current=page] {
  background: var(--brand-gold);
  color: var(--brand-ink);
}
.dragon-workshop :is(.panel, .pixel-panel, .character-dialog, .draft-bottom) {
  background: var(--brand-panel);
  border-color: var(--brand-line);
  box-shadow: none;
}
.dragon-workshop .draft-command h1 {
  border-color: var(--brand-line);
  text-shadow: none;
}
.dragon-workshop :is(.candidate-card, .hero-portrait) {
  border-color: var(--brand-line);
  box-shadow: none;
}
.dragon-workshop :is(h2, summary, .slot b, .stats b) { color: var(--brand-gold); }
.dragon-workshop :is(p, .field-tip, .dialog-footnote) { color: var(--brand-muted); }
.dragon-workshop :is(#play, #assign, #download-team-picture) {
  background: var(--brand-gold);
  color: var(--brand-ink);
  text-shadow: none;
}
.dragon-workshop .butoden-draft button:not(.field-slot):not(.candidate-card):not(:disabled):not([aria-current=page]):not(#download-team-picture) {
  background: var(--brand-raised);
  border-color: var(--brand-line);
  box-shadow: none;
  text-shadow: none;
}
.dragon-workshop .butoden-draft .field-slot.target {
  outline: 2px solid var(--brand-cyan);
  outline-offset: -2px;
}
@media (max-width: 660px) {
  .dragon-workshop #db22-root > header {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .dragon-workshop #db22-root > header nav :is(button, a) { padding: 6px 8px; }
}

.dragon-match .screen.title {
  flex-direction: column;
  gap: clamp(8px, 2vh, 22px);
  padding-bottom: calc(36px + var(--safe-b));
  background: linear-gradient(180deg, var(--arcade-black), var(--arcade-black) 52%, var(--arcade-black));
}
.dragon-match .title-logo { animation: none; }
.dragon-match .dragon-title-mark { display: block; width: min(82vw, 840px); }
.dragon-match .subtitle { margin: 6px 0 0; color: var(--brand-cyan); }
.dragon-match .title-menu {
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: min(94vw, 880px);
}
.dragon-match .title-menu .pbtn,
html.dragon-match.short .title-menu .pbtn {
  margin: 0;
  padding: 10px 13px;
  font: 800 clamp(11px, 1.45vw, 15px)/1.2 var(--brand-sans);
  min-height: 38px;
}
.dragon-match .title-menu .pbtn.sel::before { display: none; }
.dragon-match .title-foot :is(.backlink, .fanmade), .dragon-match .press-start {
  box-shadow: none;
  background: var(--brand-ink);
}
.dragon-match .title-foot .fanmade {
  font: 600 10px/1.35 var(--brand-sans);
  text-shadow: none;
}
.dragon-match .press-start { animation: none; color: var(--brand-muted); }
.dragon-match .title-live { border-color: var(--brand-line); }
.dragon-match :is(.teamsel, .oppsel, .help, .settings) { background: var(--arcade-black); }
.dragon-match :is(.panel, .pc-panel, .flow-panel, .fourth, .mvp) { background: var(--brand-panel); }
.dragon-match :is(.panel, .pc-panel, .flow-panel, .fourth, .mvp, .card, .pcard, .pbtn, .sb, .ticker) {
  box-shadow: 0 0 0 1px var(--brand-line), 0 4px 0 var(--arcade-black);
}
.dragon-match .panel-head {
  background: var(--brand-ink);
  border-bottom-color: var(--brand-red);
}
.dragon-match :is(.stitle, .ptitle) { color: var(--brand-gold); text-shadow: none; }
.dragon-match .pbtn { background: var(--brand-raised); color: var(--brand-cream); text-shadow: none; }
.dragon-match .pbtn.primary:not(:disabled) { background: var(--brand-gold); color: var(--brand-ink); }
.dragon-match .pbtn.on:not(:disabled) { background: var(--brand-cyan); color: var(--brand-ink); }
.dragon-match :is(.pbtn, .card, .pcard).sel {
  box-shadow: 0 0 0 2px var(--brand-cyan), 0 4px 0 var(--arcade-black);
}
.dragon-match .pbtn:disabled { color: var(--pixel-ivory); }
.dragon-match .sb, .dragon-match .ticker { background: var(--brand-ink); }
.dragon-match .sb-time { background: var(--db-orange); }
.dragon-match .sb-score { color: var(--brand-cream); }
.dragon-match :is(.tk-dd, .sb-clock.low) { color: var(--brand-gold); }
.dragon-match :is(.help-body, .card-desc, .pcard-desc) { font-family: var(--brand-sans); }
@media (max-height: 480px) {
  html.dragon-match.short .screen.title { gap: 8px; }
  .dragon-match .dragon-title-mark { width: min(78vw, 100vh, 600px); }
}
.dragon-match .db-cinema { background: var(--arcade-black); }
.dragon-match .db-cinema canvas { border-color: var(--brand-line); }
.dragon-match :is(.db-cinema, .db-match-tools, .db-st-calls) :is(button, select) {
  background: var(--brand-raised);
  border-color: var(--brand-line);
  color: var(--brand-cream);
}
.dragon-match .db-cinema-controls button:first-child {
  background: var(--brand-gold);
  color: var(--brand-ink);
}

/* Shared arcade palette for menus; field, HUD, mechanics and touch geometry stay intact. */
.dragon-bowl{--brand-panel:var(--pixel-ivory);--brand-raised:var(--power-yellow);background:var(--energy-blue)}
.dragon-match .screen{--navy:var(--pixel-ivory);--navy2:var(--power-yellow);--navy3:var(--pixel-ivory);--line:var(--arcade-black);--cream:var(--arcade-black);--white:var(--arcade-black);--muted:var(--arcade-black);--yellow:var(--power-yellow);--cyan:var(--energy-blue);--red:var(--db-orange);color:var(--arcade-black);text-shadow:none}
.dragon-match .screen.title{background:var(--energy-blue) url('/home/assets/football-team-promo-v1.jpg') center bottom/cover no-repeat;background-blend-mode:soft-light}
.dragon-match .dragon-title-mark{background:var(--pixel-ivory);padding:12px 16px;border:3px solid var(--arcade-black);box-shadow:5px 5px 0 var(--db-orange);box-sizing:border-box}
.dragon-match .title-right{background:var(--pixel-ivory);border:3px solid var(--arcade-black);padding:clamp(12px,2vw,24px);box-shadow:5px 5px 0 var(--arcade-black);max-width:94vw}
.dragon-match .subtitle,.dragon-match .press-start{color:var(--arcade-black);background:transparent;text-shadow:none}
.dragon-match .title-foot :is(.backlink,.fanmade){background:var(--pixel-ivory);color:var(--arcade-black);padding:5px 8px;border:1px solid var(--arcade-black)}
.dragon-match :is(.screen.teamsel,.screen.oppsel,.screen.help,.screen.settings,.screen.mo-screen){background:var(--energy-blue)}
.dragon-match .screen :is(.panel,.card,.team-card,.mo-panel,.mo-cfront,.mo-step,.mo-gcard,.mo-lteam){background:var(--pixel-ivory);color:var(--arcade-black);border-color:var(--arcade-black)}
.dragon-match .screen :is(.card-head,.panel-head,.mo-chead){background:var(--power-yellow);color:var(--arcade-black);border-color:var(--arcade-black)}
.dragon-match .screen :is(.stitle,.ptitle,.card-name,.card-desc,.subtitle,.mo-cname,.mo-step-t,.mo-step-d,.mo-fit,.mo-stat,.mo-lead,.mo-current,.mo-empty-go,.mo-gname,.mo-gdesc){color:var(--arcade-black);text-shadow:none}
.dragon-match .screen :is(.pbtn,.pbtn.primary,.pbtn.on){color:var(--arcade-black);background:var(--power-yellow);border:2px solid var(--arcade-black);text-shadow:none}
.dragon-match .screen .pbtn:disabled{background:var(--pixel-ivory);color:var(--arcade-black);opacity:.55}
.dragon-match .screen :is(.pbtn,.card,.pcard):focus-visible{outline:3px solid var(--arcade-black);outline-offset:4px}
.dragon-match .screen :is(.card-art,.mo-cart,.mo-empty-art,.mo-gaces){background:var(--energy-blue)}
.dragon-workshop body,.dragon-workshop body.butoden-draft{background:var(--energy-blue);color:var(--arcade-black)}
.dragon-workshop #db22-root>header{background:var(--pixel-ivory);border-bottom:3px solid var(--arcade-black)}
.dragon-workshop #db22-root>header nav :is(button,a){color:var(--arcade-black)}
.dragon-workshop :is(.panel,.pixel-panel,.character-dialog,.draft-bottom){background:var(--pixel-ivory);color:var(--arcade-black)}
.dragon-workshop :is(h2,summary,.slot b,.stats b,p,.field-tip,.dialog-footnote){color:var(--arcade-black)}
.workshop-save-note{background:var(--pixel-ivory);color:var(--arcade-black)!important;border:2px solid var(--arcade-black);padding:14px 18px;font:14px/1.7 Inter,system-ui,sans-serif;margin:20px 0 14px}
@media(max-height:480px){.dragon-match .title-right{padding:10px}.dragon-match .dragon-title-mark{padding:8px 12px}.dragon-match .title-foot .fanmade{font-size:8px}.dragon-match .title-menu .pbtn{min-height:38px}}
.dragon-match .screen :is(.tc-note,.tc-meta,.opp-desc,.opp-meta,.opp-name,.help-body,.setting-label){color:var(--arcade-black);text-shadow:none}
.dragon-match .screen .tc-ovr i{color:var(--pixel-ivory)}
.dragon-match .screen .formation{--cream:var(--pixel-ivory);background:var(--energy-blue)}
.dragon-match .screen .f-pos,.dragon-match .screen .f-row.d .f-pos{color:var(--pixel-ivory)}
.dragon-match .screen .title-live{background:var(--arcade-black);color:var(--pixel-ivory)}
.dragon-match .screen .title-live{--white:var(--pixel-ivory);--cream:var(--pixel-ivory)}
.dragon-match .screen :is(.tc-head,.gc-head){background:var(--power-yellow);color:var(--arcade-black);border-color:var(--arcade-black)}
.dragon-match .screen .tc-bar .track i{background:var(--energy-blue)}
.dragon-match .screen .gc-sprites{background:var(--energy-blue)}
.dragon-match .screen :is(.gc-name,.gc-leader,.gc-leader b,.gc-foot,.gc-type){color:var(--arcade-black);text-shadow:none}
.dragon-match .title-menu .pbtn,html.dragon-match.short .title-menu .pbtn{min-height:44px}
/* Keep in-match overlays on their original high-contrast dramatic panels. */
.dragon-match{--brand-panel:var(--arcade-black);--brand-raised:var(--arcade-black)}
.dragon-match .screen{--brand-panel:var(--pixel-ivory);--brand-raised:var(--power-yellow)}