:root {
  --bg:#fafbfe; --card:#fff; --ink:#111317; --muted:#8b90a0;
  --line:#e7e9f0; --accent:#4f7cff; --good:#17a673; --bad:#e5534b;
  --box:#fbfbff;

  /* Chroma speeds (lower = faster) */
  --chroma-color-period: 1.5s;  /* base color cycle */
  --chroma-sweep-period: 0.9s;  /* highlight sweep */
}

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --angle2{ syntax: '<angle>'; initial-value: 0deg; inherits: false; }

@keyframes ai-gradient-sweep { from { --angle: 0deg; } to { --angle: 360deg; } }
@keyframes chroma-rotate     { from { --angle2:0deg; } to { --angle2:360deg; } }

[data-theme="dark"]{
  --bg:#0c0f16; --card:#111727; --ink:#e9edf7; --muted:#9aa3b2;
  --line:#1c2337; --accent:#6e95ff; --good:#1bb985; --bad:#ff6b64;
  --box:#0f1424;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

.shell{min-height:100vh; display:grid; grid-template-rows:auto 1fr auto;}
header{
  padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:20;
}
.leftbar{display:flex; align-items:center; gap:10px}
.rightbar{display:flex; align-items:center; gap:10px}
.tag{font-size:12px; padding:6px 10px; border:1px solid var(--line); background:var(--box); border-radius:999px}

/* Streak */
.streak{ display:none; align-items:center; gap:6px; font-weight:800;
  padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:var(--box);}
.streak .fire{font-size:16px; line-height:1}
.streak .num{font-variant-numeric: tabular-nums; font-size:13px}

/* Icon buttons */
.iconbtn{
  height:44px; padding:0 14px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:8px; font-size:16px; font-weight:800; line-height:1; position:relative;
}
.iconbtn.sq{width:44px; padding:0; font-size:22px}
.iconbtn:hover{box-shadow:0 3px 12px rgba(25,32,56,.12)}
.badge-dot{ position:absolute; bottom:-4px; right:-4px; width:10px; height:10px; background:var(--accent);
  border:2px solid var(--card); border-radius:999px; display:none; }

/* Compact menu */
.menu-sheet{position:fixed; top:64px; right:12px; min-width:280px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.25); display:none; z-index:35}
.menu-sheet .row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-top:1px dashed var(--line)}
.menu-sheet .row:first-child{border-top:none}
.menu-sheet .label{color:var(--muted); font-size:12px}
.menu-sheet .full{width:100%}

/* Hints toast */
.hint-toast{
  position:fixed; top:64px; right:12px; z-index:36;
  background:#1e2a52; color:#fff; border:1px solid #2a376a; border-radius:999px; padding:6px 12px; font-size:12px;
  display:none; box-shadow:0 6px 16px rgba(0,0,0,.25); cursor:pointer;
}

/* Layout */
.wrap{display:grid; grid-template-columns: 1fr 120px; gap:18px; align-items:start; max-width:1000px; margin:0 auto; padding:16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 4px 20px rgba(25,32,56,.04)}
.panel{padding:16px}

/* Stage */
.stage{position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px; padding-top:82px;}
.big{font-size:72px; font-weight:900; letter-spacing:.5px}
.ops-row{display:flex; gap:10px; justify-content:center; margin-top:6px; flex-wrap:wrap}
.op{
  min-width:64px; height:64px; border:1px solid var(--line); background:var(--card); border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; cursor:pointer; user-select:none
}
.op.used, .disabled .op{opacity:.35; cursor:not-allowed; pointer-events:none}
.op.active{outline:3px solid rgba(79,124,255,.35)}
.outcome{font-size:13px; color:var(--muted); border:1px dashed var(--line); padding:6px 10px; border-radius:999px; min-height:30px}
.outcome strong{color:var(--ink)}
.last-move{margin-top:6px; font-size:14px; color:var(--muted); text-align:center; min-height:20px}

