/* «Мины» — screen styles. Scale, radii and type follow Dice (mode-games.css) inside the shared game shell
   (game-layout.css). Colours come from the RUVI tokens --orange, --muted, --line (styles.css; switched for the dark
   theme by theme-dark.css), mixed with color-mix() where a tint is needed, so most rules serve both themes; the Fair
   modal part uses that modal's --info-* tokens (information.css). A few dark overrides remain for values that have no
   token (tile sheen, the slider thumb, the green win chip, the focus ring's card band); theme-dark.generated.css is not
   regenerated. */

/* Mines is available only by its direct URL; public switches keep the three advertised modes. */
.game-mode-switch{grid-template-columns:repeat(3,minmax(0,1fr))}
#game-layout.mobile-game-layout .game-mode-switch{grid-template-columns:repeat(3,minmax(0,1fr))}
.game-mode-switch[data-mode-count="5"],
#game-layout.mobile-game-layout .game-mode-switch[data-mode-count="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.info-mode-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}

.mines-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.mines-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mines-top{display:none}

/* Stage: the board fills the free height of the card and stays square and centred in it. */
.mines-view{padding:0 22px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.layout--focused-bet:not(.layout--bonuses):not(.layout--legal) .mines-view{flex:1 1 0;min-height:0}
.mines-board{flex:1 1 0;min-height:0;min-width:0;display:grid;place-items:center;container-type:size;padding:4px 0}
.mines-grid{--gap:7px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:var(--gap);width:min(100%,484px);width:min(100cqw,100cqh,484px);aspect-ratio:1}

.mines-cell{--mines-sheen:rgb(255 255 255 / .55);--mine-body:color-mix(in srgb,var(--muted) 62%,transparent);--mine-spike:var(--mine-body);--mine-shine:#fff;--mine-shine-o:.5;--mine-burst:transparent;--mine-shade-o:.55;position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:1px solid var(--line);border-radius:13%;background:linear-gradient(180deg,var(--mines-sheen),transparent 75%),color-mix(in srgb,var(--muted) 15%,transparent);box-shadow:0 1px 2px rgb(0 0 0 / .04);color:inherit;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;transition:background-color .16s,border-color .16s,box-shadow .16s,transform .12s var(--ease)}
.mines-cell[aria-disabled=true]{cursor:default}
.mines-grid .mines-cell:active{transform:none}
.mines-grid.is-playable .mines-cell.is-closed{cursor:pointer}
.mines-grid.is-playable .mines-cell.is-closed:active{transform:scale(.97)}
@media(hover:hover){.mines-grid.is-playable .mines-cell.is-closed:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--orange) 35%,transparent)}}
/* Keyboard focus on a cell: a two-tone ring of its own, not the global one (a light orange that is under 3:1 on the
   light card and invisible on the orange hit tile): an ink outline (the text colour) 2 px off the tile with a band of
   the card colour in between. The ink band is ≥ 3:1 against the card, and against every tile one of the two bands is
   ≥ 3:1, in both themes (measured in T7a: outputs/mines-local-qa/screens/fix7/). It stays inside the 6–7 px grid gap. */
