/* Freelancer games — tokens aligned to Stacked cream table (VISUAL-STANDARD) */
:root{
  --fl-ink: var(--s-ink, var(--ink, #2a241c));
  --fl-cream: var(--s-bg, var(--cream, #f4ead8));
  --fl-gold: var(--s-accent, var(--gold, #c9a24a));
  --fl-paper: var(--s-surface, #fff8ec);
  --fl-paper-2: var(--s-bg-2, #ebe0cc);
  --fl-muted: var(--s-mute, #8a7f70);
  --fl-line: var(--s-line, rgba(42,36,28,.12));
  --fl-shadow: var(--s-shadow, 0 8px 24px rgba(42,36,28,.14));
  --fl-shadow-deep: var(--s-shadow-lift, 0 14px 32px rgba(42,36,28,.22));
  --fl-radius: var(--s-r-lg, 16px);
  --fl-radius-sm: var(--s-r, 12px);
  --fl-space: var(--s-space, 8px);
  --fl-ease: var(--s-ease, cubic-bezier(.2,.8,.2,1));
  --fl-spring: var(--s-spring, cubic-bezier(.34,1.4,.64,1));
  --fl-tile-1: #c45b4a;
  --fl-tile-2: #d4a84b;
  --fl-tile-3: #4f8fc9;
  --fl-tile-4: #5a9a62;
  --fl-tile-5: #8b6fad;
  --fl-snake-bg: #1a2418;
  --fl-snake-cell: #243022;
  --fl-snake-body: #8fd18a;
  --fl-snake-head: #b7e0a8;
  --fl-snake-food: var(--fl-gold);
  --fl-2048-0: #cdc1b4;
  --fl-2048-2: #eee4da;
  --fl-2048-4: #ede0c8;
  --fl-2048-8: #f2b179;
  --fl-2048-16: #f59563;
  --fl-2048-32: #f67c5f;
  --fl-2048-64: #f65e3b;
  --fl-2048-128: #edcf72;
  --fl-2048-256: #edcc61;
  --fl-2048-512: #edc850;
  --fl-2048-1024: #edc53f;
  --fl-2048-2048: #edc22e;
  --fl-mine: #e8dcc8;
  --fl-mine-open: #fffdf8;
  --fl-err: #f5d0c8;
  --fl-err-ink: #8b3a34;
}
body.dark{
  --fl-paper: #2a241c;
  --fl-paper-2: #3a3228;
  --fl-cream: #1a1612;
  --fl-ink: #f3ece3;
  --fl-muted: #b0a090;
  --fl-line: rgba(255,255,255,.1);
  --fl-mine: #3a3228;
  --fl-mine-open: #2a241c;
  --fl-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.fl-num, .fl-meta b, .g2048-score b, .sn-hud b, .m3-hud b, .scell, .kk-cell, .c2048, .mcell{
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.fl-meta{
  display:flex; flex-wrap:wrap; gap:var(--fl-space); justify-content:center; align-items:center;
  margin-bottom:calc(var(--fl-space)*1.5);
  font-family:"Source Sans 3",system-ui,sans-serif; font-size:12px; color:var(--fl-muted);
}
.fl-meta b{
  background:rgba(255,255,255,.72); color:var(--fl-ink); padding:6px 12px; border-radius:999px;
  box-shadow: 0 2px 0 rgba(80,55,25,.06);
}
body.dark .fl-meta b{ background:rgba(255,255,255,.12); color:#f3ece3; }
body.dark .fl-ico{ background:rgba(255,255,255,.12); color:#f3ece3; }
body.dark #playTitle{ color:#f3ece3; }
body.dark .status{ color:#cbb89a; }
body.dark .m3-hud, body.dark .sn-hud, body.dark .g2048-score{ color:#cbb89a; }
.fl-ico{
  width:44px; height:44px; min-width:44px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.72); color:var(--fl-ink); font-size:16px;
  transition: transform .12s var(--fl-ease), background .12s;
}
.fl-ico.off{ opacity:.45; }
.fl-ico:hover{ transform:scale(1.04); }
.fl-ico:active, .fl-press{ transform:scale(.97) !important; }
.fl-ico:focus-visible, .tool:focus-visible, .pad b:focus-visible, .scell:focus-visible, .kk-cell:focus-visible, .m3-cell:focus-visible, .mcell:focus-visible{
  outline:2px solid var(--fl-gold); outline-offset:2px;
}

/* Cells shared */
.scell, .kk-cell{
  transition: transform .14s var(--fl-ease), background .18s var(--fl-ease), box-shadow .18s var(--fl-ease);
  will-change: transform;
}
.scell.fl-pop, .kk-cell.fl-pop, .c2048.fl-pop, .m3-cell.fl-pop{
  animation: flPop .38s var(--fl-spring);
}
.scell.fl-shake, .kk-cell.fl-shake, .m3-cell.fl-shake{
  animation: flShake .38s var(--fl-ease);
}
.scell.fl-glow, .kk-cell.fl-glow{
  box-shadow: 0 0 0 2px var(--fl-gold), var(--fl-shadow);
}
@keyframes flPop{ 0%{transform:scale(.86);opacity:.5} 70%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
@keyframes flShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
@keyframes flReveal{ from{opacity:0; transform:translateY(6px) scale(.98)} to{opacity:1; transform:none} }
@keyframes flWinCascade{ from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)} }

.fl-notes{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%;font-size:8px;line-height:1;color:var(--fl-muted);pointer-events:none;padding:2px}
.fl-notes i{display:grid;place-items:center;opacity:.9}
.scell.peer{background:var(--fl-paper-2)}
.scell.same{background:#ffe8a8}
body.dark .scell.same{background:#5a4a28}
.scell.err{background:var(--fl-err);color:var(--fl-err-ink)}
.scell.g{font-weight:700;color:var(--fl-ink)}
.scell.on{ box-shadow: inset 0 0 0 2px var(--fl-gold); }
.sboard .scell{ animation: flReveal .35s var(--fl-ease) both; }
.sboard .scell:nth-child(9n+1){ animation-delay:0ms }
.sboard .scell:nth-child(9n+5){ animation-delay:20ms }
.tool.on{background:var(--fl-gold);color:var(--fl-ink);font-weight:700}
.tool, .pad b, .sn-pad button{
  transition: transform .12s var(--fl-ease), box-shadow .12s;
  min-height:44px;
}
.tool:hover, .pad b:hover{ transform:scale(1.03); }
.tool:active, .pad b:active, .sn-pad button:active{ transform:scale(.97); }

/* KenKen */
.kk-board{
  display:grid; gap:0; background:#cbb89a; border-radius:var(--fl-radius); padding:4px;
  width:100%; aspect-ratio:1; max-width:420px; margin:0 auto;
  box-shadow: var(--fl-shadow);
}
body.dark .kk-board{ background:#1a1612; }
.kk-cell{
  background:var(--fl-paper); border:1px solid var(--fl-line); position:relative;
  display:grid; place-items:center; font-size:clamp(16px,5vw,24px); font-weight:600;
  cursor:pointer; min-height:0; min-width:0;
}
.kk-cell.on{ background:#ffe8a8; }
body.dark .kk-cell.on{ background:#5a4a28; }
.kk-cell.err{ background:var(--fl-err); color:var(--fl-err-ink); }
.kk-cage{ position:absolute; inset:0; pointer-events:none; border:2.5px solid transparent; border-radius:2px; }
.kk-label{
  position:absolute; top:3px; left:4px; font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:clamp(10px,2.6vw,13px); font-weight:700; color:var(--fl-ink); line-height:1; z-index:1; opacity:.85;
}
.kk-board{ max-width:min(100%,440px); }

/* Snake — canvas host */
.sn-wrap{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.sn-board-wrap{
  width:min(100%,400px); border-radius:var(--fl-radius); overflow:hidden;
  background:var(--fl-snake-bg); padding:10px; box-shadow: var(--fl-shadow-deep);
}
.sn-board-wrap canvas{ display:block; width:100%; height:auto; border-radius:10px; }
.sn-hud{ display:flex; gap:16px; font-family:"Source Sans 3",system-ui,sans-serif; font-size:14px; color:var(--fl-muted); }
.sn-pad{ display:grid; grid-template-columns:repeat(3,64px); gap:8px; justify-content:center; }
.sn-pad button{
  height:52px; min-height:52px; border:0; border-radius:var(--fl-radius-sm);
  background:linear-gradient(180deg,#fffdf8,#f0e4d0); font-size:20px; cursor:pointer; color:var(--fl-ink);
  box-shadow: 0 4px 0 #c9b896, 0 6px 12px rgba(80,55,25,.12);
}
body.dark .sn-pad button{ background:rgba(255,255,255,.1); }
/* Snake fills the screen: the board grows to the screen height, and on wide screens the arrow pad stands beside it. */
.sn-board-wrap{ width:min(100%, max(400px, calc(100dvh - 520px))); }
@media (min-width:700px) and (min-aspect-ratio:5/4){
  #stage .sn-wrap{ display:grid; grid-template-columns:auto auto; grid-template-areas:"hud hud" "board pad"; justify-content:center; align-items:center; column-gap:28px; }
  #stage .sn-hud{ grid-area:hud; justify-self:center; }
  #stage .sn-board-wrap{ grid-area:board; width:min(calc(100vw - 340px), calc(100dvh - 262px)); }
  #stage .sn-pad{ grid-area:pad; }
}

/* Match-3 */
.m3-board{
  display:grid; gap:6px; width:min(100%, max(400px, calc(100dvh - 400px))); margin:0 auto; touch-action:none;
  padding:10px; background:rgba(160,130,90,.28); border-radius:var(--fl-radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--fl-shadow);
}
.m3-cell{
  aspect-ratio:1; border:0; border-radius:14px; cursor:pointer; min-height:40px;
  position:relative;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px rgba(0,0,0,.18), 0 4px 8px rgba(80,55,25,.16);
  transition: transform .16s var(--fl-spring), opacity .2s var(--fl-ease), box-shadow .16s;
  will-change: transform, opacity;
}
.m3-cell::after{
  content:""; position:absolute; inset:18% 22% auto; height:28%; border-radius:999px;
  background:rgba(255,255,255,.35); pointer-events:none;
}
.m3-cell[data-c="0"]{ background:var(--fl-tile-1); }
.m3-cell[data-c="1"]{ background:var(--fl-tile-2); }
.m3-cell[data-c="2"]{ background:var(--fl-tile-3); }
.m3-cell[data-c="3"]{ background:var(--fl-tile-4); }
.m3-cell[data-c="4"]{ background:var(--fl-tile-5); }
.m3-cell.sel{ transform:scale(1.06); box-shadow: 0 0 0 3px var(--fl-gold), var(--fl-shadow-deep); z-index:2; }
.m3-cell.fl-clear{ transform:scale(.4); opacity:0; }
.m3-cell.fl-drop{ animation: flPop .32s var(--fl-spring); }
.m3-hud{
  display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap;
  font-family:"Source Sans 3",system-ui,sans-serif; font-size:14px; margin-bottom:8px; color:var(--fl-muted);
}

/* Mines */
.mine{
  display:grid; gap:4px; width:100%; max-width:100%; margin:0 auto; padding:8px; box-sizing:border-box;
  background:rgba(160,130,90,.28); border-radius:var(--fl-radius); box-shadow: var(--fl-shadow);
}
#flMineHost{ width:100%; max-width:min(100%,420px); margin:0 auto; overflow:hidden; }
.mine.flagmode .mcell{ cursor:crosshair; }
.mcell{
  aspect-ratio:1; min-width:0; min-height:0; background:linear-gradient(180deg,#f0e4d0,#dcc9a8); border:0; border-radius:8px; cursor:pointer;
  font-weight:700; font-size:clamp(12px,3.4vw,16px); color:var(--fl-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 0 #b89a6e, 0 4px 8px rgba(80,55,25,.12);
  transition: transform .12s var(--fl-ease), background .15s;
}
.mcell:hover{ transform:scale(1.04); }
.mcell:active{ transform:scale(.96); }
.mcell.open{
  background:var(--fl-mine-open); box-shadow:none;
  animation: flReveal .28s var(--fl-ease) both;
}
.mcell.flag{ color:var(--fl-err-ink); font-size:15px; }
.mcell.boom{ background:var(--fl-err-ink); color:#fff; animation: flShake .4s var(--fl-ease); }
.mcell.n1{ color:#3b6ea5; } .mcell.n2{ color:#3d7a3a; } .mcell.n3{ color:#a33; }
.mcell.n4{ color:#2a241c; } .mcell.n5{ color:#8b3a34; }

/* 2048 */
.g2048-score{ display:flex; gap:12px; justify-content:center; margin-bottom:8px; font-family:"Source Sans 3",system-ui,sans-serif; font-size:13px; }
.g2048-score b{ background:rgba(255,255,255,.7); padding:6px 12px; border-radius:999px; color:var(--fl-ink); }
body.dark .g2048-score b{ background:rgba(255,255,255,.08); }
.g2048{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:min(100%,420px); margin:0 auto;
  background:#bbada0; padding:12px; border-radius:var(--fl-radius); box-shadow: var(--fl-shadow-deep);
}
body.dark .g2048{ background:#3a3228; }
.c2048{
  aspect-ratio:1; border-radius:12px; display:grid; place-items:center;
  font-weight:700; font-size:clamp(18px,5vw,28px); background:var(--fl-2048-0); color:#776e65;
  transition: transform .18s var(--fl-spring); will-change: transform;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 0 rgba(0,0,0,.14);
}
.c2048[data-v="2"]{ background:var(--fl-2048-2); }
.c2048[data-v="4"]{ background:var(--fl-2048-4); }
.c2048[data-v="8"]{ background:var(--fl-2048-8); color:#fff; }
.c2048[data-v="16"]{ background:var(--fl-2048-16); color:#fff; }
.c2048[data-v="32"]{ background:var(--fl-2048-32); color:#fff; }
.c2048[data-v="64"]{ background:var(--fl-2048-64); color:#fff; }
.c2048[data-v="128"]{ background:var(--fl-2048-128); color:#fff; font-size:clamp(16px,4vw,22px); }
.c2048[data-v="256"]{ background:var(--fl-2048-256); color:#fff; font-size:clamp(16px,4vw,22px); }
.c2048[data-v="512"]{ background:var(--fl-2048-512); color:#fff; font-size:clamp(16px,4vw,22px); }
.c2048[data-v="1024"]{ background:var(--fl-2048-1024); color:#fff; font-size:clamp(14px,3.5vw,18px); }
.c2048[data-v="2048"]{ background:var(--fl-2048-2048); color:#fff; font-size:clamp(14px,3.5vw,18px); }

/* Win / fail overlays */
.fl-celebrate, .fl-fail{
  position:fixed; inset:0; z-index:110; display:grid; place-items:center;
  background:rgba(28,20,12,.5); overflow:auto; overscroll-behavior:contain;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  animation: flReveal .35s var(--fl-ease);
}
.fl-celebrate.reduce, .fl-fail.reduce{ animation:none; }
.fl-card{
  width:min(340px,100%); background:var(--fl-paper); color:var(--fl-ink);
  border-radius:22px; padding:24px 20px; text-align:center;
  box-shadow: var(--fl-shadow-deep); border:1px solid rgba(255,255,255,.65);
  position:relative; overflow:hidden; max-height:calc(100dvh - 32px); overflow-y:auto;
}
.fl-card.soft{ background:linear-gradient(#fffdf8,#f4ead6); }
body.dark .fl-card.soft{ background:linear-gradient(#2a241c,#1a1612); }
.fl-card h3{ font-family:Fraunces,Georgia,serif; font-size:28px; font-weight:600; margin-bottom:8px; }
.fl-sum{ font-family:"Source Sans 3",system-ui,sans-serif; font-size:14px; color:var(--fl-muted); margin-bottom:14px; line-height:1.45; }
.fl-stats{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; font-family:"Source Sans 3",system-ui,sans-serif; font-size:12px; color:var(--fl-muted); }
.fl-stats span{ background:rgba(201,164,90,.15); padding:8px 10px; border-radius:12px; }
.fl-actions{ display:grid; gap:8px; }
.fl-burst{
  position:absolute; inset:-20% -10% auto; height:120px; pointer-events:none;
  background:radial-gradient(circle at 50% 80%, rgba(232,200,106,.45), transparent 60%);
  animation: flWinCascade .6s var(--fl-ease);
}
#stage{ position:relative; }
.fl-skel{
  height:min(70vw,320px); border-radius:var(--fl-radius);
  background:linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.6), rgba(255,255,255,.3));
  background-size:200% 100%; animation: flShimmer 1.1s linear infinite;
}
@keyframes flShimmer{ to{ background-position:-200% 0; } }

body.reduce .scell, body.reduce .kk-cell, body.reduce .m3-cell, body.reduce .mcell.open,
body.reduce .sboard .scell, body.reduce .fl-celebrate, body.reduce .fl-fail,
body.reduce .c2048.fl-pop, body.reduce .fl-skel{
  animation:none !important; transition:opacity .2s ease !important;
}

@media (max-width:420px){
  .scell{ font-size:16px; }
  .pad b{ height:40px; min-height:40px; }
  .kk-cell{ font-size:16px; }
  .wrap{ padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); }
}

/* ---- Round 3 ---- */
.fl-levels{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0 0 10px; }
.fl-lv{ min-height:44px; min-width:0; border-radius:12px; border:1px solid var(--s-line,rgba(0,0,0,.12)); background:var(--s-surface,#fffdf8); color:var(--s-ink,#2a241c);
  font:600 13px/1.1 "Source Sans 3",system-ui,sans-serif; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:4px 2px;
  box-shadow:var(--s-shadow-1,0 1px 2px rgba(0,0,0,.08)); cursor:pointer; transition:transform .12s var(--fl-ease), background .15s; font-variant-numeric:tabular-nums; }
.fl-lv small{ font-size:10.5px; font-weight:500; color:var(--s-muted,#7a6c5a); }
.fl-lv:active{ transform:scale(.96); }
.fl-lv:focus-visible{ outline:2px solid var(--s-accent,#c9a45a); outline-offset:2px; }
.fl-lv.on{ background:var(--s-accent,#c9a45a); color:#fff; border-color:transparent; }
.fl-lv.on small{ color:rgba(255,255,255,.85); }
.fl-cascade{ animation:flCascade .42s var(--fl-ease) both; }
@keyframes flCascade{ 0%{transform:scale(1);} 45%{transform:scale(1.12);filter:brightness(1.15);} 100%{transform:scale(1);} }
@media (prefers-reduced-motion:reduce){ .fl-cascade{animation:none;} }
.fl-readout{ font:600 12px "Source Sans 3",system-ui,sans-serif; color:var(--s-muted,#7a6c5a); text-align:center; margin:6px 0; font-variant-numeric:tabular-nums; }
/* dark-mode number pads (Sudoku/KenKen) were white-on-white */
body.dark .pad b, body.oled .pad b{ background:var(--s-surface,#2a241c); color:var(--s-ink,#f3ead9); border-color:var(--s-line,rgba(255,255,255,.12)); }
/* Match-3: shared 44px min-width pushed 8 columns past 390px */
.m3-cell{ min-width:0 !important; min-height:0 !important; }
.m3-board{ max-width:100%; box-sizing:border-box; }
/* Minesweeper taller boards stay within phone width */
.mcell{ min-width:0 !important; }
.mem-board.mem-dense{ gap:6px; }
.mem-board.mem-dense .mem-front{ font-size:clamp(18px,5.5vw,26px); }
/* ---- Round 4 ---- */
.pad b{ position:relative; flex-direction:column; line-height:1; }
.pad b .fl-left{ position:absolute; right:4px; bottom:3px; font:600 9px/1 "Source Sans 3",system-ui,sans-serif; color:var(--s-muted,#7a6c5a); pointer-events:none; font-variant-numeric:tabular-nums; }
.pad b.done{ opacity:.38; }
.fl-notes i.hl{ background:var(--s-accent,#c9a45a); color:#fff; border-radius:3px; }
.tools .tool.on, #tools .tool.on{ box-shadow:inset 0 0 0 2px var(--s-accent,#c9a45a); }
.fl-opts{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:0 0 8px; }
.fl-opt{ min-height:40px; padding:0 12px; border-radius:999px; border:1px solid var(--s-line,rgba(0,0,0,.12)); background:var(--s-surface,#fffdf8); color:var(--s-ink,#2a241c); font:600 12.5px "Source Sans 3",system-ui,sans-serif; cursor:pointer; }
.fl-opt.on{ background:var(--s-ink,#2a241c); color:var(--s-surface,#fffdf8); border-color:transparent; }
.fl-opt:focus-visible{ outline:2px solid var(--s-accent,#c9a45a); outline-offset:2px; }
.fl-chip-row{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:0 0 8px; font:600 12px "Source Sans 3",system-ui,sans-serif; color:var(--s-muted,#7a6c5a); font-variant-numeric:tabular-nums; }
.fl-chip-row b{ background:var(--s-surface,rgba(255,255,255,.7)); color:var(--s-ink,#2a241c); padding:6px 10px; border-radius:999px; }
.kk-cell.same{ background:#ffe8a8; } body.dark .kk-cell.same{ background:#5a4a28; }
.mcell.qm{ color:var(--s-muted,#7a6c5a); font-size:15px; }
.mcell.hintc{ box-shadow:0 0 0 3px var(--s-good,#4e6a46), 0 0 14px rgba(78,106,70,.6); }
.g2048.n5{ gap:6px; padding:10px; } .g2048.n5 .c2048{ font-size:clamp(14px,4.4vw,22px); }
.g2048.n6{ gap:5px; padding:8px; } .g2048.n6 .c2048{ font-size:clamp(12px,3.6vw,18px); border-radius:8px; }
.g2048.n3 .c2048{ font-size:clamp(24px,8vw,40px); }
.sn-board-wrap.wrap canvas{ outline:2px dashed var(--s-accent,#c9a45a); outline-offset:3px; }
.m3-sp{ position:absolute; inset:0; display:grid; place-items:center; font-style:normal; font-weight:800; font-size:clamp(14px,4.4vw,20px); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55); pointer-events:none; z-index:1; }
.m3-cell.sp{ box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), inset 0 -4px rgba(0,0,0,.18), 0 0 10px rgba(255,236,170,.75); }
.m3-cell.hint{ animation:flHintPulse .8s ease-in-out 2; outline:3px solid var(--s-accent,#c9a45a); outline-offset:1px; }
@keyframes flHintPulse{ 50%{ transform:scale(1.12); } }
@media (prefers-reduced-motion:reduce){ .m3-cell.hint{ animation:none; } }
.mem-theme{ display:inline-flex; align-items:center; gap:4px; } .mem-theme select{ border:0; background:transparent; font:inherit; color:inherit; min-height:36px; cursor:pointer; }
body.dark .mem-theme select option{ color:#111; }
.mine .mcell.hintc{ outline:3px solid var(--s-good,#4e6a46) !important; outline-offset:-3px; background:linear-gradient(180deg,#e4f3da,#c6e2b4) !important; }
.fl-particles{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:130; }
/* ---- Round 5: Match-3 jewels (CSS only, shape per color for color-blind play) ---- */
.m3-board{ background:linear-gradient(180deg,rgba(60,40,24,.34),rgba(60,40,24,.22)); }
.m3-cell{ background:rgba(255,255,255,.10) !important; border-radius:10px; box-shadow: inset 0 1px 3px rgba(0,0,0,.18) !important; filter:drop-shadow(0 2px 1.5px rgba(40,20,10,.35)); }
body.dark .m3-cell{ background:rgba(255,255,255,.05) !important; }
.m3-cell::after{ display:none; }
.m3-cell::before{ content:""; position:absolute; inset:8%; clip-path:var(--shape);
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,0) 18%),
    conic-gradient(from 45deg at 50% 50%, rgba(255,255,255,.22) 0 25%, rgba(0,0,0,.10) 0 50%, rgba(255,255,255,.08) 0 75%, rgba(0,0,0,.2) 0),
    linear-gradient(145deg, var(--g1) 0%, var(--g2) 48%, var(--g3) 100%);
  transition: transform .16s var(--fl-spring); }
.m3-cell[data-c="0"]{ --g1:#ffa192; --g2:#e0524a; --g3:#8e1f1a; --shape:circle(47%); }
.m3-cell[data-c="1"]{ --g1:#ffe28e; --g2:#e8a93a; --g3:#94590c; --shape:inset(5% round 24%); }
.m3-cell[data-c="2"]{ --g1:#a9f2c2; --g2:#3fae6a; --g3:#1b643a; --shape:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.m3-cell[data-c="3"]{ --g1:#b3d0ff; --g2:#3f7fd9; --g3:#1d3f86; --shape:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.m3-cell[data-c="4"]{ --g1:#e2c1ff; --g2:#9a5fcf; --g3:#55277f; --shape:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); }
.m3-cell.sel{ background:rgba(232,200,106,.35) !important; box-shadow:0 0 0 3px var(--fl-gold) !important; }
.m3-cell.sel::before{ transform:scale(1.08); }
.m3-cell.sp{ box-shadow: inset 0 0 0 2px rgba(255,240,190,.9), 0 0 12px rgba(255,236,170,.8) !important; }
.m3-cell.fl-clear::before{ transform:scale(1.25); }
.m3-float{ position:fixed; z-index:131; pointer-events:none; font:800 20px/1 Fraunces,Georgia,serif; color:#fff3c4; text-shadow:0 2px 0 rgba(90,50,10,.6),0 0 12px rgba(232,200,106,.8); animation:m3Float .9s var(--fl-ease) forwards; transform:translate(-50%,-50%); }
@keyframes m3Float{ from{ opacity:0; transform:translate(-50%,-30%) scale(.8);} 20%{opacity:1; transform:translate(-50%,-50%) scale(1.08);} to{ opacity:0; transform:translate(-50%,-120%) scale(1);} }
@media (prefers-reduced-motion:reduce){ .m3-float{ animation:none; opacity:0; } }
/* ---- Round 5: 2048 tile depth + spawn ---- */
.c2048{ font-family:"Source Sans 3",system-ui,sans-serif; font-weight:800; letter-spacing:-.02em; background-image:linear-gradient(180deg,rgba(255,255,255,.2),rgba(0,0,0,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.12), 0 3px 6px rgba(60,40,20,.18); }
.c2048[data-v="0"]{ background-image:none; box-shadow: inset 0 2px 5px rgba(0,0,0,.14); }
.c2048[data-v="1024"], .c2048[data-v="2048"]{ box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.12), 0 0 18px rgba(237,200,80,.55); }
.c2048[data-big]{ background:#3c3a32; color:#f9f6f2; font-size:clamp(12px,3.4vw,18px); }
.c2048.g-new{ animation:gNew .24s var(--fl-ease) .06s both; }
@keyframes gNew{ from{ transform:scale(.2); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .c2048.g-new{ animation:none; } }
/* ---- Round 5: Memory card faces ---- */
#memBoard .mem-front{ background:radial-gradient(120% 90% at 50% 20%,#fffdf6,#f3e8d2) !important; box-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 4px rgba(201,164,90,.55), 0 4px 10px rgba(60,40,20,.2) !important; }
body.dark #memBoard .mem-front{ background:radial-gradient(120% 90% at 50% 20%,#3a3226,#2a241c) !important; box-shadow: inset 0 0 0 3px #2a241c, inset 0 0 0 4px rgba(232,200,106,.45), 0 4px 10px rgba(0,0,0,.4) !important; }
#memBoard .mem-front::before, #memBoard .mem-front::after{ content:attr(data-f); position:absolute; font-size:clamp(8px,2.4vw,11px); line-height:1; opacity:.7; }
#memBoard .mem-front::before{ top:7px; left:7px; }
#memBoard .mem-front::after{ bottom:7px; right:7px; transform:rotate(180deg); }
#memBoard.mem-dense .mem-front::before, #memBoard.mem-dense .mem-front::after{ display:none; }
#memBoard .mem-back{ background:
  repeating-linear-gradient(45deg, rgba(232,200,106,.13) 0 2px, transparent 2px 9px),
  repeating-linear-gradient(-45deg, rgba(232,200,106,.13) 0 2px, transparent 2px 9px),
  linear-gradient(155deg,#7a3028,#3a1410 55%,#1a0806) !important; }
#memBoard .mem-back::before{ content:""; position:absolute; inset:5px; border:1px solid rgba(232,200,106,.45); border-radius:7px; pointer-events:none; }
#memBoard .mem-card.match .mem-front{ animation:memGlow .6s var(--fl-ease); }
@keyframes memGlow{ 50%{ filter:brightness(1.12) drop-shadow(0 0 8px rgba(232,200,106,.8)); } }
@media (prefers-reduced-motion:reduce){ #memBoard .mem-card.match .mem-front{ animation:none; } }
.fl-unit{ animation:flUnit .55s var(--fl-ease) both; }
@keyframes flUnit{ 40%{ transform:scale(1.08); background:rgba(232,200,106,.55); box-shadow:0 0 12px rgba(232,200,106,.6); } }
body.dark .fl-unit{ animation-name:flUnitD; } @keyframes flUnitD{ 40%{ transform:scale(1.08); background:rgba(232,200,106,.35); } }
@media (prefers-reduced-motion:reduce){ .fl-unit{ animation:none; } }
/* ---- Round 5: Minesweeper loss reveal + tile depth ---- */
.mcell{ box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(120,90,50,.18), 0 2px 0 #b89a6e, 0 3px 6px rgba(80,55,25,.14); }
.mcell.open{ box-shadow: inset 0 1px 3px rgba(80,55,25,.18); }
.mcell.mine-shown{ background:#efe2cc !important; color:#3a2a1c !important; font-size:15px; }
body.dark .mcell.mine-shown{ background:#3a3024 !important; color:#f3ead9 !important; }
.mcell.boomed{ background:radial-gradient(circle,#ff9a7a,#c8352b) !important; color:#fff !important; }
.mcell.wrong{ background:#f6d4cc !important; color:#a33 !important; }
.mcell.n4{ color:#5a3a8a; } .mcell.n5{ color:#8a3a2a; } .mcell.n6{ color:#2a7a7a; } .mcell.n7,.mcell.n8{ color:#3a2a1c; }
body.dark .mcell.n1{ color:#8fb8ea; } body.dark .mcell.n2{ color:#8fd08a; } body.dark .mcell.n3{ color:#ff9a8a; } body.dark .mcell.n4{ color:#c6a8f0; } body.dark .mcell.n5{ color:#f0b08a; }