/* Actual playing surfaces. Lobby artwork is intentionally preserved. */
body:has(.casual-app #экран-игры:not([hidden])){background:radial-gradient(ellipse at 50% 10%,#284c3955,transparent 62%),radial-gradient(ellipse at 50% 100%,#8c633414,transparent 60%),#080f10}
.casual-app #экран-игры{position:relative;max-width:820px;padding-bottom:12px}
.casual-app:has(#экран-игры:not([hidden])) .topbar{opacity:.85;margin-bottom:16px}
.casual-app #экран-игры .game-heading{border-bottom:1px solid #c9aa6040;padding-bottom:15px;margin-bottom:16px;align-items:center}
.casual-app #экран-игры .game-heading h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(30px,6vw,46px);font-weight:400;letter-spacing:-.025em;color:#f3deac;text-shadow:0 2px 10px #0009;line-height:1.1}
.casual-app #экран-игры .game-heading h1>span{display:none}
.casual-app .game-heading>span{background:#d5b6790c;border:1px solid #bca36c55;border-radius:6px;padding:8px 12px;color:#cfbc95;white-space:nowrap;font-size:11px}
.casual-app .status{border:1px solid #cfb57936;border-radius:14px;padding:12px 16px;margin-bottom:18px;background:linear-gradient(115deg,#25362c,#111c19);box-shadow:inset 0 1px #ffefc30c,0 6px 15px #0003;gap:26px}
.casual-app .status>div+div{border-left:1px solid #c3af7240;padding-left:26px}
.casual-app .status small{font-size:9px;letter-spacing:.13em;color:#a6b4a4}
.casual-app .status strong{font:500 27px/1.25 Georgia,serif;color:#f5dca6}
.casual-app .status>button{border-radius:50%;background:#a78d5220;border-color:#c9ac6a77;min-height:38px;width:38px;height:38px;color:#e7d3a4}
.casual-app .game-window{border:7px solid transparent;border-radius:24px;background:linear-gradient(#17372b,#0a211b) padding-box,linear-gradient(135deg,#f8e4ae 0%,#a18542 14%,#433621 29%,#bea165 52%,#e1c182 60%,#4f3d21 82%,#bfa66d 100%) border-box;box-shadow:0 22px 45px #0009,0 2px 0 #f8eac347,inset 0 0 0 2px #070f0c,inset 0 0 35px #0008}
.casual-app .game-scroll{background:radial-gradient(ellipse at 50% 5%,#275d3020,#0005),url('img/casual/play/felt.webp') center/750px;box-shadow:inset 0 0 35px #0008;border-radius:17px;scrollbar-color:#a78c50 #0d241c}
.casual-app .game-board{isolation:isolate}
.casual-app .game-board:not(.solitaire-board):not(.mines-board){padding:14px}
.casual-app #message{font-size:12px;color:#b5c3b2;line-height:1.6;margin:7px auto 0;max-width:570px;min-height:42px}
.casual-app .game-tools{gap:8px;margin:10px 0}
.casual-app .game-tools>button{border-radius:10px;border:1px solid #baa16780;background:linear-gradient(#394533,#1e2d23);min-height:46px;padding:11px 18px;font-size:13px;color:#f1e2bd;box-shadow:inset 0 1px #e4d09424,0 4px 8px #0004;transition:background .15s,transform .15s,box-shadow .15s}
.casual-app .game-tools>button.active{background:linear-gradient(#d9bd79,#a28748);color:#182c20;border-color:#ebd49a}
.casual-app #экран-игры button:active:not(:disabled){transform:translateY(1px)}
.casual-app .bottom-actions{gap:8px;border-top:1px solid #c4aa6930;padding-top:13px;margin-top:16px}
.casual-app .bottom-actions button{background:#121f1a;border-color:#b29c6c40;color:#b9c2b0;border-radius:9px;font-size:12px;min-height:43px}
.casual-app #save-status{color:#708478;font-size:9px;letter-spacing:.02em}
.casual-app .selected-item{outline:2px solid #ffe7a8!important;outline-offset:1px;filter:brightness(1.04);box-shadow:0 0 0 4px #b9983840,0 0 22px #e5b64440!important}
.casual-app .hint-cell{outline:2px solid #ffe5a0!important;outline-offset:1px;animation:premium-hint 1.6s ease-in-out infinite alternate}
/* Porcelain inlaid pieces: an actual material atlas, numerals remain live. */
.casual-app .slide-tile,.casual-app .letter-cell,.casual-app .mah-tile{background-image:url('img/casual/play/tiles.webp');background-size:343% 229%;background-position:96.5% 92%;background-color:#d7c49b;border:1px solid #efe4c9b0;box-shadow:0 3px 0 #8b754e,0 5px 7px #0008,inset 0 1px #fff8;text-shadow:0 1px #fff6;color:#214735}
.casual-app .slide-tile{font-family:Georgia,serif;font-weight:500;font-size:clamp(30px,7vw,52px);border-radius:12px}
.casual-app .slide-tile.correct{background-image:url('img/casual/play/tiles.webp');background-size:343% 229%;background-position:96.5% 92%;background-color:#d7c49b;color:#87703f;box-shadow:0 3px 0 #8b754e,0 5px 7px #0008,inset 0 0 0 2px #b5a16470}
.casual-app .slide-tile.movable{outline:1px solid #ecd293;outline-offset:-5px}
.casual-app .sliding-grid{background:#0a211b66;box-shadow:inset 0 2px 20px #0008;outline:1px solid #beaa6644}
.casual-app .letter-grid{gap:4px;padding:3px;background:#051c1570;border-radius:9px}
.casual-app .letter-cell{font-family:Georgia,serif;font-weight:600;letter-spacing:.015em;border-radius:5px}
.casual-app .letter-cell.word-found{background-image:none!important;box-shadow:inset 0 1px #fff6,0 2px 0 #48674a;animation:premium-found .35s ease-out}
.casual-app .word-theme{font:italic 21px Georgia,serif;color:#e5d4a3;padding:2px 0 16px}
.casual-app .word-list{gap:6px;margin-top:19px}
.casual-app .word-list span{font-size:10px;border-radius:5px;letter-spacing:.09em;padding:7px 10px;background:#09231a80;border-color:#d2b67155;color:#d4c399}
.casual-app .mah-tile{border-radius:7px;box-shadow:2px 4px 0 #c3ae80,3px 6px 0 #4c6c51,3px 8px 7px #0009;background-size:343% 229%;overflow:hidden}
.casual-app .mah-tile.blocked{filter:brightness(.79) saturate(.8);border-color:#b3a078}
.casual-app .mah-tile.free{filter:brightness(1.06)}
.mah-face{display:block;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 1px 0 #ffffff80)}
/* Real illustrated playing cards, with readable corner labels in crowded stacks. */
.casual-app .solitaire-board{--card-h:125px;--card-step:30px;min-height:480px;padding:24px 18px 40px}
.casual-app .playing-card{border:1px solid #efe0b5;border-radius:7px;background:linear-gradient(115deg,#f9edcd,#d9ceb4);box-shadow:0 1px 0 #fff8,0 3px 5px #0009;color:#202a23;overflow:hidden}
.casual-app .playing-card.red-card{color:#a72536}
.playing-card>.карта-рисунок,.playing-card>.рубашка-рисунок{display:block;width:100%;height:100%;pointer-events:none}
.playing-card>.карта-рисунок{filter:contrast(1.04)}
.casual-app .playing-card.back-card{background:repeating-linear-gradient(45deg,#123f2c 0 3px,#1a4a32 3px 5px);border-color:#d3bb7d;box-shadow:inset 0 0 0 3px #c2a668,inset 0 0 0 5px #214332,0 2px 5px #0008}
.casual-app .playing-card.back-card:after{content:'♜';position:absolute;inset:17% 18%;display:grid;place-items:center;border:1px solid #d4b96a80;border-radius:50%;font:26px Georgia,serif;color:#d2b56b;box-shadow:inset 0 0 20px #0005;pointer-events:none;background:radial-gradient(#315a3a,#183e2b)}
.casual-app .stock small{z-index:2;bottom:4px;right:5px;background:#102b22d9;border:1px solid #bfaa6170;border-radius:4px;padding:1px 4px;font-size:10px}
.casual-app .card-slot:not(.playing-card){background:#0a211b50;border:1px solid #cab5754a;box-shadow:inset 0 2px 8px #0005;border-radius:7px;color:#c4b4778c;font-family:Georgia,serif}
.casual-app .spider-complete{font-family:Georgia,serif;color:#d5c593;font-size:19px}
.card-pile>.playing-card{transition:box-shadow .15s}
.card-stack-label{position:absolute;left:0;right:0;top:0;height:calc(var(--card-step) - 2px);z-index:2;font:700 13px/1.1 Georgia,serif;background:linear-gradient(115deg,#f9edcd,#e6d9b9);border-radius:2px;padding:3px 2px;pointer-events:none;box-sizing:border-box}
/* Jewels are painted assets, each with its own silhouette. */
.casual-app .jewel-grid{gap:1px;background:linear-gradient(#03160f70,#051b1570);border:1px solid #bca97038;border-radius:12px;padding:5px;box-shadow:inset 0 2px 16px #0008}
.casual-app .jewel-cell{position:relative;min-width:0;padding:0;border:0;border-radius:7px;background:radial-gradient(#24493460,#0b241828);box-shadow:inset 0 0 0 1px #cfbc7330;overflow:visible}
.casual-app .gem{font-size:0;color:transparent;padding:0;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(1px 3px 2px #0009);width:100%;height:100%;background-image:url('img/casual/play/gems.webp');background-size:300% 200%;background-repeat:no-repeat;transform:scale(1.14)}
.casual-app .gem-0{background-position:0 0;clip-path:polygon(52% 8%,92% 47%,52% 87%,15% 47%)}
.casual-app .gem-1{background-position:50% 0;clip-path:circle(36% at 50% 48%)}
.casual-app .gem-2{background-position:100% 0;clip-path:polygon(49% 7%,59% 19%,70% 32%,79% 44%,83% 57%,80% 69%,71% 80%,57% 86%,43% 86%,28% 81%,19% 69%,16% 55%,22% 40%,35% 22%)}
.casual-app .gem-3{background-position:0 100%;clip-path:polygon(50% 3%,95% 75%,10% 75%);transform:translateY(8%) scale(1.12)}
.casual-app .gem-4{background-position:50% 100%;clip-path:polygon(50% 3%,84% 23%,84% 61%,50% 81%,17% 61%,17% 23%);transform:translateY(6%) scale(1.14)}
.casual-app .gem-5{background-position:100% 100%;clip-path:inset(5% 12% 22% 10% round 17%);transform:translateY(6%) scale(1.1)}
.casual-app .match-summary{display:flex;justify-content:space-between;gap:10px;margin:1px 0 12px;font-size:12px;color:#e4d5ab}
.casual-app .match-progress{height:5px;background:#041b1377;border:1px solid #a58c4a50;margin-bottom:14px;box-shadow:inset 0 1px 3px #0009}
.casual-app .match-progress i{background:linear-gradient(90deg,#437e52,#ebcc86);box-shadow:0 0 12px #d3b26466}
.gem.is-clearing{animation:gem-burst .3s ease-in forwards!important}.gem.is-dropping{animation:gem-arrive .28s ease-out both!important}
/* Polished coloured blocks and recessed empty sockets. */
.casual-app .blocks-grid{gap:3px;padding:5px;background:#0c241caa;border:1px solid #bc9f5b50;border-radius:11px;box-shadow:inset 0 3px 18px #000b}
.casual-app .block-cell{border-radius:5px;border:1px solid #72916c24;background:#142a20;box-shadow:inset 0 2px 5px #0007,0 1px #b5c08d14;position:relative}
.casual-app .block-cell:not(.tone-0),.casual-app .mini-block{background-image:url('img/casual/play/tiles.webp')!important;background-size:343% 229%!important;background-repeat:no-repeat!important;border-color:#dec48b66;box-shadow:0 2px 3px #0007!important}
.casual-app .tone-1{background-position:3.5% 8%!important}.casual-app .tone-2{background-position:50% 8%!important}.casual-app .tone-3{background-position:96.5% 8%!important}.casual-app .tone-4{background-position:3.5% 92%!important}.casual-app .tone-5{background-position:50% 92%!important}
.casual-app .block-cell.ghost{opacity:.75;outline:1px solid #f5dda0;filter:brightness(1.3)}
.casual-app .block-tray{gap:10px;margin-top:19px;padding-bottom:5px}
.casual-app .piece-choice{min-height:92px;border:1px solid #a08d5c66;background:linear-gradient(#102a2066,#051c14aa);border-radius:12px;box-shadow:inset 0 2px 9px #0007;color:#a6b38f}
.casual-app .mini-block,.casual-app .mini-gap{width:18px;height:18px;border-radius:3px}.casual-app .mini-piece{grid-auto-rows:18px;gap:2px}
.casual-app .piece-choice .mini-piece{grid-template-columns:repeat(var(--piece-width),18px)!important}
.casual-app .game-tools>button[data-primary]{background:linear-gradient(115deg,#f1d99d,#bc9850);color:#242a1b;font-weight:700;border-color:#f5dfaa;box-shadow:inset 0 1px #fff4d5,0 4px 16px #0005}
/* Mines are a brass-inlaid instrument panel. */
.casual-app .mines-board{gap:3px;padding:14px}
.casual-app .mine-cell{position:relative;border:1px solid #bfa66b55;border-radius:5px;background-image:url('img/casual/play/tiles.webp');background-size:343% 229%;background-position:50% 8%;box-shadow:0 2px 0 #091c10,0 3px 4px #0008;color:#f2daa2;font-family:Georgia,serif}
.casual-app .mine-cell:not(.revealed):not(.flagged):after{content:'·';position:absolute;inset:0;display:grid;place-items:center;color:#c6b87580;font-size:22px}
.casual-app .mine-cell.revealed{background:#e7dbc0;border-color:#d8caaa;box-shadow:inset 0 1px 3px #695a3730;color:#205b66;text-shadow:0 1px #fff7}
.casual-app .mine-cell.revealed:empty{background:#102a2199;border-color:#a0a9791f;box-shadow:inset 0 1px 4px #0005}
.mine-mark{display:block;width:75%;height:75%;margin:auto;filter:drop-shadow(0 2px 2px #0009)}
/* Smooth, continuous snake on a finely ruled table, rather than separate squares. */
.casual-app .snake-grid{display:block;position:relative;padding:0;background:#071f17a6;border-radius:14px;border:1px solid #b69c5666;box-shadow:inset 0 3px 22px #000a;overflow:hidden;touch-action:none}
.snake-scene{display:block;width:100%;height:100%;pointer-events:none}
.casual-app .snake-caption,.casual-app .slide-caption{font:italic 13px Georgia,serif;color:#d5c699;line-height:1.5;margin-top:15px}
.casual-app .game-tools:has([data-dir]){gap:6px;grid-template-columns:repeat(3,60px)}
.casual-app .game-tools [data-dir]{font-size:25px;border-radius:12px;min-height:49px}
@keyframes gem-burst{to{opacity:0;scale:1.7;filter:brightness(3)}}
@keyframes gem-arrive{from{translate:0 -75%;opacity:0}to{translate:0 0;opacity:1}}
@keyframes premium-hint{to{box-shadow:0 0 18px #efd48988}}
@keyframes premium-found{from{scale:.92;filter:brightness(1.4)}to{scale:1}}
@media(min-width:1100px){
 .casual-app:has(#экран-игры:not([hidden])){max-width:1240px;padding-left:30px;padding-right:30px}
 .casual-app #экран-игры{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto auto auto auto 1fr auto;column-gap:28px;max-width:1160px;align-items:start}
 .casual-app #экран-игры .game-heading{grid-column:1/-1;grid-row:1;margin-bottom:24px;padding-bottom:18px}
 .casual-app #экран-игры .game-window{grid-column:1;grid-row:2/7}
 .casual-app #экран-игры .status{grid-column:2;grid-row:2;gap:15px;padding:18px 14px}
 .casual-app #экран-игры .status>div+div{padding-left:15px}.casual-app #экран-игры .status strong{font-size:23px}
 .casual-app #экран-игры #message{grid-column:2;grid-row:3;text-align:left;margin:0 0 14px;padding:0;min-height:45px}
 .casual-app #экран-игры .game-tools{grid-column:2;grid-row:4;display:grid;margin:0;grid-template-columns:1fr}
 .casual-app #экран-игры .game-tools:has([data-dir]){grid-template-columns:repeat(3,1fr)}
 .casual-app #экран-игры .bottom-actions{grid-column:2;grid-row:5;grid-template-columns:1fr;margin-top:18px}
 .casual-app #экран-игры #save-status{grid-column:2;grid-row:6;margin-top:14px}
 .casual-app .game-board.mahjong-board{max-width:min(680px,max(380px,calc((100dvh - var(--safe-top) - 260px)*.75)))}
 .casual-app .game-board.fifteen-board,.casual-app .game-board.snake-board,.casual-app .game-board.match-board{max-width:min(570px,max(380px,calc(100dvh - var(--safe-top) - 290px)))}
}
@media(max-width:599px){
 .casual-app:has(#экран-игры:not([hidden])){padding-left:9px;padding-right:9px}
 .casual-app:has(#экран-игры:not([hidden])) .topbar{margin-bottom:10px}
 .casual-app #экран-игры .game-heading{padding-bottom:12px;margin-bottom:12px}
 .casual-app .status{padding:9px 12px;margin-bottom:14px;gap:20px}.casual-app .status strong{font-size:24px}.casual-app .status>div+div{padding-left:20px}
 .casual-app .game-window{border-width:5px;border-radius:19px}.casual-app .game-scroll{border-radius:13px}
 .casual-app .game-board:not(.solitaire-board):not(.mines-board){padding:8px}
 .casual-app .mines-board{padding:7px;gap:2px;--cell:clamp(27px,8.6vw,40px)}.casual-app .mine-cell{font-size:18px}
 .casual-app .solitaire-board{--card-h:77px;--card-step:25px;min-height:385px;padding:13px 6px 24px}
 .casual-app .tableau{gap:3px}.casual-app .solitaire-top{margin-bottom:21px;gap:3px}.casual-app .foundations{gap:3px}
 .casual-app .playing-card,.casual-app .card-slot{border-radius:4px}.casual-app .playing-card.back-card:after{font-size:16px}
 .casual-app .solitaire-board.freecell{min-width:0}.casual-app .solitaire-board.spider{min-width:0;--card-h:60px;--card-step:23px}
 .casual-app .spider .card-stack-label{font-size:10px}.casual-app .freecell .card-stack-label{font-size:11px}
 .casual-app .spider .solitaire-top>.stock{width:40px}.casual-app .spider-complete{font-size:16px}
 .casual-app .game-tools>button{padding:10px 14px;min-height:44px}.casual-app .mah-tile{border-radius:5px}
 .casual-app .letter-grid{gap:3px}.casual-app .letter-cell{font-size:clamp(12px,3.7vw,20px)}
 .casual-app .match-summary{font-size:11px}.casual-app .gem{filter:none}
 .casual-app .piece-choice{min-height:88px}.casual-app .mini-block,.casual-app .mini-gap{width:15px;height:15px}.casual-app .mini-piece{grid-auto-rows:15px}.casual-app .piece-choice .mini-piece{grid-template-columns:repeat(var(--piece-width),15px)!important}
}
@media(prefers-reduced-motion:reduce){.casual-app *, .casual-app *:before,.casual-app *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:599px){.casual-app .solitaire-board.cards-large{min-width:550px;--card-h:84px;--card-step:28px}.casual-app .solitaire-board.cards-large .card-stack-label{font-size:14px}}

.casual-app #playfield[data-busy]{pointer-events:none}