.cl-game {
  --cl-ink:#eef1ff; --cl-muted:#a5afd0; --cl-cyan:#69eee8; --cl-purple:#b293ff;
  color:var(--cl-ink); background:radial-gradient(ellipse at 85% 0,#3d235f80,transparent 55%),radial-gradient(ellipse at 5% 100%,#0d514747,transparent 55%),#0c1021;
  font-family:Heebo,Arial,sans-serif; position:relative; width:100%; height:100%; min-height:440px;
  display:flex; flex-direction:column; overflow:hidden; isolation:isolate; box-sizing:border-box;
}
.cl-game *, .cl-game *::before, .cl-game *::after { box-sizing:border-box; }
.cl-game [hidden] { display:none!important; }
.cl-game button { font:inherit; cursor:pointer; color:inherit; border:0; border-radius:12px; background:#ffffff0d; min-height:42px; padding:9px 14px; transition:background .16s,box-shadow .16s,transform .16s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.cl-game button:hover { background:#ffffff19; }
.cl-game button:active { transform:translateY(1px); }
.cl-game button:focus-visible, .cl-game canvas:focus-visible { outline:3px solid var(--cl-cyan); outline-offset:3px; }
.cl-game button:disabled { cursor:default; }
.cl-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 28px 12px; flex:none; }
.cl-brand { display:flex; align-items:center; gap:12px; }
.cl-brand strong { display:block; font-size:21px; line-height:1.5; white-space:nowrap; }
.cl-brand small { display:block; font-size:10px; letter-spacing:.2em; color:var(--cl-purple); direction:ltr; text-align:right; }
.cl-mark { display:grid; place-items:center; width:46px; height:46px; border-radius:15px; background:linear-gradient(135deg,#b393ff24,#67e9e019); color:var(--cl-cyan); font-size:30px; box-shadow:0 6px 30px #9263d81a; }
.cl-header-actions { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.cl-header-actions button { font-size:12px; color:#c7d0e6; background:transparent; }
.cl-header-actions button[aria-pressed=true] { color:var(--cl-cyan); }
.cl-hud { display:flex; align-items:center; justify-content:center; gap:22px; margin:0 24px 14px; padding:10px; border-radius:16px; background:#05091759; color:var(--cl-muted); font-size:13px; flex:none; font-variant-numeric:tabular-nums; }
.cl-hud strong { color:var(--cl-cyan); font-size:20px; }
.cl-hud span:last-child { direction:ltr; }
.cl-main { flex:1; min-height:0; display:flex; gap:32px; justify-content:center; padding:0 28px; overflow:hidden; }
.cl-stage { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; flex:1; max-width:800px; background:#04081733; border-radius:22px; overflow:hidden; }
.cl-canvas { display:block; max-width:100%; max-height:100%; width:auto; height:100%; object-fit:contain; border-radius:8px; touch-action:none; }
.cl-side { flex:0 0 230px; max-width:250px; align-self:center; padding:20px 0; }
.cl-eyebrow { display:block; color:var(--cl-purple); font-size:11px; letter-spacing:.08em; font-weight:700; }
.cl-side h2 { font-size:27px; line-height:1.35; letter-spacing:-.5px; margin:12px 0; }
.cl-side p { color:var(--cl-muted); font-size:13px; line-height:1.8; }
.cl-tips { display:flex; flex-wrap:wrap; gap:7px; margin:20px 0; }
.cl-tips span { background:#ffffff08; border-radius:7px; color:#bec7e0; padding:6px 8px; font-size:11px; }
.cl-side .cl-session-note { font-size:10px; opacity:.65; }
.cl-preview { display:flex; align-items:center; gap:24px; color:var(--cl-muted); padding:18px; border-radius:14px; background:#03071744; }
.cl-next-shape { display:grid; gap:3px; direction:ltr; }
.cl-next-shape i { display:block; width:18px; height:18px; border-radius:3px; }
.cl-touch { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding:14px 18px max(14px,env(safe-area-inset-bottom)); flex:none; direction:ltr; }
.cl-touch button { min-width:56px; min-height:46px; padding:10px 18px; font-weight:600; font-size:14px; color:#d4e4f2; box-shadow:0 3px 0 #0003; user-select:none; }
.cl-touch button[aria-pressed=true] { color:#061d24; background:var(--cl-cyan); }
.cl-notice { position:absolute; z-index:5; bottom:90px; left:50%; transform:translateX(-50%); max-width:min(92%,500px); text-align:center; pointer-events:none; color:#ebf6ff; background:#233449ed; padding:12px 18px; border-radius:12px; box-shadow:0 10px 32px #0005; font-size:13px; }
.cl-notice:empty { display:none; }
.cl-overlay { position:absolute; z-index:4; inset:0; display:flex; align-items:center; justify-content:center; background:#060917bb; backdrop-filter:blur(12px); padding:28px; overflow:auto; }
.cl-menu { width:100%; max-width:490px; text-align:center; margin:auto; }
.cl-menu h1 { font-size:clamp(28px,4vw,46px); line-height:1.25; letter-spacing:-1px; margin:14px 0 18px; color:#f6f3ff; }
.cl-menu p { font-size:14px; line-height:1.95; color:#bcc6e1; margin:0 auto 24px; max-width:440px; }
.cl-menu-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cl-menu-actions button { min-height:48px; padding:12px 22px; }
.cl-menu-actions .cl-primary { background:linear-gradient(110deg,#68eae4,#a5a1ff); color:#111830; font-weight:800; box-shadow:0 9px 28px #70dfed1a; }
.cl-menu-actions .cl-primary:hover { background:linear-gradient(110deg,#a3fff7,#cabdff); }
.cl-menu-actions .cl-secondary { background:#ffffff10; }
.cl-menu-actions .cl-quiet { color:#98a5c6; background:transparent; font-size:12px; flex-basis:100%; }
.cl-mines .cl-stage { container-type:size; }
.cl-mine-grid { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px; width:min(100%,480px); width:min(100cqw,100cqh,480px); aspect-ratio:1; padding:18px; direction:ltr; }
.cl-game .cl-mine { aspect-ratio:1; min-height:0; min-width:0; padding:0; border-radius:9px; font:800 clamp(15px,2.2vw,23px)/1 Arial,sans-serif; color:#75e9fa; background:linear-gradient(150deg,#374469,#202c4c); box-shadow:0 3px 0 #10162c, inset 0 1px 0 #a8b9ff1a; }
.cl-game .cl-mine:hover { background:#47567d; }
.cl-game .cl-mine.cl-open { background:#ffffff04; box-shadow:none; }
.cl-game .cl-mine.cl-cursor { outline:2px solid #ae93ff; outline-offset:1px; }
.cl-game .cl-mine.cl-flagged { color:#f0b66c; }
.cl-game .cl-mine.cl-exploded { color:#fff; background:#cd567c; }
.cl-mine[data-number="2"] { color:#87e7bc; }
.cl-mine[data-number="3"] { color:#ff999f; }
.cl-mine[data-number="4"] { color:#bca2ff; }
.cl-mine[data-number="5"] { color:#ffb66f; }
.cl-mine[data-number="6"],.cl-mine[data-number="7"],.cl-mine[data-number="8"] { color:#ffdd85; }
.cl-solitaire { --cl-cyan:#b6e8ce; --cl-purple:#c9dcab; background:radial-gradient(ellipse at 60% 35%,#196353 0,transparent 68%),#103f38; }
.cl-solitaire .cl-stage { background:radial-gradient(ellipse at 50% 20%,#ffffff04,transparent 70%),#07392f55; max-width:1050px; align-items:flex-start; overflow-y:auto; }
.cl-solitaire .cl-side { flex-basis:210px; }
.cl-solitaire .cl-side p,.cl-solitaire .cl-tips span { color:#afc9c0; }
.cl-solitaire .cl-overlay { background:#082d26db; }
.cl-solitaire .cl-menu p { color:#c0d6ce; }
.cl-card-board { --card-gap:10px; --card-step:clamp(20px,3.7vh,33px); width:100%; max-width:880px; padding:24px; }
.cl-card-top,.cl-tableau { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--card-gap); }
.cl-tableau { margin-top:22px; padding-bottom:24px; }
.cl-card-column { position:relative; padding-bottom:calc(var(--cards) * var(--card-step)); }
.cl-game .cl-card { aspect-ratio:.7; width:100%; height:auto; min-height:0; padding:8px; border-radius:8px; display:flex; align-items:flex-start; justify-content:flex-start; text-align:left; position:relative; background:#f8f5ed; font:bold clamp(12px,1.6vw,20px)/1.1 Georgia,serif; color:#1c2b3b; box-shadow:0 2px 5px #001d2566; user-select:none; white-space:pre-line; }
.cl-game .cl-card:hover { background:#fffdf8; }
.cl-game .cl-card.red { color:#c1485e; }
.cl-card-suit { position:absolute; inset:36% 0 auto; text-align:center; font-size:clamp(18px,3vw,40px); pointer-events:none; }
.cl-game .cl-card-back { color:#d1eadb; font:800 clamp(8px,1.1vw,13px)/1.6 Arial,sans-serif; letter-spacing:1px; justify-content:center; align-items:center; text-align:center; background:repeating-linear-gradient(45deg,#20564f 0px,#20564f 5px,#2d6559 5px,#2d6559 7px); box-shadow:inset 0 0 0 4px #b8d6c99c,0 2px 5px #001d2566; }
.cl-game .cl-card-back:hover { background-color:#376f5c; }
.cl-game .cl-card-empty { background:#021e2530; box-shadow:inset 0 0 0 1px #c3ead21c; color:#b9d3c766; align-items:center; justify-content:center; font-size:clamp(11px,2vw,25px); }
.cl-game .cl-card-empty:hover { background:#ffffff0d; }
.cl-card-column>.cl-card:not(:first-child) { position:absolute; top:calc(var(--index) * var(--card-step)); left:0; }
.cl-game .cl-card.cl-selected { outline:3px solid #e8cd7e; outline-offset:1px; box-shadow:0 0 22px #fff1ad45; }
@media (min-width:1200px) { .cl-main { gap:56px; } .cl-header { padding-inline:40px; } }
@media (max-width:850px) {
  .cl-side { display:none; } .cl-main { padding:0 16px; gap:0; } .cl-header { padding:14px 16px 10px; gap:10px; }
  .cl-brand strong { font-size:18px; } .cl-header-actions { gap:2px; } .cl-header-actions button { padding:7px 9px; }
  .cl-hud { margin:0 16px 10px; } .cl-solitaire .cl-stage { max-width:880px; }
}
@media (max-width:520px) {
  .cl-game { min-height:360px; } .cl-header { flex-wrap:wrap; padding:10px 12px 5px; gap:5px; }
  .cl-brand { flex:1; gap:8px; } .cl-mark { width:32px; height:32px; font-size:22px; border-radius:10px; }
  .cl-brand strong { font-size:16px; } .cl-brand small { font-size:8px; }
  .cl-header-actions { width:100%; justify-content:space-between; } .cl-header-actions button { min-height:32px; font-size:11px; }
  .cl-hud { margin:0 10px 8px; padding:7px 6px; gap:14px; font-size:11px; } .cl-hud strong { font-size:16px; }
  .cl-main { padding:0 8px; } .cl-stage { border-radius:14px; }
  .cl-touch { gap:6px; padding:10px 8px max(10px,env(safe-area-inset-bottom)); }
  .cl-touch button { min-width:44px; min-height:43px; font-size:12px; padding:8px 11px; }
  .cl-overlay { padding:20px; } .cl-menu p { font-size:12px; line-height:1.8; margin-bottom:18px; }
  .cl-menu h1 { margin:9px 0 14px; font-size:29px; } .cl-menu-actions button { min-height:42px; padding:10px 16px; }
  .cl-mine-grid { padding:12px; gap:5px; } .cl-game .cl-mine { border-radius:6px; font-size:18px; }
  .cl-card-board { padding:14px 7px; --card-gap:5px; --card-step:21px; }
  .cl-game .cl-card { padding:5px 3px; border-radius:5px; font-size:12px; } .cl-card-suit { font-size:23px; inset-block-start:40%; }
  .cl-game .cl-card-back { font-size:8px; letter-spacing:0; box-shadow:inset 0 0 0 2px #b8d6c99c,0 2px 5px #001d2566; }
  .cl-game .cl-card-empty { font-size:14px; } .cl-tableau { margin-top:16px; }
}
@media (max-height:520px) and (min-width:600px) {
  .cl-game { min-height:300px; } .cl-header { padding-block:6px; } .cl-header-actions button { min-height:32px; }
  .cl-mark { width:32px; height:32px; } .cl-hud { margin-bottom:6px; padding:4px; }
  .cl-touch { padding-block:6px; } .cl-touch button { min-height:35px; padding-block:6px; }
  .cl-side { display:none; } .cl-menu h1 { font-size:25px; margin-block:6px; } .cl-menu p { font-size:12px; margin-bottom:12px; }
  .cl-overlay { padding:15px; } .cl-menu-actions button { min-height:36px; padding-block:6px; }
  .cl-mine-grid { max-width:300px; padding:6px; gap:3px; }
}
@media (prefers-reduced-motion:reduce) { .cl-game button { transition:none; } }