/*
 * style.css — Makatsu ONLY: the table, the cards, the seat furniture.
 *
 * The header, start screen, AI badge, tool panels, dialog shell, fonts and the table felt
 * all come from ../core/deckades.css, which is linked BEFORE this file. Nothing here may
 * restyle a #header-*, .deckades-*, #ai-indicator, .hdr-*, .start-*, .overlay, .panel,
 * #move-log-panel or #ai-eval-panel selector. Verify with:
 *
 *   grep -rn "#header-bar\|\.deckades-logo\|\.start-card\|#ai-indicator" games/Makatsu/style.css
 *       -> must return nothing
 */

:root {
    /* The four skin tokens a game is allowed to re-declare. Jade, because all three of
       Makatsu's card colours (blue / yellow / purple) are in play on the table and the
       accent has to stay distinct from every one of them. */
    --dk-accent:      #35b79a;
    --dk-accent-soft: rgba(53, 183, 154, 0.35);
    --dk-tint:        rgba(24, 122, 118, 0.24);

    /* ── Card geometry ────────────────────────────────────────────────────────
       One property drives layout and paint together: JS sets --card-scale from the
       table size, every geometry helper reads --card-w back out, so the two can
       never disagree. The three scales are ordered by how much the card has to be
       read: hand > table > opponent back. */
    --card-scale: 1;
    --opp-scale:  0.72;
    --play-scale: 1.01;   /* cards on the table, set from JS; see applyCardScale() */
    --card-w: calc(clamp(50px, 12.5vw, 92px) * var(--card-scale));
    --card-h: calc(var(--card-w) * 1.5519);
    --card-radius: calc(var(--card-w) * 0.11);

    /* Makatsu's three ninja colours. */
    --mk-blue:   #3272cc;
    --mk-blue-d: #1d4c92;
    --mk-yellow:   #dda31f;
    --mk-yellow-d: #a5730a;
    --mk-purple:   #8a4fc4;
    --mk-purple-d: #5f2f92;

    --mk-ink:  #f4efe2;
    --mk-back: #1a2a3a;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #0b0916;
    font-family: var(--dk-font-ui);
    -webkit-tap-highlight-color: transparent;
}

/* Cover art behind the START SCREEN only — the one place a per-game identity is wanted.
   No cover.jpg has been supplied yet, so this is a CSS stand-in: drop assets/cover.jpg in
   and swap the gradient for url('assets/cover.jpg') with transform: scale(1.2). */
body::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(circle at 22% 18%, rgba(53, 183, 154, 0.30), transparent 46%),
        radial-gradient(circle at 78% 74%, rgba(138, 79, 196, 0.26), transparent 52%),
        repeating-linear-gradient(58deg, rgba(255, 255, 255, 0.026) 0 2px, transparent 2px 22px),
        linear-gradient(160deg, #101b28, #1b1030 62%, #0a0d18);
    z-index: -2;
    pointer-events: none;
}
body::after {
    content: '';
    position: fixed; inset: 0;
    background: radial-gradient(ellipse at 50% 45%, rgba(6, 4, 12, 0.50), rgba(6, 4, 12, 0.90) 78%);
    z-index: -1;
    pointer-events: none;
}
/* Once the game is running the felt is the surface, so the cover stops competing. */
body.playing::before, body.playing::after { opacity: 0; transition: opacity 0.5s; }

/* Crawlable intro — visible to search engines, removed by init() before the first render. */
#seo-intro {
    position: absolute; top: var(--dk-header-h); left: 0; right: 0;
    max-width: 760px; margin: 0 auto; padding: 24px 20px;
    color: rgba(226, 222, 240, 0.86);
    font-size: 14px; line-height: 1.65;
    z-index: 1;
}
#seo-intro h1 {
    font-family: var(--dk-font-display);
    font-size: 34px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--dk-accent); margin: 0 0 12px;
}
#seo-intro p { margin: 0 0 10px; }

/* ── The table ─────────────────────────────────────────────────────────────── */

#game {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100dvh;
    overflow: hidden;
}

/* Cards are absolutely positioned in #game, never in flex/grid. #board is the felt in the
   middle that the seat ring is measured against. */
#board {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 22px;
    border: 1px solid rgba(53, 183, 154, 0.16);
    background:
        radial-gradient(ellipse at 50% 42%, rgba(53, 183, 154, 0.10), transparent 70%),
        rgba(10, 16, 22, 0.30);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
