/* The side panel on the game page (scripts/gamepanel.js), in the column right of the map under the pool
   (scripts/sidecards.js places it): the turn and what needs the players now, then a row of parts that
   open one at a time over the side cards (the log, the board count, dice, runes, the drawer of tokens,
   the alliances, the promises, more, the admin's buttons). */

.gp-panel, .gp-marks {
    --gp-bg: #141519;
    --gp-bg2: #1c1e24;
    --gp-bg3: #262932;
    --gp-line: #30343e;
    --gp-text: #e8e6e1;
    --gp-muted: #9a9ca5;
    --gp-accent: #f0c24b;
    --gp-good: #8fd694;
    --gp-new: rgba(240, 194, 75, 0.10);
    --gp-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- the panel: above the pieces (the drawer's tokens stand above it, the carried piece above all) */

.gp-panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000002;
    box-sizing: border-box;
    width: 330px;
    display: flex;
    flex-direction: column;
    background: var(--gp-bg);
    color: var(--gp-text);
    border: 1px solid var(--gp-line);
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
    font: 13px/1.45 var(--gp-font);
    text-align: left;
}
.gp-panel div { color: inherit; }            /* mystyle.css makes every div white */
.gp-panel button { font: inherit; }
.gp-panel [hidden] { display: none !important; }

/* The head is about 90 px high, and 128 with one alert (sidecards.js HEAD: the side cards start under that):
   the alerts are one line each, with more about them on demand. */
.gp-head {
    flex: none;
    padding: 6px 8px 7px;
    background: var(--gp-bg2);
    border-radius: 8px 8px 0 0;
}
.gp-titlebar { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.gp-title { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-lock {
    padding: 0 6px;
    border: 1px solid var(--gp-line);
    border-radius: 4px;
    color: var(--gp-muted);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.gp-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--gp-muted);
    font-size: 15px !important;
    line-height: 1;
    cursor: pointer;
    filter: grayscale(1);
    opacity: 0.7;
}
.gp-icon:hover { background: var(--gp-bg3); color: var(--gp-text); opacity: 1; }
.gp-icon.gp-on { filter: none; opacity: 1; border-color: var(--gp-line); }
.gp-badge {
    min-width: 18px;
    padding: 3px 4px;
    border-radius: 9px;
    background: var(--gp-accent);
    color: #1a1400;
    font-size: 11px;
    text-align: center;
}
.gp-badge[hidden] { display: none; }

.gp-maint { margin-top: 6px; padding: 7px 9px; border: 1px solid var(--gp-line); border-left: 3px solid #d9a441; border-radius: 6px; background: var(--gp-bg); font-size: 12px; }
.gp-signin { margin-top: 6px; padding: 7px 9px; border: 1px solid var(--gp-line); border-radius: 6px; background: var(--gp-bg); }
.gp-signin .g_id_signin { margin-top: 5px; min-height: 40px; }

.gp-btn {
    padding: 3px 10px;
    border: 1px solid var(--gp-accent);
    border-radius: 5px;
    background: transparent;
    color: var(--gp-accent);
    font-size: 12px !important;
    cursor: pointer;
}
.gp-btn:hover { background: var(--gp-accent); color: #1a1400; }

/* ---- turn, first player, the hint */

.gp-turnno { flex: none; color: var(--gp-muted); font-size: 12px; white-space: nowrap; }
.gp-turnno b { font-size: 16px; color: var(--gp-accent); }
.gp-titlebar .gp-btn { flex: none; padding: 2px 8px; }
/* TGW, the action phase: "Action phase · Storm's turn (Giora)" (06-head.js renderWhose()) */
.gp-whose { margin-top: 5px; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.gp-whose .gp-muted { font-size: 12px; }
.gp-dirline { margin-bottom: 2px; }
.gp-dir { color: var(--gp-accent); }
.gp-order { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 5px; }
.gp-order .gp-arrow { color: var(--gp-muted); }
.gp-first {
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--gp-accent);
    color: #1a1400;
    font-size: 10px;
    font-weight: 700;
}
.gp-hint {
    margin-top: 6px;
    padding: 3px 6px;
    border: 1px solid rgba(240, 194, 75, 0.45);
    border-radius: 6px;
    background: rgba(240, 194, 75, 0.08);
}
.gp-hint .gp-alert-more .gp-btn { margin-top: 5px; }

/* An alert under the turn: its line, and more about it (alertBox in gamepanel.js) */
.gp-alert-line { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.gp-alert-line .gp-flowtitle { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-alert-line .gp-btn { flex: none; padding: 2px 10px; }
.gp-alert-line .gp-btn + .gp-btn { margin-left: 0; }
.gp-alert-more { margin: 2px 0 4px 26px; }
.gp-panel .gp-more-toggle {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--gp-muted);
    font-size: 11px !important;
    line-height: 20px;
    cursor: pointer;
}
.gp-panel .gp-more-toggle:hover { background: var(--gp-bg3); color: var(--gp-text); }

/* TGW, the end of the turn and the power phase (renderFlow in gamepanel.js) */
.gp-flowtitle { margin-bottom: 3px; color: var(--gp-accent); font-weight: 700; }
.gp-flowline { margin-top: 5px; }
.gp-btn.gp-go { background: var(--gp-accent); color: #1a1400; font-weight: 700; }
.gp-btn.gp-go:hover { filter: brightness(1.12); }
.gp-btn.gp-quiet { border-color: var(--gp-line); color: var(--gp-muted); }
.gp-btn.gp-quiet:hover { background: var(--gp-bg3); color: var(--gp-text); }
.gp-btn + .gp-btn { margin-left: 6px; }
.gp-btn:disabled { opacity: 0.5; pointer-events: none; }
.gp-unapprove { margin-top: 5px; }
.gp-unapprove .gp-btn { padding: 4px 14px; }
.gp-chip.gp-yes { border-color: var(--gp-good); }
.gp-chip.gp-no { opacity: 0.7; }
.gp-tick { color: var(--gp-muted); font-weight: 700; }
.gp-chip.gp-yes .gp-tick { color: var(--gp-good); }
.gp-for .gp-btn { margin-left: 6px; }

/* The steps between two turns, and each empire's part of a phase in turn order (PhasesLib.php ph_flow()) */
.gp-flowbody { margin: 2px 0 4px; }
.gp-track { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 2px 0 4px; font-size: 11px; }
.gp-tstep { color: var(--gp-muted); white-space: nowrap; }
.gp-tstep-done { color: var(--gp-good); }
.gp-tstep-now { color: var(--gp-accent); font-weight: 700; }
.gp-tstep-skip { opacity: 0.45; text-decoration: line-through; }
.gp-track-sep { color: var(--gp-muted); opacity: 0.6; }
.gp-prows { display: flex; flex-direction: column; gap: 2px; }
.gp-prow { padding: 2px 4px; border-radius: 4px; }
.gp-prow-now { background: var(--gp-bg2); border: 1px solid var(--gp-line); padding: 3px 5px 5px; }
.gp-prow-done { opacity: 0.75; }
.gp-prow-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.gp-prow-head .gp-tick { width: 12px; text-align: center; }
.gp-tick.gp-now { color: var(--gp-accent); }
.gp-items { display: inline-flex; flex-wrap: wrap; gap: 2px 4px; font-size: 11px; }
.gp-item { padding: 0 4px; border: 1px solid var(--gp-line); border-radius: 3px; cursor: help; white-space: nowrap; }
.gp-item-on { border-color: var(--gp-accent); color: var(--gp-text); }
.gp-item-maybe { font-style: italic; }
.gp-item-off { opacity: 0.45; }
.gp-item-auto { color: var(--gp-muted); }
.gp-item-auto::after { content: " · app"; font-size: 10px; }
.gp-item-row { margin: 3px 0 0 18px; font-size: 12px; }
.gp-item-row .gp-item { margin-right: 4px; }
.gp-item-hint { color: var(--gp-muted); }
.gp-item-did { border-color: var(--gp-good); }
.gp-item-mode { color: var(--gp-muted); font-size: 11px; }
.gp-item-did-line { margin: 1px 0 0 30px; font-size: 11px; color: var(--gp-good); }
.gp-item-ask { margin: 4px 0 2px 18px; padding: 4px 6px; border: 1px solid var(--gp-accent); border-radius: 4px; font-size: 12px; }
.gp-ask-opt { margin-top: 4px; }
/* Black Market's rune, to its chooser alone (gamepanel.js askBox()) */
.gp-ask-rune { margin-top: 4px; padding: 3px 6px; border-left: 2px solid var(--gp-accent); background: rgba(255, 255, 255, 0.04); line-height: 1.35; }
.gp-ask-opt .gp-btn { margin: 0 4px 2px 0; }
.gp-dirline .gp-btn { margin-right: 6px; }
/* An answer that marks some empires: the Blue Book's dice (someChoice in gamepanel.js) */
.gp-item-ask.gp-compact { margin: 4px 0 2px; }
.gp-some { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.gp-chip.gp-toggle { color: var(--gp-text); font: inherit; cursor: pointer; opacity: 0.75; }
.gp-chip.gp-toggle:hover { background: var(--gp-bg3); opacity: 1; }
.gp-chip.gp-toggle.gp-yes { opacity: 1; background: var(--gp-bg3); box-shadow: inset 0 0 0 1px var(--gp-good); }
.gp-chip.gp-toggle .gp-die { font-size: 19px; }
.gp-some-help { font-size: 11px; }
.gp-keptdice:not([hidden]) { display: block; margin-top: 8px; }
.gp-keptdice .gp-check { display: block; margin: 2px 0; white-space: normal; }
.gp-keptdice .gp-note { margin: 3px 0 0; }
.gp-gcrank { margin-top: 4px; }

/* TGW: requests for runes, under the turn (renderRequests in gamepanel.js) */
.gp-requests { margin-top: 6px; }
.gp-req {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 3px 6px;
    border: 1px solid rgba(201, 160, 255, 0.45);
    border-radius: 6px;
    background: rgba(201, 160, 255, 0.08);
}
.gp-req + .gp-req { margin-top: 4px; }
.gp-req-ico { color: #c9a0ff; font-weight: 700; }
.gp-req-text { flex: 1; min-width: 0; }
.gp-req-head { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-req-why {    /* why it was asked for: up to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--gp-muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}
.gp-req .gp-btn { flex: none; padding: 2px 10px; }
.gp-req .gp-btn + .gp-btn { margin-left: 0; }
.gp-req .gp-dot { margin: 0 3px 0 1px; }
.gp-ask { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--gp-line); }
.gp-first-note { margin: 0 0 8px; }
/* the form in the Runes part: how many, for which empire, why, Request (renderAsk in gamepanel.js) */
.gp-askgrid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 10px; align-items: center; }
.gp-asklabel { color: var(--gp-muted); font-size: 12px; }
.gp-askgrid .gp-btn.gp-go { padding: 5px 14px; }
.gp-seg { display: inline-flex; border: 1px solid var(--gp-line); border-radius: 6px; overflow: hidden; }
.gp-seg-btn {
    min-width: 36px;
    padding: 3px 0;
    border: 0;
    border-left: 1px solid var(--gp-line);
    background: transparent;
    color: var(--gp-muted);
    font: 13px var(--gp-font);
    cursor: pointer;
}
.gp-seg-btn:first-child { border-left: 0; }
.gp-seg-btn:hover { background: var(--gp-bg3); color: var(--gp-text); }
.gp-seg-btn.gp-seg-on { background: var(--gp-bg3); color: var(--gp-accent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--gp-accent); }
.gp-input {
    box-sizing: border-box;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--gp-line);
    border-radius: 6px;
    background: var(--gp-bg);
    color: var(--gp-text);
    font: 13px var(--gp-font);
}
.gp-input:focus { outline: none; border-color: var(--gp-accent); }
.gp-input::placeholder { color: var(--gp-muted); opacity: 0.75; }
@media (pointer: coarse) { .gp-input { font-size: 16px; } }   /* phones don't zoom in on it */
.gp-ask-mywhy { margin-top: 3px; overflow-wrap: anywhere; }
.gp-ask-open .gp-toolrow { margin-top: 8px; }
/* what a click on a request did, or why it didn't (setReqNote in gamepanel.js) */
.gp-reqnote { margin-top: 6px; padding: 4px 8px; border-radius: 5px; font-size: 12px; overflow-wrap: anywhere; }
.gp-reqnote-ok { color: var(--gp-good); background: rgba(143, 214, 148, 0.08); border: 1px solid rgba(143, 214, 148, 0.35); }
.gp-reqnote-no { color: #f0a08a; background: rgba(240, 160, 138, 0.08); border: 1px solid rgba(240, 160, 138, 0.4); }
/* TGW, the rune watch: the notice under the turn (renderWatch) and the form in the Runes part (renderWatchForm) */
.gp-req.gp-watch { border-color: rgba(240, 194, 75, 0.6); background: rgba(240, 194, 75, 0.10); }
.gp-watch .gp-req-ico { color: var(--gp-accent); }
.gp-watch .gp-req-head { white-space: normal; }
/* TGW: a rune to discard (the Brown Dragon died on the Spike: renderDiscards): the text, then the choice on its own row */
.gp-discard { flex-wrap: wrap; }
.gp-discard .gp-req-head { white-space: normal; }
.gp-discard-pick { display: flex; gap: 6px; flex-basis: 100%; padding-left: 16px; }
.gp-discard-pick .gp-select { flex: 1; min-width: 0; }
.gp-input.gp-watchn { width: 64px; }
.gp-watchlist { margin-top: 10px; }
.gp-watchline { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-top: 1px solid var(--gp-line); }
.gp-watchline .gp-btn { flex: none; padding: 2px 10px; }
.gp-watchwords, .gp-watchstate { display: block; overflow-wrap: anywhere; }
.gp-watchstate { font-size: 12px; }

/* TGW: the drawer (css/sidecards.css) and Kylerela's angle */
.gp-tilt { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gp-line); }

/* TGW: the alliances */
.gp-ally .gp-label { width: 110px; }
.gp-ally .gp-select { flex: 1; min-width: 0; }

/* Diplomacy, the Pacts part: the form, then the promises (renderPacts in gamepanel.js) */
.gp-pactspart { display: flex; flex-direction: column; max-height: min(66vh, 640px); }
.gp-pacthead { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border-bottom: 1px solid var(--gp-line); }
.gp-pacthead .gp-btn { padding: 4px 12px; }
.gp-pactform { flex: none; padding: 2px 12px 10px; border-bottom: 1px solid var(--gp-line); background: var(--gp-bg2); }
.gp-formlabel {
    margin: 8px 0 4px;
    color: var(--gp-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.gp-picks { display: flex; flex-wrap: wrap; gap: 4px; }
.gp-pick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 4px;
    border: 1px solid var(--gp-line);
    border-radius: 12px;
    background: var(--gp-bg);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}
.gp-pick:hover { border-color: #50545e; }
.gp-pick.gp-sel { border-color: var(--c, var(--gp-accent)); background: var(--gp-bg3); }
.gp-pick input { margin: 0; accent-color: var(--gp-accent); cursor: pointer; }
.gp-pick .gp-dot { margin: 0; }
.gp-pick-player { color: var(--gp-muted); font-size: 11px; }   /* who plays the empire */
.gp-pick.gp-sel .gp-pick-player { color: #c9c4ba; }
.gp-pacttext {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 58px;
    max-height: 180px;
    resize: vertical;
    padding: 6px 8px;
    border: 1px solid var(--gp-line);
    border-radius: 6px;
    background: var(--gp-bg);
    color: var(--gp-text);
    font: 13px/1.4 var(--gp-font);
}
.gp-pacttext:focus { outline: none; border-color: var(--gp-accent); }
.gp-pacttext.gp-exchange { min-height: 42px; }
@media (pointer: coarse) { .gp-pacttext { font-size: 16px; } }   /* phones don't zoom in on it */
.gp-pactform .gp-secretrow { display: block; margin: 8px 0 0; }
.gp-pactform .gp-secretrow.gp-off { opacity: 0.55; cursor: default; }
.gp-pactform .gp-note { margin-top: 6px; }
.gp-pactform .gp-toolrow { margin-top: 10px; }
.gp-left-count { margin-left: auto; font-size: 11px; }

.gp-pactlist { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 14px; overscroll-behavior: contain; }
.gp-pactlist .gp-day { margin-top: 4px; }
.gp-pact {
    margin: 8px 0;
    padding: 6px 8px 7px 9px;
    border-left: 3px solid var(--c, var(--gp-line));
    border-radius: 0 6px 6px 0;
    background: var(--gp-bg2);
}
.gp-pact.gp-new { background: #2a2618; box-shadow: inset 0 0 0 1px rgba(240, 194, 75, 0.25); }
.gp-pact.gp-pending { border-left-style: dashed; background: transparent; box-shadow: inset 0 0 0 1px var(--gp-line); }
.gp-pact.gp-done, .gp-pact.gp-declined { background: transparent; opacity: 0.8; }
.gp-pact-head { display: flex; align-items: flex-start; gap: 6px; }
.gp-pact-who { flex: 1; min-width: 0; }
.gp-pact-emp { color: var(--c, var(--gp-text)); font-weight: 600; white-space: nowrap; }
.gp-pact-emp .gp-dot { margin-right: 4px; }
.gp-pact-text { margin: 3px 0; color: #f1ece2; white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; }   /* right for Hebrew (dir=auto) */
.gp-pact.gp-done .gp-pact-text { color: var(--gp-muted); text-decoration: line-through; text-decoration-color: rgba(232, 230, 225, 0.6); }
.gp-pact.gp-declined .gp-pact-text { color: var(--gp-muted); font-style: italic; }
.gp-pact-for { margin: 5px 0 3px; padding-left: 7px; border-left: 2px solid var(--gp-line); }   /* in exchange for */
.gp-pact-forlabel { color: var(--gp-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.gp-pact-for .gp-pact-text { margin: 1px 0 0; }
.gp-pact-meta { color: var(--gp-muted); font-size: 11px; }
.gp-pact-state { margin-top: 3px; color: var(--gp-muted); font-size: 11.5px; }
.gp-pact .gp-toolrow { margin-top: 7px; }
.gp-pact-check { flex: none; display: inline-flex; padding: 1px; cursor: pointer; }
.gp-pact-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--gp-good); cursor: pointer; }
.gp-pact-check input:disabled { cursor: default; }
.gp-pact-tick { flex: none; color: var(--gp-good); font-weight: 700; }
.gp-tag {
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 16px;
    text-transform: uppercase;
    white-space: nowrap;
}
.gp-tag-secret { flex: none; background: rgba(201, 160, 255, 0.16); color: #d6bcff; }
.gp-tag-pending { border: 1px dashed var(--gp-accent); color: var(--gp-accent); }
.gp-tag-declined { border: 1px solid rgba(255, 123, 107, 0.6); color: #ff9a8a; }

/* Promises written for your empires, waiting for your answer, under the turn (renderPactAlerts) */
.gp-req.gp-dip { border-color: rgba(159, 211, 255, 0.45); background: rgba(159, 211, 255, 0.07); }
.gp-dip .gp-req-ico { color: #9fd3ff; }
.gp-dip .gp-req-text { cursor: pointer; }

/* More: the game's values (click one to change it: boardmech.js), where the pointer is */
.gp-more .gp-label { width: 90px; }
.gp-more .editabledata { border-bottom: 1px dashed #50545e; cursor: pointer; }
.gp-more .editabledata:hover { border-bottom-color: var(--gp-accent); color: var(--gp-accent); }
.gp-more .gp-check.gp-left { display: block; margin-top: 10px; }
.gp-pointer { margin-top: 8px; color: var(--gp-muted); font-size: 12px; }
.gp-pointer p, .gp-more p#mouse_position { margin: 0; }
.gp-more .gp-toolrow { margin-top: 10px; }

/* TGW: the Chaos Rift opened while the Spike's token is still on the map (renderRift in gamepanel.js) */
.gp-rift {
    margin-top: 6px;
    padding: 3px 6px;
    border: 1px solid rgba(221, 110, 221, 0.5);
    border-radius: 6px;
    background: rgba(221, 110, 221, 0.08);
}
.gp-rift .gp-flowtitle { color: #e7a3e7; }

/* TGW: I Fought, We Won and the Chaos Rift Struggle while they go on (renderCouncil in gamepanel.js): the choices
   of your empires under the line, always shown */
.gp-council {
    margin-top: 6px;
    padding: 3px 6px;
    border: 1px solid rgba(255, 0, 255, 0.45);
    border-radius: 6px;
    background: rgba(255, 0, 255, 0.07);
}
.gp-council .gp-flowtitle { color: #f0a6f0; }
/* its head names the empires not chosen yet: it wraps rather than cut them off */
.gp-council .gp-alert-line .gp-flowtitle { white-space: normal; overflow-wrap: anywhere; }
.gp-crow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 1px 0 4px 26px; }
.gp-alert-more .gp-crow { margin: 5px 0 0; }
.gp-crow > b, .gp-crow > .gp-side { margin-right: 3px; }
.gp-cbtn {
    min-width: 24px;
    padding: 1px 6px;
    border: 1px solid var(--gp-line);
    border-radius: 4px;
    background: var(--gp-bg);
    color: var(--gp-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.gp-cbtn:hover { border-color: var(--gp-accent); color: var(--gp-accent); }
.gp-cbtn.gp-sel { border-color: var(--gp-accent); background: var(--gp-accent); color: #1a1400; }
.gp-cbtn.gp-over { border-style: dashed; color: var(--gp-muted); }   /* above the empire's power: counts 0 */
.gp-cbtn:disabled { opacity: 0.5; pointer-events: none; }
.gp-warn, .gp-panel .gp-warn { color: #ffb36b; }   /* .gp-panel div sets inherit */
.gp-councilpart { border-top: 1px solid var(--gp-line); }

/* "Darkness (Orr)": the empire in its colour, then its player in the text's (sideLabel in gamepanel.js,
   GamePanelLib.php gp_actor_label()) */
.gp-pl { font-weight: 400; color: var(--gp-text); }

.gp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px 1px 5px;
    border: 1px solid var(--gp-line);
    border-radius: 11px;
    background: var(--gp-bg);
    white-space: nowrap;
}
.gp-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.5);
    flex: none;
    vertical-align: baseline;
    margin-right: 3px;
}
.gp-chip .gp-dot { margin-right: 0; }
.gp-pow {
    min-width: 14px;
    padding: 0 3px;
    border-radius: 3px;
    background: var(--gp-bg3);
    color: var(--gp-good);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.gp-chip.gp-out { opacity: 0.5; }
.gp-chip.gp-out .gp-pow { color: var(--gp-muted); }

/* ---- the parts: a row of buttons in the head, the open part under it (renderTools, part in gamepanel.js) */

.gp-tools { display: flex; gap: 2px; margin-top: 6px; }
.gp-panel .gp-tool {
    position: relative;
    flex: 1 1 0;
    min-width: min-content;   /* with 9 buttons (an admin's), "Tokens" keeps its name: the others are a bit narrower */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 0 4px;
    border: 1px solid var(--gp-line);
    border-radius: 7px;
    background: var(--gp-bg);
    color: var(--gp-muted);
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
.gp-panel .gp-tool:hover { background: var(--gp-bg3); color: var(--gp-text); }
.gp-panel .gp-tool.gp-on { border-color: rgba(240, 194, 75, 0.6); background: rgba(240, 194, 75, 0.08); color: var(--gp-accent); }
.gp-tool-ico { font-size: 15px; line-height: 1; }
.gp-tool-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.gp-tool .gp-badge { position: absolute; top: -6px; right: -3px; min-width: 14px; padding: 2px 3px; font-size: 10px; line-height: 1; }

.gp-parts { border-top: 1px solid var(--gp-line); border-radius: 0 0 8px 8px; }
.gp-part { padding: 10px 12px 12px; }
.gp-part.gp-flush { padding: 0; }
.gp-logpart { display: flex; flex-direction: column; max-height: min(80vh, 820px); }
.gp-boardpart { max-height: min(70vh, 660px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.gp-subtitle { margin-bottom: 5px; color: var(--gp-text); font-weight: 700; }
.gp-select {
    max-width: 100%;
    padding: 3px 4px;
    border: 1px solid var(--gp-line);
    border-radius: 5px;
    background: var(--gp-bg2);
    color: var(--gp-text);
    font: 13px var(--gp-font);
}
.gp-select:disabled { opacity: 0.6; }
.gp-toolrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gp-toolrow + .gp-toolrow { margin-top: 8px; }
.gp-toolrow input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--gp-accent); }
.gp-panel .gp-step {
    width: 30px;
    height: 30px;
    border: 1px solid var(--gp-line);
    border-radius: 6px;
    background: var(--gp-bg2);
    color: var(--gp-text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.gp-panel .gp-step:hover { background: var(--gp-bg3); }
.gp-num-in {
    width: 56px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 4px;
    border: 1px solid var(--gp-line);
    border-radius: 6px;
    background: var(--gp-bg2);
    color: var(--gp-text);
    font: 600 14px var(--gp-font);
    text-align: center;
}
.gp-toolrow .gp-btn { padding: 5px 14px; }
.gp-toolrow .gp-step + .gp-btn { margin-left: auto; }
.gp-toolrow .gp-btn.gp-wide { flex: 1 0 100%; margin-left: 0; }
.gp-quick { display: flex; gap: 4px; margin-top: 8px; }
.gp-panel .gp-quick button {
    flex: 1 1 0;
    min-width: 0;
    padding: 3px 0;
    border: 1px solid var(--gp-line);
    border-radius: 11px;
    background: transparent;
    color: var(--gp-muted);
    font-size: 12px;
    cursor: pointer;
}
.gp-panel .gp-quick button:hover { color: var(--gp-text); }
.gp-panel .gp-quick button.gp-sel { background: var(--gp-bg3); color: var(--gp-text); border-color: #50545e; }
.gp-roll:not(:empty) { margin-top: 8px; }
.gp-roll .gp-die { font-size: 26px; vertical-align: -4px; }
/* Copy: the roll as a line for the group's chat (copyButton(), rollLine()); the line itself only when the browser
   doesn't let the page copy */
.gp-roll-sum { white-space: nowrap; }       /* "3 kills · 3 pains · sum 45" stays on one line */
.gp-roll .gp-copy { float: right; margin: 3px 0 0 8px; }
.gp-copy .gp-btn { min-width: 64px; padding: 1px 9px; text-align: center; }
.gp-copy-line { display: block; clear: both; box-sizing: border-box; width: 100%; margin-top: 6px; padding: 3px 6px; border: 1px solid var(--gp-line);
    border-radius: 4px; background: var(--gp-bg); color: var(--gp-text); font: 12px/1.4 inherit; resize: none; white-space: normal; }

/* Runes (CTW: Elder Signs) and the chosen number, as htmldata.php writes them into #ESandRunesList */
.gp-parts #ESandRunesList { display: block !important; line-height: 1.5; }
.gp-parts #ESandRunesList span[id^="rune"] {
    display: block;
    margin: 5px 0;
    padding: 6px 9px;
    border: 1px solid var(--gp-line);
    border-radius: 7px;
    background: var(--gp-bg2);
    cursor: pointer;
}
.gp-parts #ESandRunesList span[id^="rune"]:hover { border-color: var(--gp-accent); }
.gp-parts #ESandRunesList span[id^="rune"] + br,
.gp-parts #ESandRunesList span[id^="rune"] + br + br,
.gp-parts #ESandRunesList br:has(+ span[id^="rune"]) { display: none; }   /* the runes' margins space them */
.gp-parts #ESandRunesList b { color: var(--gp-accent); }
.gp-parts #ESandRunesList u { text-decoration: none; }
.gp-parts #ESandRunesList .editabledata {
    display: inline-block;
    min-width: 24px;
    padding: 0 9px;
    border-radius: 10px;
    background: var(--gp-accent);
    color: #1a1400;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

/* TGW: every rune of the game, at the bottom of the Runes part (renderRuneList): yours marked, the played
   ones struck through, with who played them and when; a click shows the rune's text */
.gp-runespart { max-height: min(70vh, 660px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.gp-allrunes { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gp-line); }
.gp-runecounts { font-size: 11.5px; }
.gp-runefilters { margin: 6px 0 8px; }
.gp-runelist { display: flex; flex-direction: column; gap: 2px; }
.gp-rune { padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; }
.gp-rune::after { content: ""; display: table; clear: both; }
.gp-rune-line { margin: 0; line-height: 1.35; }
.gp-rune-name { font-weight: 600; }
.gp-rune-text { color: #c9c4ba; font-size: 12px; }
/* Played: the name struck through, what it does still readable. */
.gp-rune.gp-used .gp-rune-name { color: var(--gp-muted); text-decoration: line-through; text-decoration-color: rgba(232, 230, 225, 0.6); }
.gp-rune.gp-used .gp-rune-text { color: var(--gp-muted); }
.gp-rune.gp-mine { border-color: rgba(240, 194, 75, 0.45); background: rgba(240, 194, 75, 0.07); }
.gp-rune.gp-mine .gp-rune-name { color: var(--gp-accent); }
.gp-rune-tag { float: right; margin: 1px 0 2px 8px; background: rgba(240, 194, 75, 0.16); color: var(--gp-accent); }
.gp-rune-play { margin-top: 2px; font-size: 11.5px; }   /* who played it and when: as bright as the name */
.gp-rune-back { font-style: italic; }

/* The admin's buttons, as htmldata.php writes them into #SecretAdminData */
.gp-parts #SecretAdminData { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gp-parts #SecretAdminData br { display: none; }
.gp-parts #SecretAdminData lable, .gp-parts #SecretAdminData label { flex-basis: 100%; margin-top: 4px; color: var(--gp-muted); font-size: 12px; }
.gp-parts #SecretAdminData button {
    padding: 4px 10px;
    border: 1px solid var(--gp-line);
    border-radius: 5px;
    background: var(--gp-bg2);
    color: var(--gp-text);
    font-size: 12px;
    cursor: pointer;
}
.gp-parts #SecretAdminData button:hover { background: var(--gp-bg3); border-color: #50545e; }
.gp-parts #SecretAdminData select {
    max-width: 100%;
    padding: 3px;
    border: 1px solid var(--gp-line);
    border-radius: 5px;
    background: var(--gp-bg2);
    color: var(--gp-text);
}
.gp-parts .gp-check.gp-left { margin-left: 0; color: var(--gp-text); font-size: 13px; }

/* ---- the log */

.gp-filters {
    flex: none;
    padding: 8px 10px;
    border-bottom: 1px solid var(--gp-line);
}
.gp-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.gp-frow + .gp-frow { margin-top: 5px; }
.gp-filters button.gp-fgroup { min-width: 66px; color: var(--gp-text); font-weight: 600; }   /* Moves, Numbers: the whole row */
.gp-filters button {
    padding: 2px 7px;
    border: 1px solid var(--gp-line);
    border-radius: 11px;
    background: transparent;
    color: var(--gp-muted);
    font-size: 12px !important;
    cursor: pointer;
}
.gp-filters button:hover { color: var(--gp-text); }
.gp-filters button.gp-sel { background: var(--gp-bg3); color: var(--gp-text); border-color: #50545e; }
.gp-check { margin-left: auto; color: var(--gp-muted); font-size: 12px; cursor: pointer; white-space: nowrap; }
.gp-check input { vertical-align: -2px; margin: 0 4px 0 0; }

.gp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 16px; overscroll-behavior: contain; }
/* More of the log further down: its last lines fade (gamepanel.js fadeLog()). */
.gp-list.gp-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0, 0, 0, 0.2));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0, 0, 0, 0.2));
}
.gp-day {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -10px;
    padding: 6px 12px 4px;
    background: var(--gp-bg);
    color: var(--gp-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.gp-card {
    margin: 6px 0;
    padding: 6px 8px 6px 9px;
    border-left: 3px solid var(--c, var(--gp-line));
    border-radius: 0 6px 6px 0;
    background: var(--gp-bg2);
}
.gp-card.gp-new { background: #2a2618; box-shadow: inset 0 0 0 1px rgba(240, 194, 75, 0.25); }
.gp-card .gp-who { margin-bottom: 2px; }
.gp-card .gp-who b { color: var(--c, var(--gp-text)); }
.gp-admin {
    margin-left: 6px;
    padding: 0 5px;
    border: 1px solid var(--gp-line);
    border-radius: 3px;
    color: var(--gp-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.gp-line { display: flex; gap: 6px; align-items: baseline; padding: 1px 0; }
.gp-line + .gp-line { border-top: 1px dashed rgba(255, 255, 255, 0.06); padding-top: 3px; margin-top: 2px; }
.gp-ico { flex: none; width: 18px; color: var(--gp-muted); text-align: center; }
.gp-ico.gp-pic { align-self: flex-start; height: 18px; }      /* a moved piece's picture */
.gp-pic img { display: block; width: 18px; height: 18px; object-fit: contain; }
.gp-pics { position: relative; }                             /* several kinds: pictures overlapping, the first on top */
.gp-pics img { position: absolute; width: 13px; height: 13px; }
.gp-pics img:nth-child(1) { left: 0; top: 0; z-index: 3; }
.gp-pics img:nth-child(2) { left: 5px; top: 5px; z-index: 2; }
.gp-pics3 img { width: 12px; height: 12px; }
.gp-pics3 img:nth-child(2) { left: 3px; top: 3px; }
.gp-pics3 img:nth-child(3) { left: 6px; top: 6px; z-index: 1; }
.gp-tile {                                                   /* a gift's tile, in its empire's colour */
    display: inline-block;
    width: 16px;
    height: 10px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
    vertical-align: -1px;
}
.gp-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gp-time { flex: none; color: var(--gp-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.gp-minor { opacity: 0.6; }
.gp-k-roll .gp-ico, .gp-k-rune .gp-ico { color: #c9a0ff; }
.gp-k-admin .gp-ico, .gp-k-game .gp-ico { color: var(--gp-accent); }

.gp-piece { white-space: nowrap; }
.gp-n { color: var(--gp-muted); white-space: nowrap; }
.gp-place { color: #33ccbd; }   /* teal, no empire's colour (an empire's own places: gp_place_html()) */
.gp-arrow { color: var(--gp-muted); }
.gp-delta { color: var(--gp-muted); }
.gp-sep { color: var(--gp-muted); }
.gp-muted, .gp-panel .gp-muted { color: var(--gp-muted); }   /* .gp-panel div sets inherit */
.gp-quote { color: #d8d0c0; font-style: italic; }
.gp-dice { white-space: nowrap; }
.gp-die { font-size: 17px; line-height: 1; vertical-align: -1px; margin-right: 1px; }
.gp-die6 { color: #ff7b6b; }                   /* a kill (RollDice.php) */
.gp-die4, .gp-die5 { color: #f0c24b; }         /* a pain */
.gp-phase {
    display: inline-block;
    margin-right: 3px;
    padding: 0 6px;
    border-radius: 3px;
    background: var(--gp-good);
    color: #0d2410;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
}
.gp-turnsep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 8px;
    color: var(--gp-text);
}
.gp-turnsep::before, .gp-turnsep::after { content: ""; flex: 1; border-top: 1px solid var(--gp-accent); opacity: 0.5; }
.gp-turnsep > b:first-of-type { color: var(--gp-accent); }
.gp-seenline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    color: var(--gp-accent);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.gp-seenline::before, .gp-seenline::after { content: ""; flex: 1; border-top: 1px dashed rgba(240, 194, 75, 0.5); }
.gp-pad { padding: 10px 12px; margin: 0; }

/* ---- the board */

.gp-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.gp-table .gp-namecell { width: 1%; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.gp-table th {
    padding: 4px 2px;
    border-bottom: 1px solid var(--gp-line);
    color: var(--gp-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
}
.gp-table td { padding: 4px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
/* The numbers centred under their heads, the name column as narrow as its names (the user, 17.10.2026). */
.gp-table .gp-num { text-align: center; white-space: nowrap; }
.gp-good { color: var(--gp-good); }
.gp-note { color: var(--gp-muted); font-size: 11.5px; margin: 8px 0 0; }
.gp-note.gp-pad { margin: 0; }

.gp-empire {
    margin: 8px 12px;
    padding: 7px 9px;
    border-left: 3px solid var(--c, var(--gp-line));
    border-radius: 0 6px 6px 0;
    background: var(--gp-bg2);
}
.gp-empire-head { margin-bottom: 4px; }
.gp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 2px 0; }
.gp-label { flex: none; width: 76px; color: var(--gp-muted); font-size: 12px; }
.gp-others .gp-label { width: 150px; }
.gp-row > span:not(.gp-label):not(.gp-slots) { flex: 1; min-width: 0; }
.gp-slots { display: inline-flex; align-items: center; gap: 3px; }
.gp-slot {
    width: 18px;
    height: 18px;
    border: 1px solid #4a4e58;
    border-radius: 3px;
    color: var(--gp-muted);
    font-size: 10px;
    line-height: 18px;
    text-align: center;
}
.gp-slot.gp-full { background: var(--c, var(--gp-accent)); border-color: var(--c, var(--gp-accent)); color: #111; font-weight: 700; }
.gp-pairgap { width: 5px; }

/* ---- order numbers on the faction columns */

.gp-marks { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 1000001; pointer-events: none; }
.gp-mark {
    position: absolute;
    transform: translateX(-100%);
    min-width: 16px;
    padding: 1px 4px;
    border-radius: 8px;
    background: rgba(20, 21, 25, 0.85);
    color: #fff;
    font: 700 10px/13px var(--gp-font);
    text-align: center;
}
.gp-mark1 { background: var(--gp-accent); color: #1a1400; }


/* The rollback (scripts/panel/12b-rollback.js): in the Admin part, under the admin's buttons; in the log, the lines a
   rollback undid struck through, and "Undo this rollback" on a rollback's line. */
.gp-rb { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gp-line); }
.gp-rb p { margin: 0 0 8px; }
.gp-rb-what { color: var(--gp-text); }
.gp-rb-list { max-height: 320px; overflow-y: auto; margin: 6px 0 8px; padding-right: 2px; }
.gp-rb-list .gp-day { margin: 6px 0 2px; }
.gp-rb-pick {
    display: flex;
    gap: 6px;
    align-items: baseline;
    width: 100%;
    margin: 0 0 2px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--gp-bg2);
    color: var(--gp-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.gp-rb-pick:hover, .gp-rb-pick:focus-visible { border-color: var(--gp-accent); }
.gp-rb-card { padding: 8px 10px; border: 1px solid var(--gp-line); border-left: 3px solid var(--gp-accent); border-radius: 0 6px 6px 0; background: var(--gp-bg); }
.gp-rb-card ul { margin: 0 0 8px; padding-left: 18px; }
.gp-rb-card li { margin: 2px 0; }
.gp-rb-head { margin: 10px 0 3px; color: var(--gp-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.gp-rb-line { margin: 0 0 6px; padding: 4px 6px; border-radius: 4px; background: var(--gp-bg2); }
.gp-rb-line.gp-rb-target { box-shadow: inset 0 0 0 1px rgba(240, 194, 75, 0.35); }
.gp-rb-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gp-rb-buttons .gp-btn + .gp-btn { margin-left: 0; }
.gp-rb-error { margin-top: 8px; }
.gp-undone .gp-text { text-decoration: line-through; text-decoration-color: rgba(232, 230, 225, 0.55); }
.gp-undone { opacity: 0.55; }
.gp-undonecard { background: transparent; border-left-style: dashed; }
.gp-rb-undo { margin-left: 6px; padding: 1px 7px; font-size: 11px; vertical-align: 1px; }