/* Timer banner */
.timer-banner{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:#0f1424; color:#fff; border-radius:16px; border:1px solid var(--line);
  padding:10px 14px; font-weight:900; letter-spacing:.02em; box-shadow:0 8px 24px rgba(0,0,0,.15);
  display:none; align-items:center; gap:10px; font-size:16px; z-index:5;
}
[data-theme="dark"] .timer-banner{border-color:#0003}
.timer-banner .t-num{
  font-size:26px; padding:2px 10px; background:#121a33; border-radius:10px; line-height:1; border:1px solid #1b2442;
}
.timer-warn-90{background:#2b1a00 !important; border-color:#402200 !important}
.timer-warn-90 .t-num{background:#3a2200 !important; border-color:#4a2a00}
.timer-warn-180{background:#4a0d0d !important; border-color:#5b1010 !important}
.timer-warn-180 .t-num{background:#6a1212 !important; border-color:#7a1515}

/* Numbers rail */
.nums-rail{border:1px solid var(--line); border-radius:14px; background:var(--card)}
.nums-rail .title{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; margin:10px 12px 6px; text-align:center;}
.nums-col{display:flex; flex-direction:column; gap:8px; padding:8px 12px 12px}
.num-chip{
  height:48px; border:1px solid var(--line); background:var(--box); border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; cursor:pointer; user-select:none
}
.num-chip.used, .disabled .num-chip{opacity:.35; cursor:not-allowed; pointer-events:none}

/* Bottom controls */
.bottom{padding:14px 16px; display:flex; justify-content:flex-start; gap:10px; flex-wrap:wrap}
button{appearance:none; border:1px solid var(--line); background:var(--card); color:var(--ink);
  padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer}
button:hover{box-shadow:0 2px 10px rgba(25,32,56,.10)}
.primary{background:var(--ink); color:#fff; border-color:#000}
.good{background:var(--good); color:#fff; border-color:transparent}
.bad{background:var(--bad); color:#fff; border-color:transparent}

/* Distinct styles for hint reveal buttons */
button.reveal-first{
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
button.reveal-first:hover{
  filter: brightness(1.06);
}

button.reveal-second{
  background: var(--good);
  color: #fff;
  border-color: transparent;
}
button.reveal-second:hover{
  filter: brightness(1.06);
}

/* Small pill label for 'Already solved' */
.pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--box);
  font-weight:700;
  font-size: 12px;
  margin-left: 8px;
}
.pill.good{
  background: var(--good);
  border-color: transparent;
  color:#fff;
}


/* Modals */
.modal-wrap{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); padding:24px; z-index:50}
.modal{max-width:680px; width:100%; background:var(--card); border-radius:16px; border:1px solid var(--line); box-shadow:0 10px 40px rgba(0,0,0,.25); position:relative}
.modal .panel{padding:22px}
.result-row{display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border:1px dashed var(--line); border-radius:12px; margin-top:8px}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background:#0f1424; color:#fff; padding:4px 8px; border-radius:6px; font-size:12px}
[data-theme="dark"] .kbd{background:#0b1120}

/* Solutions & Hints popups */
.sol-wrap, .hint-wrap{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); padding:24px}
.sol-wrap{z-index:60}
.hint-wrap{z-index:48}
.sol-modal, .hint-modal{
  width:100%; background:var(--card); border-radius:16px; border:1px solid var(--line);
  box-shadow:0 10px 50px rgba(0,0,0,.3); position:relative
}
.sol-modal{max-width:720px}
.hint-modal{max-width:520px}
.sol-modal .panel, .hint-modal .panel{padding:22px}
/* (intentionally no .sol-close/.hint-close here; single canonical rule at bottom) */
.solutions, .hints-content{max-height:60vh; overflow:auto; margin-top:12px; border-top:1px dashed var(--line); padding-top:10px}
.sol{border:1px solid var(--line); border-radius:12px; padding:8px 10px; margin-bottom:8px}
.sol h4{margin:0 0 6px 0; font-size:14px}

/* Mode selector */
.mode-wrap{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.3); padding:24px; z-index:40}
.mode-card{max-width:680px; width:100%; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.2)}
.mode-card .panel{padding:24px}
.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.mode-opt{border:1px solid var(--line); border-radius:14px; padding:16px; background:var(--box)}
.mode-opt h3{margin:0 0 6px 0}

/* How-to modal */
.howto-wrap{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); padding:24px; z-index:70}
.howto{max-width:640px; width:100%; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 35px rgba(0,0,0,.25); position:relative}
.howto .panel{padding:24px}
.howto .title { display:flex; align-items:center; gap:8px; margin:0 0 10px 0; }
.howto .steps { display:grid; gap:10px; margin:10px 0 14px 0; }
.howto .step { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--box); }
.howto .badge { min-width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:900; background:var(--ink); color:#fff; font-size:12px; }
.howto .tip { border:1px dashed var(--line); border-radius:12px; padding:10px 12px; color:var(--muted); }
.howto .pill { display:inline-block; padding:2px 8px; border-radius:999px; background:var(--box); border:1px solid var(--line); font-weight:700; }
[data-theme="dark"] .howto .badge{ background:#e9edf7; color:#111317; border:1px solid #c9d2e1; }
[data-theme="dark"] .howto .kbd{ background:#e9edf7; color:#111317; }

/* Centered header logo */
header { position: sticky; }
.logo-center{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  height: 125px; width: auto; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none;
}
@media (max-width: 420px){ .logo-center{ height: 30px; } }
[data-theme="dark"] .logo-center{ filter: invert(1) hue-rotate(180deg); }

/* Share sheet */
.share-wrap{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); border-radius:16px;
}
.share-card{
  max-width:620px; width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 10px 35px rgba(0,0,0,.25); position:relative;
}
.share-card .panel{ padding:20px; }
/* (intentionally no .share-x here; single canonical rule at bottom) */
.share-grid{ display:grid; gap:10px; }
.share-explain{ font-size:14px; color:var(--muted); }
.share-explain .kbd{ margin:0 3px; }
.share-preview{
  border:1px dashed var(--line); border-radius:12px; padding:10px 12px; background:var(--box);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space:pre-wrap;
}
.share-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.share-legend{ margin:8px 0 0 18px; line-height:1.5; }

/* ---- CHROMA PROXIMITY GLOW ---- */
.chroma-target{
  position: relative; z-index: 0;
  --chroma-alpha: 0;     /* local off by default */
  --mx: -1000px; --my: -1000px;
  --chroma-corner: 12px; --chroma-r: 80px;
}
.chroma-target::after{
  content:""; position:absolute; inset:-2px; border-radius: var(--chroma-corner);
  background:
    conic-gradient(from var(--angle2, 0deg) at 50% 50%,
      #4285F4 0deg, #EA4335 90deg, #F4B400 180deg, #0F9D58 270deg, #4285F4 360deg),
    conic-gradient(from var(--angle, 0deg) at 50% 50%,
      transparent 0deg, rgba(255,255,255,.45) 12deg, transparent 48deg,
      rgba(255,255,255,.45) 312deg, transparent 360deg);
  animation:
    chroma-rotate var(--chroma-color-period) linear infinite,
    ai-gradient-sweep var(--chroma-sweep-period) linear infinite;

  mask:
    radial-gradient(circle var(--chroma-r) at var(--mx) var(--my), #000 60%, transparent 61%),
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: intersect, exclude;

  -webkit-mask:
    radial-gradient(circle var(--chroma-r) at var(--mx) var(--my), #000 60%, transparent 61%),
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in, xor;

  padding:2px; pointer-events:none;
  opacity: var(--chroma-alpha); transition: opacity 120ms linear;
}
.ai-glow{ --chroma-alpha: 1 !important; }

@media (prefers-reduced-motion: reduce){
  .chroma-target::after{ animation: chroma-rotate 10s linear infinite; }
}

/* === Dark mode: stronger contrast for important buttons === */
[data-theme="dark"] .primary,
[data-theme="dark"] button.primary{
  background: var(--accent) !important;
  color: #0b1120 !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 4px 14px rgba(0,0,0,.35);
}
[data-theme="dark"] .primary:hover,
[data-theme="dark"] button.primary:hover{ filter: brightness(1.06); }

[data-theme="dark"] .good,
[data-theme="dark"] button.good{
  background: var(--good) !important;
  color: #0b1120 !important;
}

/* === Footer === */
footer {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding: 16px;
}

/* =========================================================
   Close buttons: single canonical rule — FORCE TOP-RIGHT
   Applies to: .sol-close (Solutions), .hint-close (Hints), .share-x (Share)
   ========================================================= */
.sol-close,
.hint-close,
.share-x {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;

  /* Nuke anything that might push it left */
  left: auto !important;
  inset: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: 12px !important;
  margin-left: 0 !important;
  transform: none !important;

  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: var(--card) !important;
  cursor: pointer !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}

/* Under-stage callout */
.goal-banner{
  /* layout */
  display:block;
  max-width: 540px;
  margin: 16px auto 0;         /* centered under the whole box */
  padding: 12px 16px;

  /* typography */
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  letter-spacing: .01em;
  color: var(--ink);

  /* look & feel (matches cards/tags) */
  background: linear-gradient(0deg, var(--box), var(--card));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(25,32,56,.06);

  /* subtle accent edge */
  position: relative;
}

.goal-banner::after{
  /* a thin accent underline that doesn’t scream */
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 15%, var(--accent) 85%, transparent 100%);
  opacity: .35;
  pointer-events: none;
}

@media (max-width: 480px){
  .goal-banner{
    font-size: 18px;
    padding: 10px 12px;
    border-radius: 12px;
  }
}