/* Bone and soot (ADR 0158, docs/art/branding.md). The last sheet every page of the table loads: it owns the shape,
   the texture and the titles of what the pages share (ground, buttons, cards, windows, headers). The page sheets
   keep their own layout. Tokens come from the generated branding block. */

/* Ground: soot smudges and bone grain over slate, darker towards the foot of the page. */
body:not(.battle-page) {
  background:
    var(--tex-grain), var(--tex-soot),
    radial-gradient(900px 520px at 25% 0, color-mix(in srgb, var(--raised) 85%, transparent) 0, transparent 70%),
    radial-gradient(700px 460px at 100% 420px, color-mix(in srgb, var(--accent-wash) 60%, transparent) 0, transparent 70%),
    linear-gradient(var(--paper), var(--soot));
  background-color: var(--soot);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); }

/* Titles are carved in bone; gold stays for what can be done. */
.lobby-hero h2, .dialog-heading h2, .name-title, .lobby-panel h2, .game-card h3,
.mine-group-head h3, .home-header h1 { color: var(--bone); }
.lobby-section h2 { font: 400 22px/1.2 var(--font-display); color: var(--bone); }
.lobby-section h2 .lobby-count { font-family: var(--font-text); }
.eyebrow { letter-spacing: .16em; }
dialog .eyebrow, .lobby-hero .eyebrow { color: var(--brand-ember); }

/* The rule under a title: the rune, then a bone hairline that fades out. */
.lobby-section > .section-heading, .home-dialog > .dialog-heading { position: relative; }
.lobby-section > .section-heading { padding-bottom: 16px; }
.lobby-section > .section-heading::after, .home-dialog > .dialog-heading::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15px; z-index: 1; pointer-events: none;
  background:
    var(--tex-rule) left center / 10px 15px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--bone) 55%, transparent), transparent) 18px 50% / calc(100% - 18px) 1px no-repeat;
}
.home-dialog > .dialog-heading::after { left: 24px; right: 24px; bottom: -8px; }

/* The one filled action of a screen: gold, with two corners cut the way the rune is. The focus ring sits inside,
   because a cut shape clips whatever is drawn outside it. */
:is(button, a).primary {
  border: 1px solid transparent; border-radius: 0; color: var(--accent-ink);
  background: var(--tex-grain), linear-gradient(var(--gold), color-mix(in srgb, var(--gold) 86%, var(--accent-wash)));
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
:is(button, a).primary:hover:not(:disabled) { border-color: transparent; background: var(--tex-grain), var(--accent-strong); }
:is(button, a).primary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -5px; }

/* Cards and windows: grain and soot inside, a bone-tinted edge, the top right corner cut. --cut: 0px keeps a
   surface square, which is what a sheet docked to an edge of the screen wants. */