/* Meister Makatsu himself, ghosted into the felt as a table crest. Deliberately far too faint
   to compete with a card or the phase badge that sits on top of him — the felt should read as
   having a crest, not as having a picture on it.
   Two details carry that: the radial mask fades him out before he reaches the felt's rounded
   border (a hard rectangular cut would read as a misplaced sprite), and he is inset and
   height-capped so he never grows into the play ring on a wide viewport. */
#board::before {
    content: '';
    position: absolute;
    inset: 8%;
    background: url('assets/makatsu.png') center / contain no-repeat;
    /* Calibrated against a screenshot, not guessed: 0.055 was literally invisible on this
       felt, which is not "transparent" but "absent". */
    opacity: 0.15;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 78%);
    pointer-events: none;
}

.play-zone { position: absolute; width: 0; height: 0; pointer-events: none; }
.play-zone.hidden { display: none; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
/* CSS-drawn: a colour field, a big numeral, corner pips and a ninja watermark. No image
   assets, so they stay crisp at any card scale. */

/* Every card is a painted PNG at assets/cards/. The art already carries its own rounded
   corners in the alpha channel, so no border and no background of ours goes under it. */
.card {
    position: absolute;
    width: var(--card-w);
    height: var(--card-h);
    border-radius: var(--card-radius);
    background: center / contain no-repeat;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.55));
    user-select: none;
    will-change: transform;
    transition: transform 0.34s cubic-bezier(.3,.7,.35,1), filter 0.5s ease, opacity 0.5s ease;
}
.card-label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* Corner pips, so a fanned card is still identifiable when only its edge shows. */
.card .pip {
    position: absolute;
    font-size: calc(var(--card-w) * 0.24);
    font-weight: 700;
    line-height: 1;
    opacity: 0.95;
}


/* Face-down: the dojo back. Six hues so each seat's deck reads as its own dojo. */
/* Face-down: one of the six painted dojo backs, set from JS per seat. */
.card.back { background: center / contain no-repeat; }

/* Opponent fans are drawn smaller — they are never read, only counted. */
.card.small { width: calc(var(--card-w) * var(--opp-scale)); height: calc(var(--card-h) * var(--opp-scale)); }

/* Cards on the table sit between hand size and back size: they must be read. */
.card.played { width: calc(var(--card-w) * var(--play-scale)); height: calc(var(--card-h) * var(--play-scale)); }

/* The human's hand. */
.hand-card { cursor: pointer; touch-action: manipulation; }
.hand-card.playable:hover { filter: brightness(1.12); }
.hand-card.disabled { cursor: default; filter: brightness(0.62) saturate(0.6); }

/* Scoring reveal: the winning card of each colour is ringed, everything else dims. */
/* Faded rather than switched: the reveal cross-fades from one colour to the next. Opacity
   carries most of it, because a bare brightness() filter would replace the drop-shadow. */
.card.dimmed {
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.55)) brightness(0.55) saturate(0.6);
    opacity: 0.34;
}
.card.winner {
    box-shadow: 0 0 0 3px var(--dk-accent), 0 0 22px var(--dk-accent-soft), 0 3px 9px rgba(0, 0, 0, 0.5);
    z-index: 60 !important;
}
/* The card taking the colour swells while it is judged. Applied on top of whatever rotation
   the seat already carries, which is why renderPlayed() writes rotate() into a custom
   property rather than straight into transform. */
.card.lifted {
    transform: rotate(var(--seat-rot, 0deg)) scale(1.16) !important;
}
.card.ghost { position: fixed; z-index: 900; pointer-events: none; margin: 0; }

/* "played last on a tie" — the rule that decides the award and is invisible otherwise. */
.tie-badge {
    position: absolute;
    padding: 2px 7px;
    border-radius: 9px;
    background: rgba(20, 12, 34, 0.95);
    border: 1px solid var(--dk-accent);
    color: var(--dk-accent);
    font-family: var(--dk-font-ui);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px;
    white-space: nowrap;
    z-index: 70;
    pointer-events: none;
}

/* ── Seat furniture ────────────────────────────────────────────────────────── */

