/*
 * Imperial Dominion Online: a terminal on a web page. The look is borrowed from
 * the amber-and-cyan BBS screens the game descends from, drawn with CSS so it
 * reflows on a phone instead of breaking at 80 columns.
 */

.ido-game {
    --ido-bg: #0b0f14;
    --ido-panel: #111823;
    --ido-border: #1f3448;
    --ido-text: #cfe3f2;
    --ido-dim: #a6c0d6;
    --ido-accent: #4fd6ff;
    --ido-amber: #ffc861;
    --ido-good: #57d98a;
    --ido-bad: #ff6b6b;

    /* How far the game breaks out of the theme content column, each side. */
    --ido-bleed: 10%;

    box-sizing: border-box;
    background: var(--ido-bg);
    color: var(--ido-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: 15px;
    line-height: 1.5;
    padding: 16px;
    border: 1px solid var(--ido-border);
    border-radius: 6px;
}

/*
 * Game screens carry a lot of numbers, so on a desktop the box is widened 20%
 * beyond whatever content width the theme allows, 10% out of each side, and
 * re-centred on its own column. It never exceeds the viewport, and below the
 * breakpoint it goes back to filling the column normally.
 *
 * To change how much wider it runs, set --ido-bleed: half the extra width.
 */
@media (min-width: 900px) {
    .ido-game {
        width: min(calc(100% + (var(--ido-bleed) * 2)), calc(100vw - 32px));
        margin-left: 50%;
        transform: translateX(-50%);
    }
}

.ido-game a { color: var(--ido-accent); }

.ido-title {
    color: var(--ido-amber);
    font-size: 1.25rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-bottom: 2px;
}

.ido-subtitle {
    color: var(--ido-dim);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ido-border);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* Status bar */
.ido-status { margin-bottom: 12px; }
.ido-status-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 8px;
}
.ido-kingdom { color: var(--ido-amber); font-weight: 700; }
.ido-ruler { color: var(--ido-text); }
.ido-round { color: var(--ido-dim); margin-left: auto; }

.ido-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
}
.ido-stat {
    background: var(--ido-panel);
    border: 1px solid var(--ido-border);
    border-radius: 4px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
}
.ido-stat-label { color: var(--ido-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ido-stat-value { color: var(--ido-text); font-variant-numeric: tabular-nums; }

.ido-protected {
    margin-top: 8px;
    padding: 6px 8px;
    border-left: 3px solid var(--ido-good);
    background: rgba(87, 217, 138, 0.08);
    color: var(--ido-dim);
    font-size: 0.85rem;
}

/* Navigation */
.ido-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ido-border);
    padding-bottom: 8px;
}
/*
 * Navigation and buttons are anchors, and themes style anchors hard, often
 * with selectors more specific than a single class (.entry-content a beats
 * .ido-nav-current). When the theme wins, a link keeps its own blue on top of
 * our blue and becomes unreadable. Every anchor whose background this
 * stylesheet sets therefore states its text colour at higher specificity and
 * forces it, for every link state, since :visited and :hover are frequently
 * styled separately.
 */
.ido-game .ido-nav-item,
.ido-game a.ido-nav-item,
.ido-game a.ido-nav-item:link,
.ido-game a.ido-nav-item:visited {
    padding: 4px 10px;
    border: 1px solid var(--ido-border);
    border-radius: 4px;
    text-decoration: none;
    color: var(--ido-text) !important;
}
.ido-game .ido-nav-item:hover,
.ido-game a.ido-nav-item:hover,
.ido-game a.ido-nav-item:focus {
    border-color: var(--ido-accent);
    color: var(--ido-text) !important;
}
/*
 * The selected item, at higher specificity than every .ido-nav-item rule above
 * so it wins in all states without relying on source order.
 *
 * -webkit-text-fill-color matters more than the colour here: a theme that uses
 * the gradient-text trick (background-clip: text with a transparent fill)
 * makes text disappear entirely, and no amount of `color` brings it back.
 */