.mines-grid{--mines-focus-gap:#fff}
.mines-grid .mines-cell:focus-visible{outline:2px solid currentColor;outline-offset:2px;box-shadow:0 0 0 2px var(--mines-focus-gap);z-index:1}
.mines-icon{display:block;width:42%;height:42%;pointer-events:none;transition:transform .18s var(--ease),opacity .18s}
.mines-cell.is-pending{border-color:color-mix(in srgb,var(--orange) 40%,transparent);background:color-mix(in srgb,var(--orange) 6%,transparent);transform:scale(.97)}
.mines-cell.is-pending .mines-icon{transform:scale(.86);opacity:.5}
.mines-cell.is-safe{border-color:color-mix(in srgb,var(--orange) 30%,transparent);background:color-mix(in srgb,var(--orange) 10%,transparent);box-shadow:0 2px 7px color-mix(in srgb,var(--orange) 10%,transparent)}
.mines-cell.is-safe .mines-icon{width:58%;height:58%}
.mines-cell.is-safe-rest{background:transparent;box-shadow:none}
.mines-cell.is-safe-rest .mines-icon{width:46%;height:46%;opacity:.3}
/* A revealed mine: ink on the light theme, red on the dark one (29.10: a light mine read as white), a full sphere's shade. */
.mines-cell.is-mine{--mine-body:currentColor;--mine-shine-o:.35;--mine-shade-o:1;background:transparent;box-shadow:none}
.mines-cell.is-mine .mines-icon{width:52%;height:52%}
.mines-cell.is-mine-hit{--mine-body:#1f2024;--mine-shine-o:.5;--mine-shade-o:1;--mine-burst:rgb(255 255 255 / .6);border-color:var(--orange);background:var(--orange);box-shadow:0 4px 14px color-mix(in srgb,var(--orange) 30%,transparent)}
.mines-cell.is-mine-hit .mines-icon{width:70%;height:70%}
.mines-grid.is-instant :is(.mines-cell,.mines-icon){transition:none!important}

/* The former next-cell caption is gone. The row is hidden except on short phones, where it is an empty, deliberate
   landing area for the fixed chat launcher so the launcher never shortens or covers the primary action. */
.mines-line{display:none;align-items:center;min-height:0;flex:none;font-size:14px;color:var(--muted)}
.mines-next.is-empty{display:none}
.mines-result{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:22px;font-size:13px;font-weight:650}
.mines-result[hidden]{display:none}
.mines-result.is-won{color:#08a954;background:#e2f8eb}
.mines-result.is-won:before{content:'✓'}
.mines-result.is-lost{color:var(--muted);background:color-mix(in srgb,var(--muted) 13%,transparent)}
.mines-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:none;padding:20px 12px;border:1px solid var(--line);border-radius:15px}
.mines-summary>div{min-width:0;padding:0 15px;border-right:1px solid var(--line)}
.mines-summary>div:last-child{border:0}
.mines-summary span{display:block;margin-bottom:10px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mines-summary b{display:block;font-size:clamp(19px,1.65vw,29px);letter-spacing:-.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}

/* Bet panel: amount (shared controls), mine count with slider and presets, safe cells, then the action at the bottom. */
.layout--focused-bet:not(.layout--bonuses):not(.layout--legal) #mines-form{min-height:0;flex:1 1 0}
.layout--focused-bet:not(.layout--bonuses):not(.layout--legal) #mines-form>*{flex-shrink:0}
.mines-count-control{border-top:1px solid var(--line);padding-top:18px;margin-top:2px}
.mines-count-input{height:52px}
.mines-count-input input{font-size:26px;appearance:textfield;-moz-appearance:textfield}
.mines-count-input input::-webkit-inner-spin-button,.mines-count-input input::-webkit-outer-spin-button{appearance:none;margin:0}
#mines-count-range{--fill:5%;appearance:none;-webkit-appearance:none;display:block;width:100%;height:6px;margin:16px 0 6px;border:0;border-radius:10px;background:linear-gradient(to right,var(--orange) var(--fill),var(--line) var(--fill));accent-color:var(--orange);cursor:pointer}
#mines-count-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;background:#fff;box-shadow:0 2px 4px #0000001a}
#mines-count-range::-moz-range-thumb{width:22px;height:22px;border:1px solid var(--line);border-radius:50%;background:#fff}
#mines-count-range:disabled{cursor:not-allowed;opacity:.6}
.mines-count-ticks{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}
.mines-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}
.mines-presets button{height:42px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--muted) 4%,transparent);font-size:15px;font-weight:600;color:inherit}
.mines-presets button:hover:not(:disabled){background:color-mix(in srgb,var(--orange) 8%,transparent);border-color:color-mix(in srgb,var(--orange) 35%,transparent)}
.mines-presets [aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:#fff}
.mines-presets [aria-pressed=true]:hover:not(:disabled){background:var(--orange);border-color:var(--orange)}
.mines-presets button:disabled{opacity:.55}
.mines-presets [aria-pressed=true]:disabled{opacity:.8}
.mines-safe-info{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding:14px;border:1px solid color-mix(in srgb,var(--orange) 12%,transparent);border-radius:12px;background:color-mix(in srgb,var(--orange) 8%,transparent)}
.mines-safe-info>span,.mines-safe-info small{font-size:11px;color:var(--muted)}
.mines-safe-info b{font-size:23px;letter-spacing:-.7px;font-variant-numeric:tabular-nums}
.mines-safe-info small[hidden],.mines-cap[hidden]{display:none}
.mines-cap{margin:10px 2px 0;font-size:11px;line-height:1.5;color:var(--muted)}
.layout--focused-bet:not(.layout--bonuses):not(.layout--legal) #mines-error{margin-top:auto;min-height:18px;line-height:18px;overflow-wrap:anywhere}
#mines-error:not(:empty){margin-bottom:6px}
.mines-hint{min-height:20px;margin:4px 0 8px;font-size:12px;line-height:20px;color:var(--muted);text-align:center}
#mines-play{height:52px;min-height:52px;font-size:15px}
#mines-play[aria-busy=true]{opacity:.8;cursor:progress}
#mines-play[aria-disabled=true]:not([aria-busy=true]){opacity:.5;cursor:not-allowed}
#mines-play[aria-disabled=true]:hover{box-shadow:none;filter:none}
#mines-play[aria-disabled=true]:active{transform:none}
/* «Автовыбор» (29.10): under the main button for a running round only — a quiet, see-through tint of the accent that
   unfolds out of zero height (the button above glides up instead of jumping) and folds away when the round is over. */
.mines-auto{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;width:100%;max-height:0;margin:0;padding:0 14px;overflow:hidden;opacity:0;border:0 solid color-mix(in srgb,var(--orange) 28%,transparent);border-radius:11px;background:color-mix(in srgb,var(--orange) 9%,transparent);color:var(--orange);font-size:14px;font-weight:600;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:max-height .24s var(--ease,ease),margin .24s var(--ease,ease),opacity .2s,border-width .24s,background .15s}
.mines-auto.is-shown{max-height:42px;height:42px;margin-top:8px;opacity:1;border-width:1px}
.mines-auto svg{width:17px;height:17px;flex:none}
@media(hover:hover){.mines-auto.is-shown:hover:not([aria-disabled=true]){background:color-mix(in srgb,var(--orange) 15%,transparent)}}
.mines-auto.is-shown:active:not([aria-disabled=true]){transform:scale(.985)}
.mines-auto.is-shown[aria-disabled=true]{cursor:default;opacity:.55}
.mines-auto:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* «Честная игра»: the board recomputed in the browser after a successful check (tokens of the Fair modal). */
.info-mines-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:min(100%,190px);margin:14px auto 16px}
.info-mines-board i{aspect-ratio:1;border:1px solid var(--info-line,var(--line));border-radius:5px;background:var(--info-input,transparent)}
.info-mines-board .is-open{border-color:var(--info-orange,var(--orange));background:var(--info-soft,transparent)}
.info-mines-board .is-mine{border-color:var(--info-text,currentColor);background:var(--info-text,currentColor)}
.info-mines-board .is-hit{border-color:var(--info-orange,var(--orange));background:var(--info-orange,var(--orange))}