.player-tag {
    position: absolute;
    display: flex; align-items: center; gap: 7px;
    padding: 4px 9px;
    border-radius: 13px;
    background: rgba(14, 12, 26, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(232, 228, 245, 0.9);
    font-family: var(--dk-font-ui);
    font-size: 12px; white-space: nowrap;
    transform: translate(-50%, -50%);
    z-index: 40;
    pointer-events: none;
    transition: border-color 0.2s, background 0.2s;
}
.player-tag.active {
    border-color: var(--dk-accent);
    background: rgba(20, 44, 40, 0.94);
    box-shadow: 0 0 14px var(--dk-accent-soft);
}
.player-tag b { font-weight: 600; color: #fff; }

/* Penalty points — the number that decides the game, so it is the loud one. */
.tag-score {
    padding: 1px 7px;
    border-radius: 9px;
    background: rgba(210, 90, 80, 0.22);
    border: 1px solid rgba(210, 90, 80, 0.45);
    color: #f0a99f;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.tag-makatsu { font-size: 14px; filter: drop-shadow(0 0 5px var(--dk-accent)); }

/* The human's own deck and reserve piles, drawn for real — this is where the game's
   central tradeoff plays out, so it gets to be a physical thing rather than a number. */
.pile {
    position: absolute;
    z-index: 30;
    pointer-events: none;
}
/* A pile card IS a hand card back — .card.back.dojoN supplies the art; only the size is
   overridden, so the two can never drift apart. */
.pile .pile-card {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: calc(var(--card-radius) * 0.8);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}
.pile .pile-label {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    white-space: nowrap;
    color: rgba(210, 205, 228, 0.7);
    font-family: var(--dk-font-ui);
    font-size: 10.5px; letter-spacing: 0.4px;
}
.pile .pile-count {
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    color: #fff;
    font-family: var(--dk-font-display);
    font-size: calc(var(--card-w) * 0.30);
    font-weight: 700;
    z-index: 2;
    /* A shadow alone could not carry this: the numeral sits on card-back ART, which is light
       and busy, so white-on-pattern stayed hard to read at every size. A pill gives it its
       own ground. Padding and radius are in `em` so they track the font-size above, which is
       itself derived from --card-w — an opponent's smaller pile then scales with it instead
       of needing a second rule. min-width keeps a single digit a pill rather than a blob. */
    padding: 0.1em 0.32em;
    min-width: 1.55em;
    box-sizing: border-box;
    text-align: center;
    border-radius: 0.55em;
    background: rgba(6, 11, 15, 0.7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.55);
}

/* ── Centre badge: what a token costs right now ────────────────────────────── */

#phase-badge {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    pointer-events: none;
    z-index: 5;
}
/* The face is assets/p1-3.png, set from JS for the current phase. The art is already a
   painted disc, so no gradient or ring of our own goes under it. */
/* Kept deliberately small: it is a keep-out box the play ring has to clear, so every pixel
   of badge is a pixel the cards on the table cannot have. */
#phase-token {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: center / contain no-repeat;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s;
}
/* The numeral stays in the DOM for screen readers; the art carries it on screen. */
#phase-token-val, .penalty-token .tok-val {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* The outgoing token during a phase change; see crossfadePhaseToken(). */
.phase-token-ghost {
    position: fixed;
    border-radius: 50%;
    background: center / contain no-repeat;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
    z-index: 940;
    pointer-events: none;
}
#phase-label {
    font-family: var(--dk-font-display);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(226, 222, 240, 0.72);
}
#phase-round { font-size: 10px; letter-spacing: 0.05em; color: rgba(226, 222, 240, 0.42); }

/* ── Status line under the human's hand ────────────────────────────────────── */

#status-line {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: 14px;
    min-height: 22px;
    padding: 4px 14px;
    color: rgba(232, 228, 245, 0.82);
    font-family: var(--dk-font-ui);
    font-size: 13px; letter-spacing: 0.3px; text-align: center;
    white-space: nowrap;
    z-index: 45;
    pointer-events: none;
}

/* ── Banner for the phase seams ────────────────────────────────────────────── */
/* The reserve rollover and phase 3's keep-two round are the two rules a player will get
   wrong, so they get an unmissable moment rather than a log line. */

#banner {
    position: absolute;
    left: 50%; top: 42%;
    transform: translate(-50%, -50%) scale(0.9);
    padding: 14px 30px;
    border-radius: 14px;
    background: rgba(14, 26, 24, 0.95);
    border: 1px solid var(--dk-accent);
    box-shadow: 0 0 34px var(--dk-accent-soft), 0 12px 40px rgba(0, 0, 0, 0.7);
    color: #eafaf5;
    font-family: var(--dk-font-display);
    font-size: 21px; letter-spacing: 0.06em; text-align: center;
    max-width: 76vw;
    opacity: 0;
    z-index: 200;
    pointer-events: none;
    transition: opacity 0.28s, transform 0.28s;
}
#banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ── Game-over table ───────────────────────────────────────────────────────── */

