/* The game's styles, loaded after WebClientBase's app-base.css, which holds the display font, a short element reset,
   the page frame and the motion toolkit (.font-display, .animate-*). The palette is the theme's (ThemeColors in
   Program.cs), which App.razor renders as the CSS variables --bg-primary, --accent-blue and the rest. */

/* ---------------------------------------------------------------------------
   The game's own design tokens: the gold the board and the card tiles use for rank and power.
   --------------------------------------------------------------------------- */
:root {
    --accent-gold:       #f5c542;
    --accent-gold-deep:  #d99a1f;
    --hero-glow:         rgba(245, 197, 66, 0.55);
}

/* ---------------------------------------------------------------------------
   The rest of the element reset the screens are laid out against, on top of the base styles' own: no default
   borders, links and the remaining controls that take the surrounding text style, unstyled lists, and media aligned
   as blocks. Text is Inter, including in the controls and headings the base styles let inherit.
   --------------------------------------------------------------------------- */
*, h1, h2, h3, button, input, select, textarea {
    font-family: 'Inter', system-ui, sans-serif;
}

*, ::before, ::after, button {
    border: 0 solid;
}

html {
    color: var(--text-primary);
    tab-size: 4;
    scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent;
}

h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b, strong {
    font-weight: bolder;
}

small {
    font-size: 80%;
}

table {
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0;
}

summary {
    display: list-item;
}

progress {
    vertical-align: baseline;
}

ol, ul, menu {
    list-style: none;
}

img, svg, video, canvas {
    vertical-align: middle;
}

img, video {
    height: auto;
}

button, input, select, optgroup, textarea {
    letter-spacing: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
}

optgroup {
    font: inherit;
    color: inherit;
}

::placeholder {
    opacity: 1;
    color: color-mix(in oklab, currentcolor 50%, transparent);
}

button, input:where([type='button'], [type='reset'], [type='submit']) {
    appearance: button;
}

[hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Full-screen, app-like behavior (phones; emulated on desktop browsers), on top of the base styles' page frame,
   where the page itself never scrolls:
   - No pull-to-refresh / rubber-band overscroll.
   - No double-tap zoom, no long-press selection menus.
   --------------------------------------------------------------------------- */
html,
body {
    overscroll-behavior: none;        /* no pull-to-refresh / rubber-band */
    touch-action: manipulation;       /* no double-tap-to-zoom */
    -webkit-user-select: none;
    user-select: none;                /* no long-press text selection menus */
    -webkit-touch-callout: none;      /* no iOS long-press Copy/Share/Save popup */
    -webkit-tap-highlight-color: transparent;
}

/* Block image drag / drag-to-save. */
img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Lock the body in place so mobile Safari can't drag the whole page around. */
body {
    position: fixed;
    inset: 0;
}

/* Keep real controls selectable/usable even though selection is disabled globally. */
button,
input,
textarea,
select {
    -webkit-user-select: auto;
    user-select: auto;
}

/* ---------------------------------------------------------------------------
   Buttons outside the metagame's own .btn: the dialogs' answers and the card detail's lock.
   --------------------------------------------------------------------------- */
.ui-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    font-weight: 500;
}

.ui-button--small {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
}

/* The colours and the disabled look are listed under .metagame as well, to win over the metagame's own button
   rules there. */
.ui-button--primary,   .metagame .ui-button--primary   { background: var(--accent-blue); color: white; }
.ui-button--secondary, .metagame .ui-button--secondary { background: var(--bg-hover); color: var(--text-secondary); }
.ui-button--warning,   .metagame .ui-button--warning   { background: var(--accent-amber); color: white; }

.ui-button:disabled, .metagame .ui-button:disabled {
    background: var(--bg-hover);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}

.button-row {
    display: flex;
    gap: 0.5rem;
}

/* A refusal, said where the press was made. */
.refusal-note {
    font-size: 10px;
}

/* ---------------------------------------------------------------------------
   The searching dialog: a scrim over the screen the search started on, with the wait on a card.
   --------------------------------------------------------------------------- */
.search-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.7);
}

.search-card {
    width: 100%;
    max-width: 20rem;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--bg-card);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.search-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.search-card__icon {
    font-size: 1.25rem;
    line-height: calc(1.75 / 1.25);
}

.search-card__header h2 {
    font-size: 1.125rem;
    line-height: calc(1.75 / 1.125);
    font-weight: 600;
}

.search-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.search-paw {
    font-size: 2.25rem;
    line-height: calc(2.5 / 2.25);
}

.search-line {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
}

.search-fine-print {
    font-size: 11px;
}

/* ---------------------------------------------------------------------------
   The card detail and the collection: keywords, the lock control, and the development-only rank rows.
   --------------------------------------------------------------------------- */
.keyword-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.keyword-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 11px;
    font-weight: 500;
}

.keyword-chip[title] {
    cursor: help;
}

.lock-affordance {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lock-affordance__hint {
    font-size: 10px;
    line-height: 1.25;
}

.dev-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dev-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dev-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.dev-chip {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

/* "Which lock to move?" */
.lock-slot-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lock-slot-picker__intro {
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
}

.lock-slot-choice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    text-align: left;
}

.lock-slot-choice__empty {
    font-size: 1rem;
    line-height: 1.5;
}

.lock-slot-choice__name {
    flex: 1;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
}

.lock-slot-choice__slot {
    font-size: 10px;
}

/* The deckbuilder's legality readout. */
.deck-legality {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.deck-figure {
    font-variant-numeric: tabular-nums;
}

.deck-figure--power {
    font-weight: 600;
}

.deck-legality__verdict {
    font-size: 11px;
}

/* Home's change-name dialog. */
.name-editor {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.name-editor label {
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.name-editor input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
}

.name-editor p {
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
}

/* ---------------------------------------------------------------------------
   A card as a small tile, in the Heist's loot lineup.
   --------------------------------------------------------------------------- */
.card-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.5rem;
    border: 1px solid;
    border-radius: 0.75rem;
}

.card-tile__cost {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}

.card-tile__corner {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.card-tile__unowned {
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    font-size: 9px;
}

.card-tile__lock {
    font-size: 11px;
}

.card-tile__name {
    width: 100%;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.125rem;
}

.card-tile__stats {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.card-tile__trick {
    font-size: 10px;
}

.card-tile__stars {
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.card-tile__badge {
    position: absolute;
    bottom: -0.25rem;
    left: 50%;
    translate: -50% 0;
    padding: 0.125rem 0.375rem;
    border-radius: 999px;
    font-size: 9px;
}