html :is(.game-card, .game-row, .lobby-panel, dialog),
.battle-page :is(#history-dialog, #help-dialog, #growth-dialog, #inspect-dialog, #atlas-dialog, #opponent-dialog, #match-dialog) {
  --cut-edge: color-mix(in srgb, var(--bone) 26%, var(--line-soft));
  border-color: var(--cut-edge); border-radius: 0;
  background:
    linear-gradient(to bottom left, transparent calc(50% - .5px), var(--cut-edge) calc(50% - .5px) calc(50% + 1px), transparent calc(50% + 1px)) top right / var(--cut) var(--cut) no-repeat border-box,
    var(--tex-grain), var(--tex-soot) 30% 20%,
    linear-gradient(160deg, color-mix(in srgb, var(--panel) 80%, var(--raised)), color-mix(in srgb, var(--panel) 60%, var(--paper)));
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
html .home-dialog .lobby-panel { background: none; clip-path: none; }
html .game-card:is(.mine, .invitation) { --cut-edge: color-mix(in srgb, var(--gold) 70%, var(--line-soft)); border-top-width: 1px; }
html :is(.game-card.opponent, .game-row) { --cut: 8px; }
html dialog { --cut: 16px; }
.lobby-page dialog::backdrop { background: color-mix(in srgb, var(--soot) 82%, transparent); }
.home-dialog > .dialog-heading { border-bottom: 0; background: var(--tex-grain), linear-gradient(var(--soot), var(--paper)); }
.home-dialog .dialog-heading > button, .dialog-heading > button { border-radius: var(--radius-sharp); }
.app-settings-tabs { padding-top: 14px; background: transparent; border-bottom-color: var(--line-soft); }

/* Small parts. A pill is a counter; a tag, a field and a button are square. */
.lobby-count, .nav-badge { border-radius: 999px; }
.casual-tag, .status-tag, .bot-tag { border-radius: var(--radius-sharp); }
.game-card .status-tag.your-turn { color: var(--gold); background: var(--accent-wash); border-color: var(--gold); }
.empty-state { padding: 14px 0 14px 16px; border: 0; border-left: 2px solid color-mix(in srgb, var(--bone) 40%, transparent); border-radius: 0; }
.friend-list .empty-state { padding: 10px 0 10px 14px; }
.presentation-choice select { width: auto; min-width: min(240px, 100%); }
.lobby-page label.ranked-row { display: flex; }
.lobby-page .ranked-row input { width: 22px; min-height: 22px; }
.lobby-page :is(input, select) { background-color: color-mix(in srgb, var(--soot) 70%, var(--paper)); }
.account-menu, .guide-body { border-color: color-mix(in srgb, var(--bone) 26%, var(--line-soft)); background: var(--tex-grain), var(--panel); }
.home-footer { border-top-color: var(--line-soft); }
.home-footer span:first-child { color: var(--bone); font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; }

/* The site's header: the rune and the name in carved capitals, the page you are on underlined in gold, and the
   bell, the account and the menu in one square shape. */
.home-header { border-bottom: 1px solid; border-image: linear-gradient(90deg, color-mix(in srgb, var(--bone) 50%, transparent), var(--line-soft) 60%, transparent) 1; }
.home-header .brand h1, .battle-page .home-header .brand h1 { font: 400 17px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.home-header .brand-mark, .battle-page .home-header .brand-mark { width: 22px; height: 34px; }
.home-navigation > :is(a, button) { border-radius: 0; border: 0; border-bottom: 2px solid transparent; letter-spacing: .04em; }
.home-navigation > :is(a, button):hover, .home-navigation > [aria-current="page"] { color: var(--bone); background: transparent; border-bottom-color: var(--gold); }
.inbox-button, .home-menu-toggle, .account-chip { border-radius: var(--radius-sharp); }
.account-initial { border: 0; border-radius: var(--radius-sharp); background: transparent; font-family: var(--font-display); }
@media (max-width: 1240px) {
  .home-header .home-navigation { border-color: color-mix(in srgb, var(--bone) 26%, var(--line-soft)); background: var(--tex-grain), var(--panel); }
  .home-navigation > :is(a, button) { border-bottom: 0; border-left: 2px solid transparent; }
  .home-navigation > :is(a, button):hover, .home-navigation > [aria-current="page"] { background: var(--accent-wash); border-left-color: var(--gold); }
}
@media (max-width: 700px) {
  .home-header .brand h1 { font-size: 13px; letter-spacing: .1em; }
  .home-header .brand-mark { width: 18px; height: 28px; }
}
@media (max-width: 360px) { .home-header .brand h1 { font-size: 11px; letter-spacing: .06em; } }

/* In a match: one bar. The rune leads back to the lobby, the site's menu, the bell and the account fold into the
   right end of the round's bar, as they already did on a phone held upright. */
#battle .hud-top { background: var(--tex-grain), linear-gradient(var(--soot), var(--paper)); border-bottom-color: color-mix(in srgb, var(--bone) 30%, var(--line-soft)); }
#battle .timeline-wrap { background: var(--tex-grain), color-mix(in srgb, var(--paper) 70%, var(--panel)); border-bottom-color: var(--line-soft); }
#battle .command-dock { background: var(--tex-grain), var(--tex-soot) 60% 40%, linear-gradient(color-mix(in srgb, var(--panel) 85%, var(--raised)), var(--paper)); }
#battle .round b { color: var(--gold); }
.opponent-chip { border-radius: var(--radius-sharp); }
@media (min-width: 620px) and (min-height: 501px), (min-width: 1241px) {
  .battle-page[data-home="member"] .home-header {
    position: absolute; z-index: 6; top: env(safe-area-inset-top); left: auto; right: max(12px, env(safe-area-inset-right));
    width: auto; height: 74px; min-height: 0; gap: 6px; padding: 0; background: transparent; border: 0;
  }
  .battle-page[data-home="member"] .home-header .brand, .battle-page[data-home="member"] .home-header #account-name { display: none; }
  .battle-page[data-home="member"] .home-menu-toggle { display: inline-flex; align-items: center; justify-content: center; order: -1; margin: 0; min-width: 44px; min-height: 44px; padding: 0 10px; background: transparent; }
  .battle-page[data-home="member"] .home-menu-toggle > span:last-child { display: none; }
  .battle-page[data-home="member"] .home-header .home-navigation {
    display: none; position: absolute; top: calc(100% - 8px); left: auto; right: 0; width: min(360px, calc(100vw - 24px)); margin: 0; padding: 12px;
    border: 1px solid color-mix(in srgb, var(--bone) 26%, var(--line-soft)); border-radius: 0 0 var(--radius-soft) var(--radius-soft);
    background: var(--tex-grain), var(--panel); box-shadow: 0 20px 40px #0008; max-height: min(70dvh, 460px); overflow-y: auto;
  }
  .battle-page[data-home="member"] .home-menu-toggle[aria-expanded="true"] + .home-navigation { display: grid; gap: 4px; }
  .battle-page[data-home="member"] .home-navigation > :is(a, button) { justify-content: flex-start; min-height: 48px; padding: 12px; font-size: 14px; border-bottom: 0; border-left: 2px solid transparent; }
  .battle-page[data-home="member"] .home-navigation > :is(a, button):hover { background: var(--accent-wash); border-left-color: var(--gold); }
  .battle-page[data-home="member"] .home-header .account-chip { min-width: 44px; min-height: 44px; padding: 4px; justify-content: center; }
  .battle-page[data-home="member"] .home-header .account-menu { left: auto; right: 0; }
  .battle-page[data-home="member"] #battle .hud-top { padding-right: 172px; }
  .battle-page[data-home="member"] #battle .hud-top > .brand { display: flex; font-size: 0; gap: 0; }
  .battle-page[data-home="member"] #battle .hud-top > .brand > div { display: none; }
  .battle-page[data-home="member"] #battle .hud-top > .brand > .battle-brand-mark { width: 22px; height: 34px; }
}
@media (min-width: 620px) and (max-width: 900px) and (min-height: 501px) { .battle-page[data-home="member"] .home-header { height: 60px; } }

/* Windows of the match share the lobby's: ember label, bone title, a fading bone hairline under the head. A sheet
   docked to an edge stays square. */
.battle-page :is(#planning-dialog, #combat-dialog, #upkeep-dialog) { --cut: 0px; }
@media (max-width: 619px) { .battle-page dialog:not(.home-dialog, #create-dialog, #name-dialog, #delete-dialog) { --cut: 0px; } }
.battle-page dialog h2, .battle-page .order-header h2, .battle-page .inspect-header h2 { color: var(--bone); }
.battle-page :is(.order-header, .history-header, .help-header, .growth-header, .atlas-header, .planning-header) {
  border-bottom: 1px solid; border-image: linear-gradient(90deg, color-mix(in srgb, var(--bone) 55%, transparent), transparent) 1;
  background: var(--tex-grain), linear-gradient(var(--soot), var(--paper));
}
.battle-page .order-footer { background: transparent; border-top-color: var(--line-soft); }
#match-dialog .match-footer :is(button, a) { border-radius: var(--radius-sharp); }
/* Conceding ends the match: it sits last in Match settings, apart from the everyday switches. */
#settings-dialog .settings-concede { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--refused) 25%, transparent); }
#settings-dialog .settings-concede p { margin: 0; color: var(--muted); font-size: 12px; }
#settings-dialog #concede-open { width: auto; background: transparent; border-color: color-mix(in srgb, var(--refused) 45%, transparent); color: var(--refused); }
.presentation-choice select { flex: 1 1 200px; max-width: 320px; }
.presentation-choice small { flex: 1 1 100%; }

/* The operator's notice (ADR 0177): one line under the header, bone on soot with a gold rule at its left, never over
   the board. */
.host-notice {
  max-width: 1500px; margin: 10px auto 0; padding: 8px 14px; border-left: 2px solid var(--gold);
  background: color-mix(in srgb, var(--panel) 70%, transparent); color: var(--bone); font-size: 14px; line-height: 1.4;
  overflow-wrap: anywhere;
}