#over-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 14px; }
#over-table td {
    padding: 6px 8px;
    border-top: 1px solid rgba(150, 100, 220, 0.18);
    text-align: left;
}
#over-table tr.me td { color: #fff; font-weight: 600; }
#over-table tr.win td { color: var(--dk-accent); }
#over-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
#over-table td.rank { width: 34px; opacity: 0.55; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
/* Tablet is the floor: 1024x768, 768x1024 and 640x360, at 2 AND 6 seats. */

@media (max-height: 460px) {
    #phase-token { width: 36px; height: 36px; font-size: 19px; }
    #phase-label { font-size: 11px; }
    #status-line { bottom: 8px; font-size: 12px; }
    #banner { font-size: 17px; padding: 10px 20px; }
}
@media (max-width: 560px) {
    #banner { font-size: 16px; padding: 10px 16px; }
    .player-tag { font-size: 11px; padding: 3px 7px; gap: 5px; }
}

/* Short viewport: the badge leaves the contested middle of the board and lays out in a
   row inside the strip reserved above the status line. See renderPhaseBadge(). */
#phase-badge.compact {
    flex-direction: row;
    align-items: center;
    gap: 9px;
}
#phase-badge.compact #phase-token { width: 26px; height: 26px; font-size: 15px; border-width: 1.5px; }
#phase-badge.compact #phase-label { font-size: 11px; }
#phase-badge.compact #phase-round { font-size: 11px; }

/* Opponent piles are drawn smaller, matching their fans. */
.pile.small .pile-count { font-size: calc(var(--card-w) * var(--opp-scale) * 0.30); }
.pile.small .pile-label { font-size: 9.5px; }

/* An exhausted deck or reserve keeps its footprint, so the count and label always have
   something to belong to. */
.pile-empty {
    position: absolute; inset: 0;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: calc(var(--card-radius) * 0.8);
    background: rgba(255, 255, 255, 0.02);
}
.pile.empty .pile-count { opacity: 0.4; }

/* ── Meister Makatsu marker ────────────────────────────────────────────────── */
/* Created once and only repositioned, so the transition animates the hand-over. */
/* Meister Makatsu himself, assets/makatsu.png, sitting in a jade ring so he still reads as
   a marker rather than as another piece of the artwork. */
#makatsu-marker {
    position: absolute;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #2f6f61, #12352e);
    border: 2px solid var(--dk-accent);
    box-shadow: 0 0 16px var(--dk-accent-soft), 0 4px 12px rgba(0, 0, 0, 0.55);
    /* ALWAYS on top of the game layer. He was at 55, under the winner ring (60 !important)
       and the tie badge (70) — so during the reveal, when he orbits the centre badge to face
       whoever is taking the colour, he hid behind the very card being judged. 960 clears the
       whole felt layer including a penalty token in flight (950), and stays below the shared
       chrome's --dk-z-overlay (1100) and --dk-z-start (1200) so the game-over dialog and the
       start screen still cover him. Raise those two, not this, if that ever changes. */
    z-index: 960;
    pointer-events: none;
    transition: left 950ms cubic-bezier(.3,.7,.35,1), top 950ms cubic-bezier(.3,.7,.35,1),
                transform 900ms cubic-bezier(.35,.65,.35,1);
}
#makatsu-marker::after {
    content: '';
    position: absolute; inset: 2px;
    background: url('assets/makatsu.png') center bottom / contain no-repeat;
}
.tag-makatsu {
    display: inline-block; width: 16px; height: 16px;
    background: url('assets/makatsu.png') center / contain no-repeat;
    vertical-align: middle;
}
#makatsu-marker.moving {
    animation: mk-hop 950ms cubic-bezier(.3,.7,.35,1);
}
/* The one animation on the table that JS does not gate through anim(): it is a CSS
   transition, so REDUCED MOTION has to be honoured here or he keeps gliding for 950ms while
   every card teleports. That also makes him briefly overlap things he is placed clear of —
   his flight path is a straight line between two spots, and it crosses whatever lies between
   them, the phase badge included. */
@media (prefers-reduced-motion: reduce) {
    #makatsu-marker { transition: none; }
    #makatsu-marker.moving { animation: none; }
}
@keyframes mk-hop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.45); box-shadow: 0 0 34px var(--dk-accent); }
    100% { transform: scale(1); }
}