/* Recent games: the narrow columns hide on phones (as Dice's). */
@media(max-width:760px){.recent-history[data-mode=mines] :is(th,td):is(:nth-child(3),:nth-child(5),:nth-child(8)){display:none}}

/* Phones and tablets (mobile-games.js layout): board first, the action right under it, then the bet. */
@media(max-width:1000px){
 #game-layout.mobile-game-layout[data-mobile-mode=mines] .game-card{height:auto}
 #game-layout.mobile-game-layout[data-mobile-mode=mines] .game-tools{top:79px}
 #game-layout.mobile-game-layout .mines-view{padding:44px 10px 10px;gap:6px}
 #game-layout.mobile-game-layout .mines-board{flex:none;container-type:normal;padding:0}
 #game-layout.mobile-game-layout .mines-grid{--gap:6px;width:min(100%,clamp(244px,calc(100svh - 380px),460px))}
 #game-layout.mobile-game-layout .mines-icon{width:48%;height:48%}
 #game-layout.mobile-game-layout .mines-line{min-height:28px;font-size:13px;padding:0 2px}
 #game-layout.mobile-game-layout .mines-result{padding:4px 12px;font-size:12px}
 #game-layout.mobile-game-layout .mines-summary{grid-template-columns:repeat(3,minmax(0,1fr));padding:8px 0;min-height:64px}
 #game-layout.mobile-game-layout .mines-summary>div{padding:0 8px;border-right-color:var(--mobile-border)}
 #game-layout.mobile-game-layout .mines-summary>div:first-child{display:none}
 #game-layout.mobile-game-layout .mines-summary span{font-size:10px;line-height:1.3;min-height:13px;margin-bottom:4px;white-space:normal;overflow-wrap:anywhere}
 #game-layout.mobile-game-layout .mines-summary b{font-size:clamp(14px,4.4vw,20px);line-height:1.2;letter-spacing:-.5px}
 #game-layout.mobile-game-layout .sidebar .mode-bet-card.is-mines-bet{height:auto;min-height:0;max-height:none}
 #game-layout.mobile-game-layout #mines-form{display:flex;flex-direction:column;gap:0;height:auto;min-height:0;flex:none}
 #game-layout.mobile-game-layout #mines-form>.bet-title{display:none}
 #game-layout.mobile-game-layout .mines-view>#mines-play{display:flex;flex:none;width:100%;height:48px;min-height:48px;margin:2px 0 0;padding:10px;font-size:15px;border-radius:11px}
 #game-layout.mobile-game-layout .mines-view>.mines-auto{margin-top:-6px}                 /* folded: cancels the column gap */
 #game-layout.mobile-game-layout .mines-view>.mines-auto.is-shown{height:42px;margin-top:0}
 #game-layout.mobile-game-layout .mines-view>#mines-error{margin:0;min-height:0;font-size:12px;line-height:1.4;text-align:center}
 #game-layout.mobile-game-layout .mines-view>#mines-error:empty{display:none}
 #game-layout.mobile-game-layout .mines-line>#mines-hint{min-height:0;margin:0 0 0 auto;padding-left:10px;font-size:12px;line-height:18px;color:var(--orange);text-align:right;white-space:nowrap}
 #game-layout.mobile-game-layout #mines-form>label{font-size:12px;line-height:18px;margin:0 0 5px}
 #game-layout.mobile-game-layout #mines-form>.amount-input{height:52px;min-height:52px;flex:none;border-radius:11px;padding:0 12px}
 #game-layout.mobile-game-layout #mines-form>.amount-input input{font-size:27px;line-height:1.2}
 #game-layout.mobile-game-layout #mines-form>.amount-input>span{font-size:23px}
 #game-layout.mobile-game-layout #mines-form>.quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:44px;gap:7px;margin:8px 0 12px}
 #game-layout.mobile-game-layout #mines-form>.quick-actions button{display:flex;height:44px;min-height:44px;font-size:17px}
 #game-layout.mobile-game-layout #mines-form>.quick-actions .bet-max{font-size:12px}
 #game-layout.mobile-game-layout .mines-count-control{display:grid;grid-template-columns:84px minmax(0,1fr);gap:7px 8px;align-items:center;padding-top:12px}
 #game-layout.mobile-game-layout .mines-count-control>label{grid-column:1/-1;grid-row:1;font-size:12px;line-height:18px;margin:0}
 #game-layout.mobile-game-layout .mines-count-input{grid-column:1;grid-row:2;height:44px;padding:0 10px;border-radius:11px}
 #game-layout.mobile-game-layout .mines-count-input input{font-size:20px}
 #game-layout.mobile-game-layout .mines-presets{grid-column:2;grid-row:2;gap:7px;margin:0}
 #game-layout.mobile-game-layout .mines-presets button{height:44px}
 #game-layout.mobile-game-layout #mines-count-range{grid-column:1/-1;grid-row:3;height:6px;margin:10px 0 2px}
 #game-layout.mobile-game-layout .mines-count-ticks{grid-column:1/-1;grid-row:4}
 #game-layout.mobile-game-layout .mines-safe-info{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:10px;padding:10px 12px;border-radius:10px}
 #game-layout.mobile-game-layout .mines-safe-info b{font-size:18px}
 #game-layout.mobile-game-layout .mines-safe-info small{margin-left:auto}
}
/* Short screens: scale the square from available viewport height (244 px keeps 44 px touch targets with four 6 px
   gaps), keep the action full width, and reserve one empty chat row below it. */
