/* MaxSentence game — dark "Word-It" theme. All colours are named tokens here. */
:root{
  /* POS tile colours (glossy, on dark) */
  --ms-noun:#2f6fed;        /* blue */
  --ms-verb:#e5484d;        /* red */
  --ms-adjective:#f0a818;   /* yellow */
  --ms-connector:#3ecf8e;   /* green */
  --ms-pronoun:#b083f0;     /* purple */
  --ms-preposition:#12b5c9; /* teal */
  --ms-adverb:#ff7a45;      /* orange — time / degree words */
  --ms-other:#8a94a6;       /* grey */
  /* Whole game is light whitish-blue now: the screen matches the grid. All text sits on a
     light background, so it uses the dark --ms-on-bg. */
  --ms-screen-1:#f8fbff;    --ms-screen-2:#edf4fd; /* screen gradient — near-white with a hint of blue */
  --ms-on-bg:#173169;       /* readable dark-blue for text on the light background */
  --ms-board-bg:#e3edfa;    /* board grid panel — a touch deeper so it reads as a panel */
  --ms-empty:#d4e2f5;       /* empty cell / empty slot space */
  --ms-slot-bg:#e3edfa;     /* slot tray / score bar / tool pills — matches the board panel */
  --ms-slot-active-bg:#cdddf5;
  --ms-cell-line:rgba(23,49,105,.12);
  --ms-done:#3ecf8e;        /* correct-sentence outline (green) */
  --ms-neon:#7cf3ff;        /* neon cyan title */
  --ms-play-1:#22d67e; --ms-play-2:#12a35e; /* neon green play button */
  --ms-txt:#eafcff; --ms-txt-dim:#8ea4c8;
  /* Glossy top-light / bottom-shade overlay for every coloured tile */
  --ms-gloss:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.05) 42%, rgba(0,0,0,.16));
}


/* Only lay the game out when it's the ACTIVE screen (an ID rule beating
   .screen{display:none} used to show the game on every screen). */
#maxsentence-game.active{
  display:flex;flex-direction:column;align-items:center;
  overflow:hidden;touch-action:none;overscroll-behavior:none;   /* drag is a game control, not a page scroll */
  background:linear-gradient(180deg, var(--ms-screen-1) 0%, var(--ms-screen-2) 100%);
}

/* Header (on the light screen -> dark-blue text) */
#maxsentence-game .ms-head{background:transparent;border:none}
#maxsentence-game .ms-head .quit{color:var(--ms-on-bg)}
.ms-head-title{flex:1;text-align:center;font-weight:700;font-size:1.05rem;color:var(--ms-on-bg);letter-spacing:.04em}
.ms-music-btn{min-width:40px;font-size:1.4rem;opacity:.9;transition:opacity .2s}
.ms-music-btn.muted{color:rgba(23,49,105,.4);opacity:.55}
.ms-pause-btn{min-width:36px;font-size:1.15rem;opacity:.9}

.ms-root{
  display:flex;flex-direction:column;align-items:center;width:100%;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;
  /* Shared cell size (board AND column headers use these). Sized so 7 columns + 4 sentence
     slots (incl. a 7-word one) fit ONE mobile screen with no scroll. */
  --cellw:min(calc(88vw / var(--ms-cols)), 54px);
  --cellh:min(calc((100dvh - 486px) / var(--ms-rows)), 33px);
}