.ido-game .ido-nav .ido-nav-item.ido-nav-current,
.ido-game .ido-nav a.ido-nav-item.ido-nav-current,
.ido-game .ido-nav a.ido-nav-item.ido-nav-current:link,
.ido-game .ido-nav a.ido-nav-item.ido-nav-current:visited,
.ido-game .ido-nav a.ido-nav-item.ido-nav-current:hover,
.ido-game .ido-nav a.ido-nav-item.ido-nav-current:focus,
.ido-game .ido-nav a.ido-nav-item.ido-nav-current:active {
    background: var(--ido-accent) !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #04121b !important;
    -webkit-text-fill-color: #04121b !important;
    border-color: var(--ido-accent) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Panels */
.ido-panel {
    background: var(--ido-panel);
    border: 1px solid var(--ido-border);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
}
.ido-panel-title {
    color: var(--ido-amber);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
}
.ido-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.ido-columns .ido-panel { margin-bottom: 0; }
.ido-dim { color: var(--ido-dim); font-size: 0.85rem; }
.ido-warning { color: var(--ido-amber); }

/* Tables */
.ido-table { width: 100%; border-collapse: collapse; }
.ido-table th, .ido-table td {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid var(--ido-border);
    vertical-align: top;
}
.ido-table th { color: var(--ido-dim); font-weight: 600; }
.ido-table thead th { color: var(--ido-accent); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; }
.ido-right { text-align: right; font-variant-numeric: tabular-nums; }
.ido-row-me { background: rgba(79, 214, 255, 0.08); }
/*
 * Wide tables keep numbers and buttons on one line and scroll sideways only as
 * a last resort. Prose columns must wrap, or one long description drags the
 * whole table off the screen: the earlier rule only matched .ido-dim on a child
 * element, while these tables put the class on the cell itself.
 */
.ido-table-wide { display: block; overflow-x: auto; white-space: nowrap; }
.ido-table-wide td.ido-dim,
.ido-table-wide td .ido-dim,
.ido-table-wide td.ido-wrap {
    white-space: normal;
    min-width: 18ch;
    max-width: 52ch;
}

/* Forms */
.ido-field { display: block; margin-bottom: 10px; }
.ido-field > span { display: block; color: var(--ido-dim); font-size: 0.8rem; margin-bottom: 3px; }
.ido-field-small { display: inline-block; margin-right: 10px; vertical-align: top; }
.ido-form-inline { display: inline-flex; gap: 4px; align-items: center; }
.ido-force { display: flex; flex-wrap: wrap; gap: 8px; }
/* Price guidance sits beside the Post button and wraps under it when narrow. */
.ido-price-hint { flex: 1 1 22ch; align-self: center; line-height: 1.35; }

/* What an order costs, said next to the button that gives it. */
.ido-turn-cost {
    color: var(--ido-dim);
    font-size: 0.78rem;
    white-space: nowrap;
    margin-left: 6px;
}

/* The standing explanation of turns, under the status bar on every screen. */
.ido-turn-help {
    margin-top: 8px;
    padding: 6px 8px;
    border-left: 3px solid var(--ido-border);
    background: rgba(79, 214, 255, 0.05);
    color: var(--ido-dim);
    font-size: 0.82rem;
}
.ido-turn-help-full { border-left-color: var(--ido-amber); color: var(--ido-amber); }
.ido-turn-help-empty { border-left-color: var(--ido-bad); }

/*
 * Form controls, forced past the theme. Themes routinely set a grey input
 * colour for their own light backgrounds, which on this dark panel leaves the
 * value barely legible. -webkit-text-fill-color is set alongside colour
 * because it wins over it where a theme uses it, and it is what browsers apply
 * to autofilled values.
 */
.ido-game input[type="text"],
.ido-game input[type="number"],
.ido-game input[type="search"],
.ido-game textarea,
.ido-game select {
    background: #0a1017 !important;
    color: var(--ido-text) !important;
    -webkit-text-fill-color: var(--ido-text) !important;
    opacity: 1 !important;
    border: 1px solid var(--ido-border);
    border-radius: 3px;
    padding: 5px 7px;
    font-family: inherit;
    font-size: 0.9rem;
    max-width: 100%;
}
.ido-game input:focus,
.ido-game select:focus,
.ido-game textarea:focus {
    border-color: var(--ido-accent);
    outline: 2px solid rgba(79, 214, 255, 0.35);
    outline-offset: 1px;
}
/* Placeholders are hints, so they are dimmer than a real value but still readable. */
.ido-game input::placeholder,
.ido-game textarea::placeholder {
    color: var(--ido-dim) !important;
    -webkit-text-fill-color: var(--ido-dim) !important;
    opacity: 1 !important;
}
/* Dropdown lists are drawn by the operating system and need their own colours. */
.ido-game select option {
    background: #0a1017;
    color: var(--ido-text);
}
/* Browsers paint autofilled fields with their own background; override it. */
.ido-game input:-webkit-autofill,
.ido-game input:-webkit-autofill:hover,
.ido-game input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ido-text) !important;
    box-shadow: 0 0 0 1000px #0a1017 inset !important;
}
.ido-num { width: 9ch; text-align: right; }
.ido-text, .ido-select { min-width: 220px; }

