/* The dialog that changes an empire's Power and points (scripts/valuedialog.js): a card next to the pointer, or a bit
   narrower than the screen on a phone (.pg-vd-phone); it turns over to its back for the confirmation. Its colours are
   the side panel's, with the empire's (--pg-vd-c, set by valuedialog.js; --pg-vd-on: the text on it) for the border,
   the numbers, Confirm and Next. The card is scripts/dialogcard.js's, shared with the rune dialog (scripts/runes.js,
   .pg-vd-rune, at the end). */

.pg-vd {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000010;             /* over the panel (1000002), a carried piece (2000000) and the tooltips (2000002) */
    box-sizing: border-box;
    width: 252px;
    perspective: 1000px;
    transform-origin: 0 0;        /* valuedialog.js scales it against the pinch zoom */
    color: #e8e6e1;
    font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: left;
}
.pg-vd[hidden] { display: none; }
.pg-vd div { color: inherit; }            /* mystyle.css makes every div white */
.pg-vd button, .pg-vd input { font: inherit; }
.pg-vd [hidden] { display: none !important; }
.pg-vd :focus-visible { outline: 2px solid var(--pg-vd-c, #f0c24b); outline-offset: 1px; }

/* The two faces share one cell, so the card is as high as the higher one; the back is turned away until chosen. */
.pg-vd-card {
    display: grid;
    transform-style: preserve-3d;
    transition: transform 0.34s ease;
}
.pg-vd-card.pg-vd-flipped { transform: rotateY(180deg); }
.pg-vd-face {
    grid-area: 1 / 1;
    box-sizing: border-box;
    padding: 8px 10px 10px;
    border: 1px solid var(--pg-vd-c, #30343e);
    border-top-width: 4px;
    border-radius: 10px;
    background: #141519;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.pg-vd-back { transform: rotateY(180deg); }
/* The face turned away is hidden outright too, half-way through the turn (12.10.2026): an engine that draws no 3D (a
   headless WebKit) showed the back's mirror image over the front. The face turned to shows at once (focus needs it). */
.pg-vd-card:not(.pg-vd-flipped) > .pg-vd-back, .pg-vd-card.pg-vd-flipped > .pg-vd-front {
    visibility: hidden;
    transition: visibility 0s linear 0.17s;
}
.pg-vd-face:focus { outline: none; }   /* the front takes the focus as it opens (valuedialog.js focusFace()) */
@media (prefers-reduced-motion: reduce) {
    .pg-vd-card, .pg-vd-card > .pg-vd-face { transition: none; }
}

.pg-vd-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pg-vd-who {
    flex: 1;
    min-width: 0;
    color: #9a9ca5 !important;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-vd-who b { font-weight: 600; }
.pg-vd-x {
    flex: none;
    padding: 3px 7px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #9a9ca5;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.pg-vd-x:hover { background: #262932; color: #e8e6e1; }

/* front: the value now, the four steps, Other */
.pg-vd-now { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pg-vd-label {
    color: #9a9ca5;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pg-vd-num { color: var(--pg-vd-c, #e8e6e1); font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

.pg-vd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pg-vd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 0 5px;
    border: 1px solid #30343e;
    border-radius: 8px;
    background: #1c1e24;
    color: #e8e6e1;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.pg-vd-step b { font-size: 17px; line-height: 1.1; }
.pg-vd-down b { color: #f2a7a0; }
.pg-vd-up b { color: #8fd694; }
.pg-vd-step small { color: #9a9ca5; font-size: 11px; }
.pg-vd-step:hover:not(:disabled) { border-color: var(--pg-vd-c, #f0c24b); background: #262932; }
.pg-vd-step:disabled { opacity: 0.35; cursor: default; }

.pg-vd-other { display: flex; gap: 6px; margin-top: 6px; }
.pg-vd-more {
    flex: 1;
    padding: 5px;
    border: 1px dashed #30343e;
    border-radius: 8px;
    background: none;
    color: #9a9ca5;
    cursor: pointer;
}
.pg-vd-more:hover:not(:disabled) { border-color: #9a9ca5; color: #e8e6e1; }
.pg-vd-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #30343e;
    border-radius: 8px;
    background: #0e0f12;
    color: #e8e6e1;
    font-variant-numeric: tabular-nums;
}
.pg-vd button:disabled { cursor: default; }

/* back: the change, Back and Confirm */
.pg-vd-change {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    margin: 2px 0 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.pg-vd-old { color: #9a9ca5; }
.pg-vd-arrow { color: #9a9ca5; font-size: 22px; font-weight: 400; }
.pg-vd-new { color: var(--pg-vd-c, #f0c24b); }
.pg-vd-sum { margin-bottom: 10px; color: #9a9ca5 !important; font-size: 13px; text-align: center; }

.pg-vd-actions { display: flex; gap: 8px; }
.pg-vd-actions button { flex: 1; padding: 7px 0; border-radius: 8px; cursor: pointer; }
.pg-vd-backbtn { border: 1px solid #30343e; background: #1c1e24; color: #e8e6e1; }
.pg-vd-backbtn:hover:not(:disabled) { background: #262932; }
.pg-vd-ok, .pg-vd-next {
    border: 0;
    background: var(--pg-vd-c, #f0c24b);
    color: var(--pg-vd-on, #141519);
    font-weight: 600;
}
.pg-vd-next { padding: 5px 12px; border-radius: 8px; cursor: pointer; }
.pg-vd-ok:hover:not(:disabled), .pg-vd-next:hover:not(:disabled) { filter: brightness(1.12); }
.pg-vd-ok:disabled { opacity: 0.6; }

.pg-vd-msg { margin-top: 8px; color: #f0c24b !important; font-size: 12px; }
.pg-vd-back .pg-vd-msg { margin: -2px 0 8px; text-align: center; }

/* a phone: bigger, for fingers (valuedialog.js sets the width: a bit less than the screen's) */
.pg-vd-phone { font-size: 16px; }
.pg-vd-phone .pg-vd-face { padding: 10px 14px 14px; border-radius: 14px; }
.pg-vd-phone .pg-vd-who { font-size: 15px; }
.pg-vd-phone .pg-vd-x { padding: 8px 10px; font-size: 18px; }
.pg-vd-phone .pg-vd-label { font-size: 12px; }
.pg-vd-phone .pg-vd-num { font-size: 32px; }
.pg-vd-phone .pg-vd-steps { gap: 8px; }
.pg-vd-phone .pg-vd-step { padding: 11px 0 9px; border-radius: 10px; }
.pg-vd-phone .pg-vd-step b { font-size: 22px; }
.pg-vd-phone .pg-vd-step small { font-size: 13px; }
.pg-vd-phone .pg-vd-other { gap: 8px; margin-top: 8px; }
.pg-vd-phone .pg-vd-more, .pg-vd-phone .pg-vd-input, .pg-vd-phone .pg-vd-next { padding: 10px; border-radius: 10px; }
.pg-vd-phone .pg-vd-input { font-size: 16px; }   /* 16 px or more: iOS doesn't zoom in when it gets the focus */
.pg-vd-phone .pg-vd-change { font-size: 38px; margin-top: 6px; }
.pg-vd-phone .pg-vd-sum { font-size: 15px; margin-bottom: 14px; }
.pg-vd-phone .pg-vd-actions { gap: 10px; }
.pg-vd-phone .pg-vd-actions button { padding: 13px 0; border-radius: 10px; }
.pg-vd-phone .pg-vd-msg { font-size: 14px; }

/* the rune dialog (scripts/runes.js): front, the rune and "Play this rune?"; back, the line to copy for the group */
.pg-vd-rune { width: 290px; }
.pg-vd-rune .pg-vd-label { display: block; margin-top: 2px; }
.pg-vd-rune-name { margin: 1px 0 4px; color: var(--pg-vd-c, #f0c24b) !important; font-size: 22px; font-weight: 700; line-height: 1.15; }
.pg-vd-rune-text { margin-bottom: 10px; font-size: 14px; }
.pg-vd-rune .pg-vd-sum { text-align: left; }
.pg-vd-rune .pg-vd-front .pg-vd-msg { margin: -4px 0 8px; }
.pg-vd-rune-line {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 4px 0 10px;
    padding: 7px 9px;
    border: 1px solid #30343e;
    border-radius: 8px;
    background: #0e0f12;
    color: #e8e6e1;
    font: inherit;
    resize: none;
}
.pg-vd-rune .pg-vd-back .pg-vd-msg { margin: -4px 0 10px; text-align: left; }
.pg-vd-phone.pg-vd-rune .pg-vd-rune-name { font-size: 26px; }
.pg-vd-phone.pg-vd-rune .pg-vd-rune-text { font-size: 16px; }
.pg-vd-phone .pg-vd-rune-line { font-size: 16px; padding: 10px 12px; }   /* 16 px: iOS doesn't zoom in on it */

/* the rune watch's warning (scripts/watchwarn.js): the card at a drop, and the line on the Power dialog's back */
.pg-vd-warncard { width: 290px; }
.pg-vd-warn-ico { color: var(--pg-vd-c, #f0c24b); font-weight: 700; }
.pg-vd-warn {
    margin: 2px 0 8px;
    padding: 6px 8px;
    border-left: 3px solid var(--pg-vd-c, #f0c24b);
    border-radius: 4px;
    background: #1c1e24;
    font-size: 13px;
}
.pg-vd-warn b { font-weight: 700; }
.pg-vd-warn-q { margin-bottom: 10px; font-size: 14px; }
.pg-vd-back .pg-vd-warn { margin-top: -2px; }
.pg-vd-phone .pg-vd-warn { font-size: 15px; padding: 8px 10px; }
.pg-vd-phone .pg-vd-warn-q { font-size: 16px; margin-bottom: 14px; }

/* the move's card (scripts/movedialog.js): front, the question (Cancel, Move) or what went wrong (OK); back, the move
   saved, before the card goes by itself */
.pg-vd-move { width: 270px; }
.pg-mv-piece { margin: 0 0 6px; color: var(--pg-vd-c, #f0c24b) !important; font-size: 18px; font-weight: 700; line-height: 1.2; }
.pg-mv-route {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 3px 10px;
    margin-bottom: 10px;
}
.pg-mv-route span { min-width: 0; overflow-wrap: anywhere; }
.pg-mv-from { color: #9a9ca5; }
.pg-mv-line { margin: -4px 0 8px; font-size: 13px; overflow-wrap: anywhere; }   /* Kylerela's: its angle, what comes along */
.pg-mv-to { font-weight: 600; }
.pg-mv-why {
    margin: -2px 0 10px;
    padding: 6px 8px;
    border-left: 3px solid #f2a7a0;
    border-radius: 4px;
    background: #1c1e24;
    font-size: 13px;
}
.pg-mv-why b { color: #f2a7a0; font-weight: 700; }
.pg-mv-done { color: var(--pg-vd-c, #f0c24b) !important; font-size: 34px; font-weight: 700; line-height: 1.1; text-align: center; }
.pg-mv-sum { margin: 2px 0 6px; font-size: 14px; text-align: center; }
.pg-vd-phone .pg-mv-piece { font-size: 22px; }
.pg-vd-phone .pg-mv-route { font-size: 16px; gap: 5px 12px; margin-bottom: 14px; }
.pg-vd-phone .pg-mv-line { font-size: 15px; margin-bottom: 10px; }
.pg-vd-phone .pg-mv-why { font-size: 15px; padding: 8px 10px; margin-bottom: 14px; }
.pg-vd-phone .pg-mv-done { font-size: 44px; }
.pg-vd-phone .pg-mv-sum { font-size: 16px; }

/* the card a player gets once after an admin's rollback (scripts/panel/12b-rollback.js, rbSeenCard()): over the page
   dimmed, which takes the presses outside; it stays until "I understand" */
.pg-rbs-back {
    position: fixed;
    inset: 0;
    z-index: 2000009;             /* under the card (.pg-vd: 2000010), over the panel and the pieces */
    background: rgba(0, 0, 0, 0.45);
}
.pg-rbs-back[hidden] { display: none; }
.pg-rbs { width: 340px; }
.pg-rbs .pg-vd-who b { color: #f0c24b; }
.pg-rbs-p { margin: 0 0 8px; font-size: 14px; }
.pg-rbs .gp-who { font-weight: 700; }
.pg-rbs .gp-pl { font-weight: 400; color: #e8e6e1; }
.pg-rbs .gp-admin {
    margin-left: 4px;
    padding: 0 4px;
    border: 1px solid #30343e;
    border-radius: 3px;
    color: #9a9ca5;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pg-rbs .pg-vd-label { display: block; margin: 2px 0 3px; }
.pg-rbs-line {
    margin: 0 0 10px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #1c1e24;
    font-size: 13px;
    text-decoration: line-through;
    text-decoration-color: rgba(232, 230, 225, 0.55);
    overflow-wrap: anywhere;
}
.pg-rbs-time { color: #9a9ca5; }
.pg-rbs-held { padding: 6px 8px; border-left: 3px solid #f0c24b; border-radius: 4px; background: #1c1e24; }
.pg-vd-phone .pg-rbs-p { font-size: 16px; margin-bottom: 12px; }
.pg-vd-phone .pg-rbs-line { font-size: 15px; padding: 8px 10px; margin-bottom: 14px; }
/* The game is waiting for you (scripts/panel/06-head.js waitsCard()): a line per wait, the empire's colour on its edge. */
.pg-wfy-line {
    margin: 0 0 10px;
    padding: 6px 8px;
    border-left: 3px solid #f0c24b;
    border-radius: 4px;
    background: #1c1e24;
    font-size: 14px;
    overflow-wrap: anywhere;
}
.pg-vd-phone .pg-wfy-line { font-size: 16px; padding: 8px 10px; margin-bottom: 14px; }