/* Pocket Arcade 3D look: depth, tilt, bevels and lighting layered over each game's base styles. */
body { background: radial-gradient(1100px 520px at 50% -8%, #2a3466 0%, rgba(42,52,102,0) 62%), radial-gradient(700px 500px at 100% 100%, #2a1f47 0%, rgba(42,31,71,0) 60%), var(--bg); background-attachment: fixed; }

/* ---- shared controls ---- */
#app .btn { background: linear-gradient(#313b62, #232b49); border: 1px solid #3c4772; border-bottom-color: #151a2e; box-shadow: 0 4px 0 #11152a, 0 7px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14); text-shadow: 0 1px 0 rgba(0,0,0,.35); position: relative; top: 0; }
#app .btn.primary { background: linear-gradient(#ff9675, #f2643f); border-color: #ffb199; border-bottom-color: #a83a1c; box-shadow: 0 4px 0 #a83a1c, 0 7px 14px rgba(242,100,63,.35), inset 0 1px 0 rgba(255,255,255,.4); text-shadow: 0 1px 0 rgba(255,255,255,.25); }
#app .btn:active:not(:disabled) { top: 3px; box-shadow: 0 1px 0 #11152a, 0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1); }
#app .btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 #a83a1c, 0 2px 5px rgba(242,100,63,.3); }
#app .btn:disabled { box-shadow: 0 2px 0 #11152a; }
#app .seg { background: #141930; box-shadow: inset 0 2px 5px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.07); padding: 3px; gap: 3px; border-radius: 12px; }
#app .seg button { border-radius: 8px; background: transparent; border: 0; }
#app .seg button[aria-pressed="true"] { background: linear-gradient(#ff9675, #f2643f); box-shadow: 0 2px 0 #a83a1c, inset 0 1px 0 rgba(255,255,255,.4); }
#app .gamebar h1, #app .hero h1 { text-shadow: 0 2px 0 #0a0d1a, 0 6px 14px rgba(0,0,0,.45); }

/* ---- home cards ---- */
#app .grid { perspective: 1200px; }
#app .gcard { background: linear-gradient(160deg, #262f52, #181d33 70%); border: 1px solid #36406a; border-top: 5px solid var(--c); box-shadow: 0 6px 0 #0d1020, 0 14px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); transform-origin: 50% 100%; }
#app .gcard:hover { background: linear-gradient(160deg, #2e3962, #1c2240 70%); transform: translateY(-5px) rotateX(7deg); box-shadow: 0 11px 0 #0d1020, 0 24px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
#app .glyph { text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.3), 0 3px 0 rgba(0,0,0,.25), 0 6px 10px rgba(0,0,0,.5); }

/* ---- tilted boards ---- */
#app .ttt-grid, #app .g-board, #app .ck-board, #app .ch-board, #app .ms-grid, #app .bs-grid, #app .sn-canvas, #app .sh-cv, #app .mj-board { transform-origin: 50% 100%; }

/* noughts & crosses */
#app .ttt-grid { transform: perspective(900px) rotateX(20deg); background: #10142a; padding: 10px; border-radius: 20px; box-shadow: 0 12px 0 #080a16, 0 26px 30px rgba(0,0,0,.5); width: min(100%, 380px); }
#app .ttt-cell { background: linear-gradient(#2c3560, #1c2240); border: 0; box-shadow: 0 5px 0 #0f1328, inset 0 1px 0 rgba(255,255,255,.14); }
#app .ttt-cell:hover:not(:disabled) { background: linear-gradient(#374276, #222a4e); }
#app .ttt-cell.X { text-shadow: 0 1px 0 #d95f3e, 0 2px 0 #c2502f, 0 3px 0 #a84224, 0 4px 0 #8f361b, 0 8px 10px rgba(0,0,0,.55); }
#app .ttt-cell.O { text-shadow: 0 1px 0 #55a8dc, 0 2px 0 #4590c0, 0 3px 0 #3878a3, 0 4px 0 #2c6288, 0 8px 10px rgba(0,0,0,.55); }
#app .ttt-cell.win { background: linear-gradient(#4a4a2a, #2f2f1c); box-shadow: 0 5px 0 #1c1c0e, 0 0 18px rgba(255,207,92,.5), inset 0 0 0 2px var(--gold); }

/* 2048 */
#app .g-board { transform: perspective(900px) rotateX(16deg); background: linear-gradient(#333d66, #232a49); box-shadow: 0 12px 0 #12162b, 0 26px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
#app .g-tile:not([class*=" t"]):not(.big) { background: #1c223d; box-shadow: inset 0 3px 6px rgba(0,0,0,.5); }
#app .g-tile[class*=" t"], #app .g-tile.big { box-shadow: inset 0 -6px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.45), 0 4px 5px rgba(0,0,0,.4); text-shadow: 0 1px 0 rgba(255,255,255,.35); background-image: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0) 55%); }

/* checkers */
#app .ck-board { transform: perspective(1000px) rotateX(24deg); border: 10px solid #5b381f; border-radius: 10px; box-shadow: 0 0 0 2px #7a5030, 0 16px 0 #3a2313, 0 32px 34px rgba(0,0,0,.55); }
#app .ck-sq { background: linear-gradient(135deg, #f0dfbd, #dcc497); }
#app .ck-sq.dark { background: linear-gradient(135deg, #86542f, #6a4024); box-shadow: inset 0 0 8px rgba(0,0,0,.35); }
#app .ck-sq.last { box-shadow: inset 0 0 0 3px rgba(255,207,92,.8); }
#app .ck-sq.sel { box-shadow: inset 0 0 0 4px var(--gold); }
#app .ck-pc { width: 74%; height: 70%; transform: translateY(-9%); border: 0; }
#app .ck-pc.w { background: radial-gradient(circle at 50% 42%, #fffdf6 0 34%, #e9e1cf 35% 46%, #fffaf0 47% 100%); box-shadow: 0 5px 0 #b9ae95, 0 6px 0 #9e9379, 0 10px 7px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,255,255,.9); }
#app .ck-pc.b { background: radial-gradient(circle at 50% 42%, #4a4a55 0 34%, #2a2a31 35% 46%, #3d3d47 47% 100%); box-shadow: 0 5px 0 #17171c, 0 6px 0 #0a0a0d, 0 10px 7px rgba(0,0,0,.55), inset 0 2px 2px rgba(255,255,255,.22); }
#app .ck-pc.w:not(:empty) { box-shadow: 0 5px 0 #b9ae95, 0 6px 0 #6e6551, 0 11px 0 #b9ae95, 0 12px 0 #9e9379, 0 16px 8px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,255,255,.9); transform: translateY(-20%); }
#app .ck-pc.b:not(:empty) { box-shadow: 0 5px 0 #17171c, 0 6px 0 #55555f, 0 11px 0 #17171c, 0 12px 0 #0a0a0d, 0 16px 8px rgba(0,0,0,.55), inset 0 2px 2px rgba(255,255,255,.22); transform: translateY(-20%); }
#app .ck-pc.can { outline: 0; filter: drop-shadow(0 0 5px rgba(255,207,92,.95)); }

/* chess: tilted board with pieces standing upright on it */
#app .ch-board { transform: perspective(1000px) rotateX(30deg); transform-style: preserve-3d; overflow: visible; border: 10px solid #5b381f; border-radius: 6px; box-shadow: 0 0 0 2px #7a5030, 0 16px 0 #3a2313, 0 32px 34px rgba(0,0,0,.55); margin-top: 26px; }
#app .ch-sq { overflow: visible; transform-style: preserve-3d; background: linear-gradient(135deg, #f0dfbd, #dcc497); }
#app .ch-sq.dark { background: linear-gradient(135deg, #b0835c, #946a45); }
#app .ch-sq:has(.ch-pc)::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 5%; height: 26%; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.5), rgba(0,0,0,0) 70%); }
#app .ch-pc { position: absolute; left: 4%; bottom: 10%; width: 92%; height: 118%; transform-origin: 50% 100%; transform: rotateX(-30deg); }
#app .ch-svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
#app .ch-svg.w { fill: #fffaf0; stroke: #2a1f17; }
#app .ch-svg.b { fill: #33313d; stroke: #08070a; filter: drop-shadow(0 0 1px rgba(255,255,255,.8)); }
#app .ch-promo .ch-pc, #app .ch-promo svg { position: static; transform: none; }

/* connect four */
#app .c4-board { background: linear-gradient(160deg, #3c63e6, #2140b0 70%); box-shadow: 0 10px 0 #152a7a, 0 14px 0 #0d1c57, 0 28px 30px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.25); border-radius: 18px; }
#app .c4-cell { background: #0c1022; box-shadow: inset 0 5px 7px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.22); }
#app .c4-cell.p1 { background: radial-gradient(circle at 35% 30%, #ff9aa3, #ff5d6c 45%, #c22f3f 100%); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), inset 0 0 0 4px rgba(255,255,255,.14), 0 1px 0 rgba(255,255,255,.22); }
#app .c4-cell.p2 { background: radial-gradient(circle at 35% 30%, #fff0a8, #ffd447 45%, #c99a12 100%); box-shadow: inset 0 -4px 0 rgba(0,0,0,.22), inset 0 0 0 4px rgba(255,255,255,.2), 0 1px 0 rgba(255,255,255,.22); }
#app .c4-cell.win { outline: 4px solid #fff; outline-offset: -4px; filter: drop-shadow(0 0 8px #fff); }

/* card tables */
#app .bj-table, #app .pk-table, #app .hd-table, #app .dm-table { border: 8px solid #4d2f19; box-shadow: 0 0 0 2px #7a5030, inset 0 0 46px rgba(0,0,0,.55), inset 0 3px 10px rgba(0,0,0,.6), 0 9px 0 #2b190c, 0 22px 28px rgba(0,0,0,.5); border-radius: 26px; }
#app .bj-table { background: radial-gradient(ellipse at 50% 20%, #27835f, #0f4131 75%); }
#app .pk-table { background: radial-gradient(ellipse at 50% 20%, #86304a, #40142a 75%); }
#app .hd-table { background: radial-gradient(ellipse at 50% 40%, #218a61, #0c4431 80%); }
#app .dm-table { background: radial-gradient(ellipse at 50% 20%, #2c709a, #123149 75%); }
#app .pc, #app .hd-c { background: linear-gradient(160deg, #ffffff 55%, #e4e6ee); box-shadow: 0 1px 0 #c9ccd8, 0 2px 0 #b4b8c6, 0 3px 0 #9ea3b3, 0 9px 10px rgba(0,0,0,.45); border: 0; }
#app .pc.back, #app .hd-c.back { background: repeating-linear-gradient(45deg, #3f5bc8 0 6px, #2b4298 6px 12px); border: 3px solid #fff; }
#app .cards .pc:nth-child(odd), #app .pk-cards .pc:nth-child(odd) { transform: rotate(-2deg); }
#app .cards .pc:nth-child(even), #app .pk-cards .pc:nth-child(even) { transform: rotate(1.6deg) translateY(-2px); }
#app button.pc:hover { transform: translateY(-5px); }
#app button.pc.out { transform: translateY(-14px) rotate(-3deg); box-shadow: 0 0 0 3px var(--gold), 0 14px 12px rgba(0,0,0,.45); opacity: .85; }
#app .hd-c.slot { background: rgba(0,0,0,.18); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); border: 1px dashed rgba(255,255,255,.2); }
#app .hd-c.win { outline: 3px solid var(--gold); }
#app .hd-opp, #app .hd-me { background: linear-gradient(160deg, #262f52, #181d33); box-shadow: 0 5px 0 #0d1020, 0 10px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
#app .hd-opp.turn, #app .hd-me.turn { box-shadow: 0 5px 0 #6b5310, 0 0 18px rgba(255,207,92,.35), inset 0 1px 0 rgba(255,255,255,.08); }
#app .chips, #app .pk-chips, #app .hd-pot { text-shadow: 0 1px 0 #a87c12, 0 2px 0 #7a5a0c, 0 5px 8px rgba(0,0,0,.5); }

/* dominoes */
#app .dm { background: linear-gradient(160deg, #fffdf5, #e9e3d2); border: 0; box-shadow: 0 2px 0 #cfc7b1, 0 4px 0 #a8a08a, 0 8px 8px rgba(0,0,0,.45), inset 0 1px 0 #fff; }
#app .dm.back { background: repeating-linear-gradient(45deg, #3f5bc8 0 5px, #2b4298 5px 10px); border: 2px solid #fff; box-shadow: 0 3px 0 #1c2c66, 0 7px 7px rgba(0,0,0,.45); }
#app .dm-half i.on { background: radial-gradient(circle at 40% 35%, #454d70, #10142a 70%); box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.8); }
#app button.dm.ok { outline: 0; box-shadow: 0 2px 0 #cfc7b1, 0 4px 0 #a8a08a, 0 0 0 3px var(--gold), 0 0 16px rgba(255,207,92,.6); }
#app button.dm.picked { transform: translateY(-10px) rotate(-3deg); }

/* memory */
#app .mem-grid { perspective: 900px; }
#app .mem-card { border: 0; background: linear-gradient(145deg, #4558b0, #2a3472); box-shadow: 0 5px 0 #171d42, 0 9px 9px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 5px rgba(255,255,255,.07); }
#app .mem-card:hover:not(:disabled) { transform: translateY(-3px); }
#app .mem-card.up { background: linear-gradient(160deg, #ffffff, #dfe3f2); color: #1a2142; box-shadow: 0 5px 0 #9aa1bd, 0 9px 9px rgba(0,0,0,.4); }
#app .mem-card.done { background: linear-gradient(160deg, #c9f7e3, #7fe0b6); color: #0c5a3c; box-shadow: 0 5px 0 #2f9e6f, 0 9px 9px rgba(0,0,0,.4); }

/* reaction test: one big arcade button */
#app .rx-pad { border-radius: 26px; box-shadow: 0 14px 0 rgba(0,0,0,.45), 0 30px 34px rgba(0,0,0,.5), inset 0 3px 0 rgba(255,255,255,.35), inset 0 -10px 22px rgba(0,0,0,.28); text-shadow: 0 2px 0 rgba(0,0,0,.3); position: relative; top: 0; margin-bottom: 22px; }
#app .rx-pad:active { top: 9px; box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 10px 14px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.3), inset 0 -10px 22px rgba(0,0,0,.28); }
#app .rx-idle { background: radial-gradient(circle at 50% 25%, #5468c4, #2c3777); }
#app .rx-wait { background: radial-gradient(circle at 50% 25%, #ef5f4e, #a62a1d); }
#app .rx-go { background: radial-gradient(circle at 50% 25%, #47dba0, #12845a); }
#app .rx-early { background: radial-gradient(circle at 50% 25%, #dd8440, #8f4312); }
#app .rx-list span { box-shadow: 0 3px 0 #0d1020, inset 0 1px 0 rgba(255,255,255,.08); }

/* sudoku */
#app .sd-grid { border: 0; outline: 3px solid #e9ecf8; box-shadow: 0 0 0 9px #2a3358, 0 10px 0 9px #151a30, 0 30px 30px rgba(0,0,0,.5); margin: 10px 0 18px; }
#app .sd-cell { background: linear-gradient(#222a48, #1a2038); }
#app .sd-cell.peer { background: linear-gradient(#2a3356, #222a48); }
#app .sd-cell.same { background: linear-gradient(#3a4a8c, #2f3d76); }
#app .sd-cell.sel { background: linear-gradient(#4f63b6, #3d4f98); box-shadow: inset 0 2px 5px rgba(0,0,0,.45); }
#app .sd-cell.wrong { background: linear-gradient(#5a2a3a, #45202c); }
#app .sd-cell.given { text-shadow: 0 2px 0 rgba(0,0,0,.45); }
#app .sd-cell.bR { box-shadow: inset -2px 0 0 #e9ecf8; } #app .sd-cell.bB { box-shadow: inset 0 -2px 0 #e9ecf8; } #app .sd-cell.bR.bB { box-shadow: inset -2px -2px 0 #e9ecf8; }

/* minesweeper: classic raised bevels */
#app .ms-grid { transform: perspective(1000px) rotateX(12deg); background: #10142a; padding: 6px; border-radius: 12px; box-shadow: 0 10px 0 #080a16, 0 24px 26px rgba(0,0,0,.5); }
#app .ms-c { border-radius: 4px; background: linear-gradient(145deg, #5163b8, #35428a); box-shadow: inset 2px 2px 0 rgba(255,255,255,.3), inset -2px -3px 0 rgba(0,0,0,.4); }
#app .ms-c:hover:not(.open) { background: linear-gradient(145deg, #6074cc, #4050a0); }
#app .ms-c.open { background: #161b30; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); text-shadow: 0 1px 0 rgba(0,0,0,.6); }
#app .ms-c.mine { background: radial-gradient(#ff8f9a, #d83a4a); box-shadow: inset 0 2px 4px rgba(0,0,0,.4), 0 0 12px rgba(255,107,122,.7); }
#app .ms-c.wrong { background: #6b3340; }

/* word guess */
#app .wg-grid { perspective: 800px; }
#app .wg-t { background: #151a30; box-shadow: inset 0 2px 5px rgba(0,0,0,.5); border-color: #2a335a; }
#app .wg-t.f { background: linear-gradient(#333d68, #252d50); border-color: #6a78b8; box-shadow: 0 3px 0 #131830; }
#app .wg-t.g0 { background: linear-gradient(#39426b, #272e50); border-color: transparent; box-shadow: 0 4px 0 #141933, inset 0 1px 0 rgba(255,255,255,.12); }
#app .wg-t.g1 { background: linear-gradient(#e0b233, #b8901f); border-color: transparent; box-shadow: 0 4px 0 #7a5e10, inset 0 1px 0 rgba(255,255,255,.4); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
#app .wg-t.g2 { background: linear-gradient(#45c58d, #2f9e6f); border-color: transparent; box-shadow: 0 4px 0 #1c6a48, inset 0 1px 0 rgba(255,255,255,.4); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
#app .wg-k { background: linear-gradient(#4a58a6, #34407a); box-shadow: 0 4px 0 #1a2146, 0 6px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25); position: relative; top: 0; }
#app .wg-k:active { top: 3px; box-shadow: 0 1px 0 #1a2146; }
#app .wg-k.g0 { background: linear-gradient(#20263f, #171c30); box-shadow: 0 2px 0 #0b0e1c; }
#app .wg-k.g1 { background: linear-gradient(#e0b233, #b8901f); box-shadow: 0 4px 0 #7a5e10, inset 0 1px 0 rgba(255,255,255,.35); }
#app .wg-k.g2 { background: linear-gradient(#45c58d, #2f9e6f); box-shadow: 0 4px 0 #1c6a48, inset 0 1px 0 rgba(255,255,255,.35); }

/* mahjong */
#app .mj-board { transform: perspective(1100px) rotateX(14deg); }
#app .mj-tile { background: linear-gradient(155deg, #fffef8, #ece4cc); border: 1px solid #c9bf9d; box-shadow: 1px 2px 0 #e4dcc0, 2px 4px 0 #b5aa84, 3px 6px 0 #8f8460, 5px 10px 8px rgba(0,0,0,.5), inset 0 1px 0 #fff; }
#app .mj-tile.blocked { background: linear-gradient(155deg, #d2d3cb, #b3b4ab); }
#app .mj-tile.sel { background: linear-gradient(155deg, #fff0b5, #ffcf5c); }

/* battleship */
#app .bs-grid { transform: perspective(1000px) rotateX(16deg); background: linear-gradient(#0d1c40, #081330); border: 0; box-shadow: 0 0 0 3px #2d4f92, 0 12px 0 3px #0a1838, 0 28px 28px rgba(0,0,0,.5); margin-bottom: 14px; }
#app .bs-c { background: linear-gradient(160deg, #2a6cc4, #174a92); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.25); }
#app .bs-c:hover:not(:disabled) { background: linear-gradient(160deg, #3b82de, #1f5cae); }
#app .bs-c.ship { background: linear-gradient(#c3cbdb, #7f8aa3); box-shadow: 0 3px 0 #4f5870, inset 0 1px 0 #fff, inset 0 -3px 0 rgba(0,0,0,.2); transform: translateY(-2px); }
#app .bs-c.reveal { background: linear-gradient(#c3cbdb, #7f8aa3); }
#app .bs-c.hit { background: radial-gradient(#ffb36b, #e5484d 60%); box-shadow: 0 0 12px rgba(255,120,80,.8), inset 0 1px 0 rgba(255,255,255,.3); }
#app .bs-c.sunk { background: linear-gradient(#a12a32, #6d151c); box-shadow: inset 0 2px 4px rgba(0,0,0,.6); transform: none; }
#app .bs-c.miss { box-shadow: inset 0 0 0 3px rgba(217,230,255,.18), inset 0 1px 0 rgba(255,255,255,.22); }
#app .bs-ship { box-shadow: 0 2px 0 #0d1020, inset 0 1px 0 rgba(255,255,255,.1); }
#app .bs-pick button { box-shadow: 0 3px 0 #0d1020, inset 0 1px 0 rgba(255,255,255,.1); }

/* canvases */
#app .sn-canvas { transform: perspective(900px) rotateX(18deg); border: 0; box-shadow: 0 0 0 4px #1f4a3c, 0 14px 0 4px #0b1f19, 0 30px 30px rgba(0,0,0,.5); margin: 4px 0 20px; }
#app .sh-cv { transform: perspective(900px) rotateX(14deg); border: 0; box-shadow: 0 0 0 3px #3a4a86, 0 0 34px rgba(90,120,255,.3), 0 26px 30px rgba(0,0,0,.5); }
#app .tt-canvas { border: 0; box-shadow: inset 0 0 0 2px #2f3858, 0 0 0 6px #232b49, 0 8px 0 6px #11152a, 0 22px 26px rgba(0,0,0,.5); }
#app .cr-canvas { border: 0; box-shadow: 0 0 0 3px #2f3858, 0 10px 0 3px #0d1020, 0 26px 30px rgba(0,0,0,.5); margin-bottom: 12px; }
#app .tt-side .val, #app .g-score, #app .cr-score, #app .sn-score { text-shadow: 0 2px 0 rgba(0,0,0,.45); }

@media (prefers-reduced-motion: no-preference) {
  #app .btn, #app .wg-k, #app .rx-pad { transition: top .05s, box-shadow .05s; }
  #app .gcard { transition: transform .16s, box-shadow .16s, background .16s; }
  #app .mem-card { transition: transform .12s; }
  #app .mem-card.up, #app .mem-card.done { animation: pa-flip .28s ease-out; }
  #app .wg-t.g0, #app .wg-t.g1, #app .wg-t.g2 { animation: pa-flipx .4s ease-out backwards; }
  #app .wg-row .wg-t:nth-child(2) { animation-delay: .08s; } #app .wg-row .wg-t:nth-child(3) { animation-delay: .16s; } #app .wg-row .wg-t:nth-child(4) { animation-delay: .24s; } #app .wg-row .wg-t:nth-child(5) { animation-delay: .32s; }
  #app button.pc, #app button.dm { transition: transform .1s; }
}
@keyframes pa-flip { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
@keyframes pa-flipx { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@media (max-width: 359px) { #app .seg button { padding: 7px 8px; font-size: 14px; } }
#app .ttt-grid, #app .g-board, #app .ms-grid, #app .sn-canvas { margin-top: -3%; }
#app .ck-board { margin-top: -4%; }

/* Word Guess: wider keys on small phones (use the page's side padding and tighter gaps) */
@media (max-width: 420px) {
  #app .wg-kb { width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; gap: 7px; }
  #app .wg-kr { gap: 3px; }
  #app .wg-k { min-width: 0; padding: 15px 0; }
  #app .wg-k.wide { flex: 1.5; max-width: 60px; }
}