/* ── HUD (hearts + level + timer, score bar, toolbar) ─────────────────────────── */
.ms-hud{width:min(94vw,420px);display:flex;flex-direction:column;gap:4px;margin:2px 0 4px}
.ms-hud-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px}
.ms-hearts{display:flex;gap:4px;line-height:1}
.ms-heart{color:#ff4d5e;font-size:20px;text-shadow:0 0 6px rgba(255,77,94,.45)} /* coloured glyph, not emoji */
.ms-heart.empty{color:rgba(23,49,105,.22);text-shadow:none}
.ms-level{font-size:15px;font-weight:800;color:var(--ms-on-bg);letter-spacing:.03em;min-width:46px}
.ms-timer{font-size:15px;font-weight:800;color:var(--ms-on-bg);font-variant-numeric:tabular-nums;min-width:56px;text-align:right}
.ms-timer-hot{color:#ff5a5f;text-shadow:0 0 8px rgba(255,90,95,.6);animation:ms-check .8s ease-in-out infinite} /* last-seconds countdown */
.ms-timer-bump{animation:ms-timerbump .4s ease}
@keyframes ms-timerbump{0%,100%{transform:scale(1)}40%{transform:scale(1.25);color:var(--ms-connector)}}
/* "+30s" floats up off the timer when a sentence adds time. */
.ms-timebonus{position:absolute;right:0;top:-6px;color:var(--ms-connector);font-weight:800;font-size:14px;pointer-events:none;text-shadow:0 0 8px rgba(62,207,142,.6);animation:ms-flyup .9s ease-out forwards}
.ms-scorebar{
  flex:1;text-align:center;font-size:20px;font-weight:800;color:var(--ms-on-bg);font-variant-numeric:tabular-nums;
  background:var(--ms-slot-bg);border-radius:20px;padding:5px 14px;
  box-shadow:inset 0 0 0 1px rgba(23,49,105,.18);
}
/* Thin toolbar: reshuffle button (left) + shared column-reroll count (right). */
.ms-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.ms-tool-btn{display:flex;align-items:center;gap:4px;border:none;cursor:pointer;background:var(--ms-slot-bg);border-radius:11px;padding:3px 10px;color:var(--ms-on-bg);font-weight:800;font-size:13px;box-shadow:inset 0 0 0 1px rgba(23,49,105,.2)}
.ms-tool-btn.disabled{opacity:.35;cursor:default}
.ms-tool-n{font-size:12px;font-weight:800}
.ms-tool-info{font-size:13px;font-weight:800;color:var(--ms-on-bg)}   /* on the light screen */
.ms-tool-info small{font-size:10px;font-weight:600;color:#41547d;margin-inline-start:2px}
.ms-tool-info.spent{opacity:.45}

.ms-cons{display:flex;flex-wrap:wrap;gap:6px;width:100%;justify-content:center} /* wrap so ALL are visible */
.ms-cons-btn{
  display:flex;align-items:center;gap:4px;border:none;cursor:pointer;flex:0 0 auto;
  background:var(--ms-slot-bg);border-radius:12px;padding:4px 8px;
  box-shadow:inset 0 0 0 1px rgba(140,190,255,.20);
}
.ms-cons-btn.active{box-shadow:inset 0 0 0 2px var(--ms-connector), 0 0 10px rgba(62,207,142,.55)}
.ms-cons-btn.disabled{opacity:.35;cursor:default}
.ms-cons-dot{width:13px;height:13px;border-radius:4px;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.ms-cons-lbl{font-size:11px;font-weight:700;color:var(--ms-txt-dim)}
.ms-cons-n{font-size:12px;font-weight:800;color:var(--ms-txt)}
.ms-cons-ic{font-size:14px;line-height:1}
.ms-cons-shuffle{box-shadow:inset 0 0 0 1px rgba(124,243,255,.35)} /* re-rolls the sentence slots */
.ms-cons-hint{box-shadow:inset 0 0 0 1px rgba(255,215,106,.45)}    /* shows a sample sentence */
/* consumable dots need the POS colour too */
.ms-cons-dot.ms-noun{background-color:var(--ms-noun)}
.ms-cons-dot.ms-verb{background-color:var(--ms-verb)}
.ms-cons-dot.ms-adjective{background-color:var(--ms-adjective)}
.ms-cons-dot.ms-connector{background-color:var(--ms-connector)}
.ms-cons-dot.ms-pronoun{background-color:var(--ms-pronoun)}
.ms-cons-dot.ms-preposition{background-color:var(--ms-preposition)}
.ms-cons-dot.ms-other{background-color:var(--ms-other)}

.ms-banner{
  position:absolute;top:44px;z-index:6;background:var(--turquoise,#1f9e95);color:#fff;
  font-weight:800;padding:6px 18px;border-radius:20px;box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.ms-banner-in{animation:ms-banner .35s ease}
@keyframes ms-banner{from{opacity:0;transform:translateY(-10px) scale(.9)}to{opacity:1;transform:none}}

.ms-board{
  display:grid;
  grid-template-columns:repeat(var(--ms-cols), var(--cellw));
  grid-auto-rows:var(--cellh);
  gap:3px;
  background:var(--ms-board-bg);
  padding:4px;border-radius:12px;overflow:hidden; /* falling blocks slide in from the top edge */
  box-shadow:inset 0 0 0 1px rgba(23,49,105,.14), 0 6px 20px rgba(0,0,0,.45);
  direction:rtl; /* rightmost cell is the first word */
}
/* Column headers — one per column, aligned to the board grid; click to reroll that column. */
.ms-colheads{
  display:grid;grid-template-columns:repeat(var(--ms-cols), var(--cellw));grid-auto-rows:20px;
  gap:3px;padding:0 4px;direction:rtl;width:auto;margin-bottom:3px;
}
.ms-colhead{
  width:var(--cellw);height:20px;border:none;cursor:pointer;border-radius:6px 6px 3px 3px;
  display:flex;align-items:center;justify-content:center;gap:2px;color:#fff;overflow:hidden;
  /* A grey wash over each column's colour so the HEADER reads as a label, not a word tile
     (the word tiles below stay vivid). The hue still shows through to match its column. */
  background-image:linear-gradient(rgba(92,102,124,.58), rgba(92,102,124,.58)), var(--ms-gloss);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  filter:saturate(.8);text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.ms-colhead:active{transform:translateY(1px)}
.ms-colhead.disabled{opacity:.3;cursor:default;filter:grayscale(.5)}
.ms-colhead-lbl{font-size:9px;font-weight:800;line-height:1;text-transform:capitalize;letter-spacing:-.02em}
.ms-colhead-ic{font-size:9px;line-height:1;font-weight:800;opacity:.8}
.ms-cell{
  width:var(--cellw);height:var(--cellh);
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
  font-family:'Vazirmatn',sans-serif;font-weight:800;
  font-size:calc(var(--cellh)*.4);line-height:1;color:#fff;
  overflow:hidden;
  background:var(--ms-empty);box-shadow:inset 0 0 0 1px var(--ms-cell-line); /* empty cells read as a grid */
}
/* Coloured, glossy, slightly-raised filled tiles (Word-It look) */
.ms-cell.filled,.ms-slot-cell.filled,.ms-ghost{
  background-image:var(--ms-gloss);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 3px rgba(0,0,0,.4);
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  cursor:grab;touch-action:none;
}
/* Blocks visibly FALL. --ms-dy (set inline) is how far above the rest position the block
   starts, in cell+gap units, so it lands exactly on the grid. A fresh block drops in from
   above the board (ms-drop, with gravity ease-in); a block that shifted down to fill a gap
   slides the rows it moved (ms-slide). Delay is set inline to stagger a full fill. */
@keyframes ms-drop{0%{transform:translateY(var(--ms-dy));opacity:0}60%{opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes ms-slide{0%{transform:translateY(var(--ms-dy))}100%{transform:translateY(0)}}
.ms-cell.ms-drop{animation:ms-drop .3s cubic-bezier(.42,0,.65,1) both}   /* accelerating = gravity */
.ms-cell.ms-slide{animation:ms-slide .16s ease-out both}
/* Board block the hint says to pick (static glow — no continuous animation, keeps it cool). */
.ms-cell.ms-cell-hint{outline:3px solid #ffd76a;outline-offset:-1px;box-shadow:0 0 14px rgba(255,215,106,.85), inset 0 1px 0 rgba(255,255,255,.35);z-index:2}

/* POS colours — two classes so they beat the empty .ms-cell/.ms-slot-cell background
   regardless of source order (a bare .ms-noun lost, showing words as a faint shadow). */
.ms-cell.ms-noun,.ms-slot-cell.ms-noun,.ms-ghost.ms-noun{background-color:var(--ms-noun)}
.ms-cell.ms-verb,.ms-slot-cell.ms-verb,.ms-ghost.ms-verb{background-color:var(--ms-verb)}
.ms-cell.ms-adjective,.ms-slot-cell.ms-adjective,.ms-ghost.ms-adjective{background-color:var(--ms-adjective)}
.ms-cell.ms-connector,.ms-slot-cell.ms-connector,.ms-ghost.ms-connector{background-color:var(--ms-connector)}
.ms-cell.ms-pronoun,.ms-slot-cell.ms-pronoun,.ms-ghost.ms-pronoun{background-color:var(--ms-pronoun)}
.ms-cell.ms-preposition,.ms-slot-cell.ms-preposition,.ms-ghost.ms-preposition{background-color:var(--ms-preposition)}
.ms-cell.ms-adverb,.ms-slot-cell.ms-adverb,.ms-ghost.ms-adverb{background-color:var(--ms-adverb)}
.ms-cell.ms-other,.ms-slot-cell.ms-other,.ms-ghost.ms-other{background-color:var(--ms-other)}
/* Column-header colours (match each column's type). */
.ms-colhead.ms-noun{background-color:var(--ms-noun)}
.ms-colhead.ms-verb{background-color:var(--ms-verb)}
.ms-colhead.ms-adjective{background-color:var(--ms-adjective)}
.ms-colhead.ms-connector{background-color:var(--ms-connector)}
.ms-colhead.ms-pronoun{background-color:var(--ms-pronoun)}
.ms-colhead.ms-preposition{background-color:var(--ms-preposition)}
.ms-colhead.ms-adverb{background-color:var(--ms-adverb)}
.ms-colhead.ms-other{background-color:var(--ms-other)}

/* ── Sentence slots (whitish-blue trays below the board) ──────────────────────── */
.ms-slots{display:flex;flex-direction:column;gap:4px;margin-top:5px;width:min(94vw,420px)}
.ms-slot{
  display:flex;flex-direction:row-reverse;gap:3px;justify-content:center; /* RTL: first word on the right */
  padding:4px;border-radius:11px;background:var(--ms-slot-bg);
  box-shadow:inset 0 0 0 1px rgba(23,49,105,.18);
}
.ms-slot-max{box-shadow:inset 0 0 0 1.5px rgba(200,144,42,.6)} /* the 7-word "max sentence" slot */
.ms-slot-drop{box-shadow:inset 0 0 0 2px var(--ms-connector), 0 0 12px rgba(62,207,142,.5);background:var(--ms-slot-active-bg)} /* a word is hovering to drop here */
.ms-slot-cell.ms-cell-drop{box-shadow:inset 0 0 0 2px var(--ms-connector), 0 0 10px rgba(62,207,142,.6);background:var(--ms-slot-active-bg)} /* this exact spot */
.ms-slot-check{animation:ms-check .8s ease-in-out infinite} /* waiting on the sentence check */
@keyframes ms-check{0%,100%{opacity:1}50%{opacity:.55}}
/* Couldn't reach the checker (offline): a spinning mark near the sentence, kept until it can check. */
.ms-slot-pending{position:relative;animation:none;opacity:1}
.ms-slot-pending::after{content:'↻';position:absolute;right:8px;top:50%;color:var(--ms-neon);font-size:16px;font-weight:800;transform-origin:center;animation:ms-spin .9s linear infinite}
@keyframes ms-spin{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}
.ms-slot-done{box-shadow:inset 0 0 0 2px var(--ms-done), 0 0 12px rgba(62,207,142,.4)}
.ms-slot-dead{opacity:.4;filter:grayscale(1)} /* wrong sentence — greyed for good */
.ms-slot-cell{
  --scw:min(11.5vw,46px); --sch:min(7.5vw,28px);       /* small enough that a 7-cell slot fits one row */
  width:var(--scw);height:var(--sch);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:rgba(23,49,105,.06);     /* empty box on the light tray */
  box-shadow:inset 0 0 0 1.5px rgba(23,49,105,.20);
  font-family:'Vazirmatn',sans-serif;font-weight:800;color:#fff;
  font-size:calc(var(--sch)*.42);line-height:1;overflow:hidden;
}
.ms-slot-cell.ms-slot-edit{outline:2px dashed #c8902a;outline-offset:-1px;cursor:pointer;animation:ms-check .7s ease-in-out infinite} /* placed verb: tap to conjugate */
.ms-slot-cell.ms-slot-idx{color:rgba(23,49,105,.4);font-weight:700} /* empty cell: reading-order number (1 = first word, rightmost) */

/* Floating word that follows the finger while dragging from the pool to a slot. */
.ms-ghost{
  position:fixed;z-index:50;transform:translate(-50%,-50%);pointer-events:none;
  --gc:46px;width:var(--gc);height:var(--gc);
  display:flex;align-items:center;justify-content:center;border-radius:10px;
  font-family:'Vazirmatn',sans-serif;font-weight:800;color:#fff;
  font-size:calc(var(--gc)*.32);line-height:1;overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);opacity:.97;
}

.ms-flyup{
  position:absolute;z-index:7;transform:translate(-50%,0);
  font-weight:800;font-size:18px;color:var(--ms-neon);pointer-events:none;
  text-shadow:0 0 8px rgba(124,243,255,.7);
  animation:ms-flyup .9s ease-out forwards;
}
.ms-flyup-vert{color:#ffd76a;font-size:22px}
@keyframes ms-flyup{
  0%{opacity:0;transform:translate(-50%,0) scale(.8)}
  15%{opacity:1;transform:translate(-50%,-6px) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-70px) scale(1)}
}

/* Controls hint line under the board (on the light screen). */
.ms-hint{margin-top:6px;width:min(92vw,420px);text-align:center;color:#41547d;font-size:12px;font-weight:600;line-height:1.3}

/* Word + sentence counts at the bottom of the game area (on the light screen). */
.ms-stats{display:flex;gap:16px;justify-content:center;margin-top:6px;width:min(92vw,420px)}
.ms-stat{font-size:14px;font-weight:800;color:var(--ms-on-bg)}
.ms-stat small{font-size:11px;font-weight:600;color:#41547d;margin-inline-start:2px}

/* Long or two-word tiles (e.g. future verbs "خواهم داشت") — shrink + wrap, stay centered. */
.ms-cell.ms-long{font-size:calc(var(--cellh)*.30);line-height:1.05;white-space:normal;word-break:break-word}
.ms-slot-cell.ms-long{font-size:calc(var(--sch)*.32);line-height:1.05;white-space:normal;word-break:break-word}
.ms-cell,.ms-slot-cell{text-align:center}

/* Hint sample: a native-verified example sentence, shown for a few seconds. */
.ms-hintcard{
  position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:8;max-width:88vw;
  background:var(--ms-slot-active-bg);border-radius:14px;padding:10px 18px;text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,215,106,.5);
}
.ms-hintcard-in{animation:ms-banner .3s ease}
.ms-hintcard-fa{font-family:'Vazirmatn',sans-serif;font-size:20px;font-weight:800;display:flex;flex-direction:row-reverse;gap:8px;justify-content:center;flex-wrap:wrap}
.ms-hintword-have{color:var(--ms-txt-dim);opacity:.6}                        /* already in your slot */
.ms-hintword-add{color:#ffd76a;text-shadow:0 0 8px rgba(255,215,106,.5)}     /* what to add next */
.ms-hintcard-en{font-size:12px;color:var(--ms-txt-dim);margin-top:5px}
/* The slot a hint refers to briefly glows gold. */
.ms-slot-hintflash{animation:ms-hintflash 1s ease}
@keyframes ms-hintflash{0%,100%{box-shadow:inset 0 0 0 1px rgba(140,190,255,.22)}50%{box-shadow:inset 0 0 0 2px #ffd76a, 0 0 12px rgba(255,215,106,.5)}}

/* ── Pre-game / high-score page (Word-It style: neon title + glow Play) ───────── */
.ms-pre{display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 16px;width:min(92vw,420px)}
.ms-pre-title{font-size:36px;font-weight:800;color:var(--ms-on-bg);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.ms-pre-fa{font-family:'Vazirmatn',sans-serif;font-size:18px;color:#2b5aa8;opacity:.95}
.ms-pre-sub{font-size:14px;color:#41547d;text-align:center;margin:6px 0 12px}
.ms-pre .ms-hs{width:100%;max-width:280px}
.ms-pre .ms-hs li{color:var(--ms-on-bg)}
.ms-hs-empty{color:#7f8db0;text-align:center;list-style:none}
.ms-pre-play{
  margin-top:18px;padding:14px 48px;font-size:20px;font-weight:800;color:#05321d;border:none;border-radius:16px;
  background:linear-gradient(180deg,var(--ms-play-1),var(--ms-play-2));
  box-shadow:0 0 18px rgba(34,214,126,.6), inset 0 1px 0 rgba(255,255,255,.45);cursor:pointer;
}
.ms-pre-play:active{transform:translateY(1px)}

.ms-hs-title{font-size:13px;color:#b8860b;margin-bottom:4px}
.ms-hs{list-style:none;padding:0;margin:0 0 14px;font-variant-numeric:tabular-nums}
.ms-hs li{font-size:14px;padding:2px 0}
.ms-hs li span{color:#5b6c92;font-size:12px;margin-inline-start:6px}
/* Shared high-score board (canvas template) embedded in the HTML screens. */
.ms-hs-canvas{display:block;width:100%;max-width:300px;margin:2px auto 12px}

/* Game-over modal (white card on the dark screen). */
.ms-over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,9,26,.66);z-index:10}
/* Heart-lost reset: a SEE-THROUGH banner with a 3s countdown before the board resets. */
.ms-over-reset{background:rgba(6,9,26,.34);backdrop-filter:blur(1px)}
.ms-reset{display:flex;flex-direction:column;align-items:center;gap:6px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.ms-reset-heart{font-size:42px}
.ms-reset-sub{font-size:16px;font-weight:800;color:var(--ms-txt)}
.ms-reset-num{font-size:66px;font-weight:800;color:var(--ms-neon);text-shadow:0 0 18px rgba(124,243,255,.7);line-height:1}
.ms-over-card{background:#fff;border-radius:18px;padding:22px 26px;text-align:center;min-width:220px}
.ms-over-title{font-size:20px;font-weight:800;color:var(--ink)}
.ms-over-sub{font-size:13px;color:#7a8699;margin:5px 0 12px}
.ms-over-score{font-size:34px;font-weight:800;color:var(--turquoise,#1f9e95);margin:4px 0 2px}
.ms-over-bonus{font-size:13px;font-weight:700;color:#2b7a4b;margin:2px 0 4px}
.ms-over-bonus small{color:#7a8699;font-weight:600}
.ms-over-statline{font-size:12px;color:#5b6c92;margin:0 0 10px}
.ms-over-statline small{color:#8a94a6}
.ms-over-btns{display:flex;gap:10px;justify-content:center}
.ms-btn{border:none;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer;background:#eee}
.ms-btn.primary{background:var(--turquoise,#1f9e95);color:#fff}