.ido-game .ido-btn,
.ido-game a.ido-btn,
.ido-game a.ido-btn:link,
.ido-game a.ido-btn:visited,
.ido-game a.ido-btn:hover,
.ido-game a.ido-btn:focus,
.ido-game button.ido-btn {
    color: #04121b !important;
    -webkit-text-fill-color: #04121b !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow: none !important;
    text-decoration: none !important;
}
.ido-btn {
    display: inline-block;
    background: var(--ido-accent);
    color: #04121b;
    border: 1px solid var(--ido-accent);
    border-radius: 3px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}
.ido-btn:hover { filter: brightness(1.12); }

/* The outline variant sits on the panel, so its text takes the accent colour. */
.ido-game .ido-btn-alt,
.ido-game a.ido-btn-alt,
.ido-game a.ido-btn-alt:link,
.ido-game a.ido-btn-alt:visited,
.ido-game a.ido-btn-alt:hover,
.ido-game a.ido-btn-alt:focus,
.ido-game button.ido-btn-alt {
    background: transparent;
    color: var(--ido-accent) !important;
    -webkit-text-fill-color: var(--ido-accent) !important;
}
.ido-game .ido-btn-danger,
.ido-game a.ido-btn-danger,
.ido-game a.ido-btn-danger:link,
.ido-game a.ido-btn-danger:visited,
.ido-game a.ido-btn-danger:hover,
.ido-game a.ido-btn-danger:focus,
.ido-game button.ido-btn-danger {
    background: var(--ido-bad);
    border-color: var(--ido-bad);
    color: #180404 !important;
    -webkit-text-fill-color: #180404 !important;
}
.ido-btn-small { padding: 3px 8px; font-size: 0.8rem; }

/* Notices and reports */
.ido-flash {
    border-left: 3px solid var(--ido-accent);
    background: rgba(79, 214, 255, 0.08);
    padding: 8px 10px;
    margin-bottom: 8px;
}
.ido-flash-success { border-color: var(--ido-good); background: rgba(87, 217, 138, 0.08); }
.ido-flash-warning { border-color: var(--ido-amber); background: rgba(255, 200, 97, 0.08); }
.ido-flash-error { border-color: var(--ido-bad); background: rgba(255, 107, 107, 0.08); }