@media(max-width:1000px) and (max-height:800px){
 #game-layout.mobile-game-layout .mines-line{display:flex;min-height:44px}
}
/* At 568 px and below there is not enough height for a 44 px chat launcher, 44 px cells and the primary action at the
   same time. Keep the game controls unobstructed; chat returns automatically when the viewport grows or the route changes. */
@media(max-width:1000px) and (max-height:600px){body.ruvi-mobile.is-secondary-game:has(#game-layout.mobile-game-layout[data-mobile-mode=mines]) .chat-launcher{display:none}}
@media(max-width:350px){
 #game-layout.mobile-game-layout .game-mode-switch a{gap:3px;font-size:11px;padding:0 2px}
 #game-layout.mobile-game-layout .game-mode-switch svg{width:16px;height:16px}
 #game-layout.mobile-game-layout .mines-count-control{grid-template-columns:70px minmax(0,1fr)}
}
@media(max-width:400px){#game-layout.mobile-game-layout .game-mode-switch a{gap:4px;font-size:12px;padding:0 3px}#game-layout.mobile-game-layout .game-mode-switch svg{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.mines-cell,.mines-icon,.mines-auto{transition:none!important}.mines-grid.is-playable .mines-cell.is-closed:hover,.mines-cell.is-pending{transform:none}}

/* Dark theme: only the values without a token (tile sheen, slider thumb as Dice's, the green win chip). */
:root[data-theme="dark"] .mines-cell{--mines-sheen:rgb(255 255 255 / .04);--mine-shine-o:.3}
:root[data-theme="dark"] .mines-cell.is-mine-hit{--mine-shine-o:.5}
:root[data-theme="dark"] .mines-cell.is-mine{--mine-body:#ef4444;--mine-shine-o:.45}
:root[data-theme="dark"] #mines-count-range::-webkit-slider-thumb{background:#202329;box-shadow:0 2px 4px #00000040}
:root[data-theme="dark"] #mines-count-range::-moz-range-thumb{background:#202329}
:root[data-theme="dark"] .mines-result.is-won{background:#1d3d2d;color:#60d397}
:root[data-theme="dark"] .mines-grid{--mines-focus-gap:#1c1f24}
/* theme-dark.css colours every :focus-visible with !important; the cell ring keeps the ink of its theme. */
:root[data-theme="dark"] .mines-grid .mines-cell:focus-visible{outline-color:currentColor!important}

/* Motion layer (dist/mines-motion.js). Decoration only: absolutely positioned inside a cell / the board, never a grid
   item, never takes a pointer event; only transform and opacity are animated; nothing stays on after the animation. */
.mines-board{position:relative}
.mines-fx,.mines-wash-host{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2}
.mines-fx-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.mines-fx-sheen{position:absolute;top:-10%;bottom:-10%;left:-45%;width:36%;background:linear-gradient(100deg,transparent,rgb(255 255 255 / .6),transparent);opacity:0}
.mines-fx-ring{position:absolute;inset:8%;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px var(--orange);opacity:0}
.mines-fx-core{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,rgb(255 255 255 / .85),color-mix(in srgb,var(--orange) 55%,transparent) 55%,transparent 72%);opacity:0}
.mines-fx-p{position:absolute;left:50%;top:50%;width:var(--s,6px);height:var(--s,6px);margin:calc(var(--s,6px) / -2) 0 0 calc(var(--s,6px) / -2);background:var(--c,var(--orange));opacity:0}
.mines-fx-p.is-shard{clip-path:polygon(50% 0,100% 100%,0 100%)}
.mines-fx-p.is-spark{border-radius:50%}
.mines-wash{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--orange) 22%,transparent),transparent 72%);opacity:0}
@media(prefers-reduced-motion:reduce){.mines-fx,.mines-wash-host{display:none}}

.game-tools [data-action="fair"][hidden]{display:none!important}
/* The pause text may wrap under the board on phones. */
@media(max-width:1000px){
 #game-layout.mobile-game-layout .mines-line>#mines-hint[data-kind=pause]{flex:1 1 auto;margin:0;padding:0;white-space:normal;text-align:left}
}