/* ── Live ranking ─────────────────────────────────────────────────────────── */
#ranking-table {
    position: absolute;
    top: calc(var(--dk-header-h) + 8px);
    right: 12px;
    width: 178px;
    z-index: 46;
    pointer-events: none;
    font-family: var(--dk-font-ui);
}
#ranking-table .rank-row {
    position: absolute;
    left: 0; right: 0;
    height: 24px;
    display: flex; align-items: center; gap: 7px;
    padding: 0 9px;
    border-radius: 12px;
    background: rgba(14, 12, 26, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(232, 228, 245, 0.86);
    font-size: 12px;
    transition: top 420ms cubic-bezier(.3,.7,.35,1), border-color 0.25s;
}
#ranking-table .rank-row.me { color: #fff; font-weight: 600; }
#ranking-table .rank-row.leader { border-color: var(--dk-accent); }
#ranking-table .rank-place { opacity: 0.5; width: 16px; }
#ranking-table .rank-name  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ranking-table .rank-score {
    font-variant-numeric: tabular-nums; font-weight: 600;
    color: #f0a99f;
}
#ranking-table .rank-row.leader .rank-score { color: var(--dk-accent); }

@media (max-width: 620px), (max-height: 460px) {
    #ranking-table { width: 132px; right: 8px; }
    #ranking-table .rank-row { height: 21px; font-size: 11px; padding: 0 7px; }
    #makatsu-marker { width: 32px; height: 32px; font-size: 17px; }
}

/* Deck and reserve wear the same dojo back, so the reserve carries a thin accent ring —
   it is the pile the game turns on and it has to stay tellable at a glance. */
.pile.reserve .pile-card { box-shadow: 0 0 0 1.5px var(--dk-accent-soft), 0 2px 5px rgba(0, 0, 0, 0.45); }
/* The count now has a pill behind it, so the old double black glow (which existed to fight
   the card art directly) would only muddy the numeral. One tight shadow for edge contrast. */
.pile .pile-count { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }

/* -- Penalty token in flight ------------------------------------------------ */
/* Full opacity the whole way and flown one at a time. A penalty landing on you is the most
   consequential thing in a round and it has to be impossible to miss. */
.penalty-token {
    position: fixed;
    border-radius: 50%;
    background: center / contain no-repeat;
    filter: drop-shadow(0 0 14px rgba(216, 105, 94, 0.8)) drop-shadow(0 5px 12px rgba(0, 0, 0, 0.6));
    z-index: 950;
    pointer-events: none;
}


/* Names are the primary label on the felt; they were sized like a caption. */
.player-tag { font-size: 15px; }
.player-tag b { font-weight: 600; }
@media (max-width: 620px), (max-height: 460px) {
    .player-tag { font-size: 13px; }
}

/* ── Multiplayer lobby ─────────────────────────────────────────────────────── */
/* The dialog itself is .overlay/.panel from the shared sheet; only these bits are
   Makatsu's own. */
.mp-input {
    width: 100%; min-height: 40px; padding: 8px;
    background: var(--dk-field-bg); color: #eee;
    border: 1px solid var(--dk-field-line); border-radius: 6px;
    font-family: var(--dk-font-ui); font-size: 14px;
}
.mp-code-input {
    font-family: var(--dk-font-display);
    font-size: 22px; letter-spacing: 0.32em; text-align: center; text-transform: uppercase;
}
.mp-code {
    font-family: var(--dk-font-display);
    font-size: 40px; letter-spacing: 0.28em; font-weight: 700;
    color: var(--dk-accent); margin: 6px 0 10px;
}
.mp-seats { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; }
.mp-seat {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 10px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 13.5px; text-align: left;
}
.mp-seat-n {
    width: 20px; height: 20px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--dk-accent-soft);
    font-size: 11px; font-weight: 700;
}
.mp-seat-ai { opacity: 0.55; font-style: italic; }
.mp-error { color: var(--dk-msg-alert); font-size: 13px; min-height: 18px; margin: 6px 0; }
/* The lobby's own hint: .start-sub-hint carries a negative top margin so it can tuck under
   a checkbox on the start screen, which in a dialog drags it over the control above. */
.mp-hint {
    color: #8a7fb0; font-size: 12px; line-height: 1.5;
    margin: 4px 0 10px; text-align: center;
}