.ido-report {
    border: 1px solid var(--ido-border);
    border-left-width: 3px;
    border-radius: 3px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.ido-report-good { border-left-color: var(--ido-good); }
.ido-report-bad { border-left-color: var(--ido-bad); }
.ido-report-head { color: var(--ido-dim); font-size: 0.8rem; margin-bottom: 4px; }

.ido-list { margin: 0; padding-left: 18px; }
.ido-list li { margin-bottom: 4px; }

.ido-news { list-style: none; margin: 0; padding: 0; }
.ido-news li { border-bottom: 1px solid var(--ido-border); padding: 5px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.ido-news-time { color: var(--ido-dim); font-size: 0.8rem; min-width: 13ch; }
.ido-news-type { color: var(--ido-amber); font-size: 0.75rem; text-transform: uppercase; min-width: 9ch; }
.ido-news-text { flex: 1 1 260px; }

.ido-filters { display: flex; flex-wrap: wrap; gap: 4px; }

@media (max-width: 640px) {
    .ido-game { font-size: 14px; padding: 12px; }
    .ido-round { margin-left: 0; }
    .ido-text, .ido-select { min-width: 100%; }
}


/* ===================================================================
 * Theme-proofing
 *
 * The game sets a colour on its container and lets it inherit, which works
 * until a theme styles p, strong, h4 or td directly: an element rule beats
 * inheritance, so the theme's colour wins and text meant to be light comes out
 * near-black on a dark panel. Measured on a real site, an <h4> was rendering at
 * 1.13:1, which is invisible.
 *
 * So every element that carries text states its colour here, and the game's own
 * semantic classes are re-asserted afterwards at higher specificity so they
 * still win. Anything with a coloured background states a foreground to go with
 * it, rather than trusting whatever it inherits.
 * =================================================================== */

.ido-game,
.ido-game p,
.ido-game span,
.ido-game div,
.ido-game li,
.ido-game dt,
.ido-game dd,
.ido-game td,
.ido-game label,
.ido-game strong,
.ido-game b,
.ido-game em,
.ido-game i,
.ido-game small,
.ido-game code,
.ido-game pre,
.ido-game h1,
.ido-game h2,
.ido-game h3,
.ido-game h4,
.ido-game h5,
.ido-game h6 {
    color: var(--ido-text);
    -webkit-text-fill-color: var(--ido-text);
}

/* Headings inside a panel are the game's, not the theme's. */
.ido-game .ido-panel h4,
.ido-game .ido-panel h5 {
    color: var(--ido-amber);
    -webkit-text-fill-color: var(--ido-amber);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    margin: 12px 0 6px;
}

/* The game's own tones, re-stated so they outrank the reset above. */
.ido-game .ido-title { color: var(--ido-amber); -webkit-text-fill-color: var(--ido-amber); }
.ido-game .ido-subtitle,
.ido-game .ido-dim,
.ido-game .ido-dim *,
.ido-game .ido-stat-label,
.ido-game .ido-turn-cost,
.ido-game .ido-news-time,
.ido-game .ido-report-head,
.ido-game .ido-price-hint,
.ido-game .ido-footer,
.ido-game .ido-footer span,
.ido-game .ido-table th { color: var(--ido-dim); -webkit-text-fill-color: var(--ido-dim); }
.ido-game .ido-panel-title,
.ido-game .ido-warning,
.ido-game .ido-warning *,
.ido-game .ido-news-type { color: var(--ido-amber); -webkit-text-fill-color: var(--ido-amber); }
.ido-game .ido-table thead th { color: var(--ido-accent); -webkit-text-fill-color: var(--ido-accent); }
.ido-game .ido-kingdom { color: var(--ido-amber); -webkit-text-fill-color: var(--ido-amber); }
.ido-game a:not(.ido-btn):not(.ido-nav-item) { color: var(--ido-accent); -webkit-text-fill-color: var(--ido-accent); }

/*
 * Anything tinted states its own foreground. The tints are deliberately dark,
 * so the text on them stays light: a light-on-dark pairing is what the rest of
 * the game reads as, and inverting it for a notice would be worse, not better.
 */
.ido-game .ido-flash,
.ido-game .ido-flash * { color: var(--ido-text); -webkit-text-fill-color: var(--ido-text); }
.ido-game .ido-flash-success,
.ido-game .ido-flash-success * { color: var(--ido-good); -webkit-text-fill-color: var(--ido-good); }
.ido-game .ido-flash-warning,
.ido-game .ido-flash-warning * { color: var(--ido-amber); -webkit-text-fill-color: var(--ido-amber); }
.ido-game .ido-flash-error,
.ido-game .ido-flash-error * { color: var(--ido-bad); -webkit-text-fill-color: var(--ido-bad); }

.ido-game .ido-protected,
.ido-game .ido-protected * { color: var(--ido-good); -webkit-text-fill-color: var(--ido-good); }
.ido-game .ido-turn-help,
.ido-game .ido-turn-help * { color: var(--ido-dim); -webkit-text-fill-color: var(--ido-dim); }
.ido-game .ido-turn-help-full,
.ido-game .ido-turn-help-full * { color: var(--ido-amber); -webkit-text-fill-color: var(--ido-amber); }
.ido-game .ido-turn-help-empty,
.ido-game .ido-turn-help-empty * { color: var(--ido-bad); -webkit-text-fill-color: var(--ido-bad); }

.ido-game .ido-row-me td,
.ido-game .ido-row-me th { color: var(--ido-text); -webkit-text-fill-color: var(--ido-text); }
.ido-game .ido-report-body,
.ido-game .ido-report-body * { color: var(--ido-text); -webkit-text-fill-color: var(--ido-text); }

/*
 * Selecting text must not hide it. Some themes set a selection colour close to
 * this one, which leaves the selected words unreadable exactly when someone is
 * trying to copy a battle report.
 */
.ido-game ::selection {
    background: var(--ido-accent);
    color: #04121b;
    -webkit-text-fill-color: #04121b;
}
.ido-game ::-moz-selection {
    background: var(--ido-accent);
    color: #04121b;
}


/* The strip along the bottom of every screen. */
.ido-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--ido-border);
    font-size: 0.78rem;
}
.ido-footer-version { opacity: 0.75; }
.ido-footer-credit { margin-left: auto; }
.ido-game .ido-footer a,
.ido-game .ido-footer a:link,
.ido-game .ido-footer a:visited {
    color: var(--ido-accent);
    -webkit-text-fill-color: var(--ido-accent);
    text-decoration: none;
}
.ido-game .ido-footer a:hover,
.ido-game .ido-footer a:focus { text-decoration: underline; }

@media (max-width: 480px) {
    .ido-footer-credit { margin-left: 0; }
}


/*
 * Embedded in an ordinary page or post rather than being the page. It keeps
 * the game's look but stays inside the theme's content column: the 20% breakout
 * is right for a screen a player works in and wrong for a paragraph of prose
 * somebody is reading.
 */
.ido-game.ido-embed {
    width: auto;
    margin-left: 0;
    transform: none;
}
@media (min-width: 900px) {
    .ido-game.ido-embed {
        width: auto;
        margin-left: 0;
        transform: none;
    }
}