/* Kanguinn crossword — «الكلمات المتقاطعة» (13n). Rides on the Sudoku play screen: the page header, the game head
   (back + icons + ⋯ menu), the status row with the timer and pause, the paused glass, the done card, sheets and
   buttons all come from sudoku.css / games.css (body.sudoku.cw). This file adds the freeform board (paper squares
   on the page, nothing drawn where there is no letter), the clue bar, the Arabic keyboard and the clue lists.
   Accent: --g-cross (games.css / dark.css). The board runs right to left: x = 0 is the rightmost column. */
.cw{
  --cw-paper:var(--g-paper,#fff); --cw-grid:color-mix(in srgb,var(--ink,#111315) 82%,transparent); --cw-ink:var(--ink,#111315); --cw-num:var(--ink-2,#3A3D41);
  --cw-word:var(--g-cross-word,#DCE8F5); --cw-sel:var(--g-cross-sel,#B4CFEC); --cw-ring:var(--g-cross); --cw-mine:var(--g-cross-ink);
  --cw-bad:var(--g-danger,#A4442B); --cw-shadow:rgba(15,20,25,.16);
}
.cw-play{display:flex;flex-direction:column;align-items:center}
.cw-boardcol{display:flex;flex-direction:column;align-items:center;width:min(100%,496px)}
.cw-cluescol{width:min(100% - 8px,496px);margin-top:28px}

/* the board: one square per letter; --n = the longer side (at least 7) sets the square size */
.cw-board-wrap{--cell:min(calc((min(100vw,496px) - 20px) / var(--n,11)),50px);position:relative;width:calc(var(--cell) * var(--cols,11) + 2px);margin:4px auto 0;padding:1px}
.cw-board{display:grid;direction:rtl;grid-template-columns:repeat(var(--cols,11),var(--cell));grid-auto-rows:var(--cell);
  user-select:none;-webkit-user-select:none;filter:drop-shadow(0 8px 14px var(--cw-shadow)) drop-shadow(0 1px 1px var(--cw-shadow));transition:opacity .3s}
.cw-board.loading{min-height:calc(var(--cell) * 7);opacity:.4}
.cw-r{display:contents}
.cw-gap{display:block}
.cw-sq{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-radius:0;margin:0;
  background:var(--cw-paper);box-shadow:0 0 0 1px var(--cw-grid);color:var(--cw-ink);cursor:pointer;outline:none;
  font:600 calc(var(--cell) * .56)/1 var(--font,var(--ar));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .12s}
.cw-ch{display:block;padding-top:calc(var(--cell) * .06)}
.cw-n{position:absolute;top:2px;inset-inline-start:3px;font:600 max(9px,calc(var(--cell) * .24))/1 'Onest',var(--font,var(--ar));font-variant-numeric:tabular-nums lining-nums;color:var(--cw-num);pointer-events:none}
.cw-sq.word{background:var(--cw-word)}
.cw-sq.sel{background:var(--cw-sel);box-shadow:0 0 0 1px var(--cw-grid),inset 0 0 0 2px var(--cw-ring);z-index:1}
/* the selected square is the focused one: its ring is the focus mark (the site's offset outline would sit on the neighbours) */
html[data-look] .cw-board .cw-sq{border-radius:0!important}
html[data-look] .cw-board .cw-sq:focus-visible{outline:none}
html[data-look] .cw-board .cw-sq.sel:focus-visible{box-shadow:0 0 0 1px var(--cw-grid),inset 0 0 0 3px var(--cw-ring);z-index:2}
html[data-look] .cw-cb-nav{border-radius:50%!important}
/* checked right: the letter takes the accent ink; wrong: red letter + one thin slash; revealed: a small corner triangle */
.cw-sq.ok .cw-ch{color:var(--cw-mine)}
.cw-sq.wrong .cw-ch{color:var(--cw-bad)}
.cw-sq.wrong::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - .8px),color-mix(in srgb,var(--cw-bad) 70%,transparent) calc(50% - .8px),color-mix(in srgb,var(--cw-bad) 70%,transparent) calc(50% + .8px),transparent calc(50% + .8px))}
.cw-sq.rev .cw-ch{color:var(--cw-mine)}
.cw-sq.rev::before{content:'';position:absolute;bottom:0;inset-inline-end:0;width:calc(var(--cell) * .28);height:calc(var(--cell) * .28);background:var(--cw-ring);clip-path:polygon(0 100%,100% 100%,0 0);pointer-events:none}
.cw-board.done .cw-sq{cursor:default;animation:cwWave .8s cubic-bezier(.3,1.3,.5,1) both}
.cw-board.done .cw-sq:nth-child(3n+1){animation-delay:.05s}.cw-board.done .cw-sq:nth-child(3n+2){animation-delay:.1s}
@keyframes cwWave{40%{background:var(--cw-word)}}

/* paused: Sudoku's frosted glass; the letters and the clues can't be read through it */
.cw-board-wrap.paused .cw-board{filter:blur(3px)}
.cw-board-wrap.paused .cw-ch,.cw-board-wrap.paused .cw-n{color:transparent!important}
.cw-board-wrap .sd-paused{inset:-6px;border-radius:10px}
.cw-board-wrap .sd-done{inset:-10px;border-radius:12px}
.cw-list.off ol{filter:blur(5px);pointer-events:none;user-select:none}
.cw-keys.off,.cw-cluebar.off{opacity:.45;pointer-events:none}

/* the current clue, under the board; on phones it sticks to the top while the clue lists scroll by */
.cw-cluebar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;width:100%;min-height:56px;margin-top:16px;padding:2px;border-radius:10px;background:var(--g-cross-wash);color:var(--ink,var(--fg))}
.cw-cb-text{min-width:0;min-height:44px;margin:0;padding:6px 4px;border:0;background:none;color:inherit;font:400 15.5px/1.5 var(--font,var(--ar));text-align:center;cursor:default}
.cw-cb-text.can{cursor:pointer}
.cw-cb-text:focus-visible{outline:2px solid var(--ink,var(--fg));outline-offset:-2px}
#cwClueText{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cw-newout{display:inline-flex;min-height:32px;color:var(--g-cross-ink);font-weight:500}
.cw-cb-n{font-weight:700;color:var(--g-cross-ink);white-space:nowrap}
.cw-cb-n span{font-family:'Onest',var(--font,var(--ar))}
.cw-cb-dot{color:var(--ink-3,var(--muted))}
.cw-cb-nav{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink,var(--fg));cursor:pointer}
.cw-cb-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cw-cb-nav:hover{background:color-mix(in srgb,var(--g-cross) 14%,transparent)}
/* (the board column melts into the page column so the bar can stay stuck over the clue lists too) */
@media (max-width:999px){
  .cw-boardcol{display:contents}
  .cw-cluebar,.cw-keys{max-width:496px}
  .cw-boardcol > .sd-status{max-width:496px}
  .cw-cluebar{position:sticky;top:0;z-index:12;box-shadow:0 6px 16px -12px rgba(15,20,25,.35)}
}

/* the Arabic keyboard: three rows of 11 (the last: 9 letters + a wide delete), right to left like a phone's */
.cw-keys{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:10px}
.cw-krow{display:flex;gap:4px}
.cw-key{flex:1 1 0;min-width:0;height:48px;padding:0;border:0;border-radius:8px;background:var(--g-tile2);box-shadow:inset 0 -1px 0 var(--g-line2);color:var(--ink,var(--fg));
  font:500 21px/1 var(--font,var(--ar));cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .1s,transform .1s}
.cw-key.cw-del{flex-grow:2;display:grid;place-items:center}
.cw-del svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cw-key:active:not(:disabled){background:var(--g-sand);transform:translateY(1px)}
@media (hover:hover){.cw-key:hover:not(:disabled){background:color-mix(in srgb,var(--g-tile2) 85%,var(--ink,#000))}}
.cw-key:disabled{opacity:.4;cursor:default}
:is(.cw-key,.cw-cb-nav,.cw-clue):focus-visible{outline:2px solid var(--ink,var(--fg));outline-offset:2px}
@media (max-width:359px){.cw-key{height:44px;font-size:18px}.cw-krow{gap:3px}}

/* clue lists */
.cw-list h2{margin:0 0 6px;padding:0 4px 8px;border-bottom:1px solid var(--line);font:500 17px/1.3 var(--font,var(--ar))}
.cw-list + .cw-list{margin-top:22px}
.cw-list ol{margin:0;padding:0;list-style:none}
.cw-clue{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:baseline;gap:8px;width:100%;min-height:44px;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--ink-2,var(--fg));
  font:400 15px/1.55 var(--font,var(--ar));text-align:start;cursor:pointer;transition:background-color .12s}
.cw-clue b{font:600 14px/1.55 'Onest',var(--font,var(--ar));font-variant-numeric:tabular-nums;color:var(--ink,var(--fg))}
.cw-len{font:400 12px/1.55 'Onest',var(--font,var(--ar));color:var(--ink-3,var(--muted));white-space:nowrap}
@media (hover:hover){.cw-clue:hover{background:var(--g-tile2)}}
.cw-clue.cross{background:color-mix(in srgb,var(--g-cross-wash) 50%,transparent)}
.cw-clue.on{background:var(--g-cross-wash);color:var(--ink,var(--fg));box-shadow:inset -3px 0 0 var(--g-cross)}
.cw-clue.full:not(.on) span{color:var(--ink-3,var(--muted))}
.cw-foot{margin-top:20px;text-align:center}
.cw-next{margin:0;font-size:13.5px;color:var(--ink-2,var(--muted))}
.cw-archnote{margin:4px 0 0;font-size:13px;color:var(--ink-3,var(--muted))}
.cw-archnote[hidden]{display:none}
.cw-foot .sd-who{margin-top:2px}

/* phones: board, clue bar and every key fit on a 390×664 screen */
@media (max-width:599px){
  .cw .sd-status{height:36px;margin:2px 0}
  .cw-cluebar{min-height:48px;margin-top:10px}
  .cw-cb-text{font-size:15px}
  #cwClueText{-webkit-line-clamp:2}
  .cw-keys{margin-top:8px;gap:6px}
  .cw-key{height:44px}
  .cw-board-wrap{--cell:min(calc((100vw - 20px) / var(--n,11)), max(28px, calc((100svh - 360px) / var(--rows,9))), 50px)}
}
/* 720–999 the site header sticks too: the clue bar stops under it */
@media (min-width:720px) and (max-width:999px){.cw-cluebar{top:64px}}
/* tablets: clue lists side by side under the board */
@media (min-width:700px) and (max-width:999px){
  .cw-cluescol{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;width:min(100% - 32px,760px)}
  .cw-list + .cw-list{margin-top:0}
  .cw-foot{grid-column:1 / -1}
}
/* desktop: board column at the start (right), clues at the end, like Sudoku's board + controls */
@media (min-width:1000px){
  .cw-play{flex-direction:row;align-items:flex-start;justify-content:center;gap:48px;padding-top:4px}
  .cw-boardcol{width:520px;flex:none}
  .cw-board-wrap{--cell:min(calc(516px / var(--n,11)),56px)}
  .cw-key{height:52px;font-size:22px}
  .cw-krow{gap:6px}
  /* a real keyboard and a mouse: no on-screen keys; the clue bar sits above the board */
  .cw-boardcol > .sd-status{order:-2}
  .cw-cluebar{order:-1;margin:0 0 12px}
  /* the two lists share the window's height by their length; each scrolls inside itself when it must */
  .cw-cluescol{display:flex;flex-direction:column;width:380px;max-height:calc(100vh - 140px);margin-top:0;position:sticky;top:80px}
  .cw-list{display:flex;flex-direction:column;flex:0 1 auto;min-height:150px}
  .cw-list ol{flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .cw-foot{flex:none}
  .cw-clue{min-height:38px;padding:6px 10px}
  .cw-list + .cw-list{margin-top:18px}
  /* a list that scrolls fades out at its bottom edge instead of cutting a clue in half */
  .cw-list ol.scrolls{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)}
  .cw-list ol.scrolls.at-end{-webkit-mask-image:none;mask-image:none}
}

/* finished: no keyboard and no clue arrows; the clue bar carries the result */
.cw .sd-done-in .sd-k{color:var(--g-cross-ink)}
body.cw-done .cw-keys,body.cw-done .cw-cb-nav{visibility:hidden}
body.cw-done .cw-keys{display:none}
@media (hover:none){.cw-kbd-tip{display:none}}

/* the archive: Sudoku's month calendar, one mark per day */
.cw-arch .g-day.future .g-day-tile{box-shadow:none}
.cw-arch-sum{margin:0 0 14px;font-size:15px}
.cw-arch-sum b{font-family:'Onest',var(--font,var(--ar));font-weight:600}
.cw-day{text-decoration:none}
.cw-day .g-day-tile{display:grid;place-items:center;background:var(--g-tile2);box-shadow:inset 0 0 0 1px var(--g-line2)}
.cw-day.started .g-day-tile::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--g-cross)}
.cw-day.started .g-day-tile{box-shadow:inset 0 0 0 1px var(--g-cross)}
.cw-day.done .g-day-tile{background:var(--g-cross);box-shadow:none;color:#fff}
.cw-tick svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cw-day.today .g-day-n{font-weight:800;color:var(--ink,var(--fg))}
.cw-day.selected .g-day-tile{outline:2px solid var(--ink,var(--fg));outline-offset:2px}
@media (hover:hover){.cw-day:hover .g-day-tile{box-shadow:inset 0 0 0 1.5px var(--ink-2,var(--fg))}.cw-day.done:hover .g-day-tile{box-shadow:none;filter:brightness(1.08)}}
.cw-day:focus-visible{outline:2px solid var(--ink,var(--fg));outline-offset:2px;border-radius:6px}
.cw-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:13px;color:var(--ink-2,var(--muted))}
.cw-legend span{display:inline-flex;align-items:center;gap:6px}
.cw-lg{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--g-tile2);box-shadow:inset 0 0 0 1px var(--g-line2)}
.cw-lg.done{background:var(--g-cross);box-shadow:none}
.cw-lg.started{box-shadow:inset 0 0 0 1px var(--g-cross);background:radial-gradient(circle,var(--g-cross) 0 2.5px,var(--g-tile2) 3px)}

@media (prefers-reduced-motion:reduce){.cw-board.done .cw-sq{animation:none}.cw-sq,.cw-key,.cw-clue{transition:none}.cw-key:active:not(:disabled){transform:none}}

/* dark (the site's dark, or this page's own setting): the squares stay white paper with ink letters, like
   Sudoku's white board; the keyboard and the clue bar are light islands, the clue lists stay on the night */
html[data-look][data-theme="dark"] .cw{--cw-shadow:rgba(0,0,0,.55)}
html[data-look][data-theme="dark"] .cw-board{
  --cw-paper:var(--dk-board,#F4F4F2); --cw-grid:#2A2D31; --cw-ink:#111315; --cw-num:#3A3D41;
  --cw-word:#DCE8F5; --cw-sel:#B4CFEC; --cw-ring:#2F6FB0; --cw-mine:#24548A; --cw-bad:#A4442B}
html[data-look][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(.cw-keys,.cw-cluebar){
  --g-tile2:#F0F1F2; --g-line2:#DADCDF; --g-sand:#E9EAEC; --ink:#111315; --ink-3:#6B6F75; --fg:#111315;
  --g-cross:#2F6FB0; --g-cross-ink:#24548A; --g-cross-wash:#DCE8F5}
html[data-look][data-theme="dark"] .cw-clue.on{background:color-mix(in srgb,var(--g-cross) 26%,var(--bg));box-shadow:inset -3px 0 0 var(--g-cross)}
html[data-look][data-theme="dark"] .cw-clue.cross{background:color-mix(in srgb,var(--g-cross) 11%,transparent)}
html[data-look][data-theme="dark"] .cw-day.done .g-day-tile{background:#3F7FC0}
@media (min-width:1000px) and (hover:hover) and (pointer:fine){.cw-keys{display:none}}
/* phones and tablets: toasts drop from the top so they never sit on the keyboard while typing */
@media (max-width:999px){.cw .sd-toast{top:calc(10px + env(safe-area-inset-top,0px));bottom:auto}}

/* 14i: the ⋯ menu's actions at the pointer (right-click / long-press on a square): the same popover, fixed at the pointer */
.sd-menu.cw-ctx{position:fixed;inset:auto;z-index:60;width:200px}
.cw-sq{-webkit-touch-callout:none}
/* «بلّغ عن كلمة»: a quiet text button under the clues, and its sheet */
.cw-flagbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-top:6px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--ink-3,var(--muted));font:400 13.5px var(--font,var(--ar));cursor:pointer}
.cw-flagbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cw-flagbtn:hover{color:var(--ink,var(--fg));background:var(--g-tile2)}
.cw-flagbtn:focus-visible,.cw-fl-item:focus-visible,.cw-chip:focus-visible,.cw-fl-show:focus-visible{outline:2px solid var(--ink,var(--fg));outline-offset:2px}
.cw-fl-lede{margin:0 0 12px;font-size:15px;line-height:1.7}
.cw-fl-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.cw-fl-show{min-height:32px;padding:0 10px;border:1px solid var(--g-line2);border-radius:999px;background:none;color:var(--ink,var(--fg));font:500 13px var(--font,var(--ar));cursor:pointer;white-space:nowrap}
.cw-fl-show[aria-pressed="true"]{background:var(--g-tile2)}
.cw-fl-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.cw-fl-item{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:4px 10px;width:100%;min-height:48px;padding:8px 12px;border:1px solid var(--g-line2);border-radius:10px;background:var(--g-paper);color:var(--ink,var(--fg));font:400 14.5px/1.5 var(--font,var(--ar));text-align:start;cursor:pointer;transition:background-color .12s,border-color .12s}
@media (hover:hover){.cw-fl-item:hover:not(:disabled){border-color:var(--ink-3,var(--muted))}}
.cw-fl-item.on{border-color:var(--g-cross);background:color-mix(in srgb,var(--g-cross) 10%,var(--g-paper));box-shadow:inset 0 0 0 1px var(--g-cross)}
.cw-fl-item:disabled{cursor:default;opacity:.6}
.cw-fl-n{font-size:12.5px;color:var(--ink-3,var(--muted));white-space:nowrap}
.cw-fl-n span{font-family:'Onest',var(--font,var(--ar))}
.cw-fl-w{font-weight:600;white-space:nowrap}
.cw-fl-w.hid{display:inline-flex;gap:2px}
.cw-fl-w.hid i{display:inline-block;width:10px;height:13px;border-radius:2px;background:color-mix(in srgb,var(--ink,#111315) 16%,transparent)}
.cw-fl-c{min-width:0;color:var(--ink-2,var(--fg))}
.cw-fl-tick{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--g-line2);color:transparent}
.cw-fl-tick svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cw-fl-item.on .cw-fl-tick{background:var(--g-cross);box-shadow:none;color:#fff}
.cw-fl-sent{font-size:12px;color:var(--ink-3,var(--muted))}
.cw-fl-h{margin:18px 0 8px;font-size:14px;font-weight:500}
.cw-fl-chips{display:flex;flex-wrap:wrap;gap:8px}
.cw-chip{min-height:36px;padding:0 14px;border:1px solid var(--g-line2);border-radius:999px;background:none;color:var(--ink,var(--fg));font:400 14px var(--font,var(--ar));cursor:pointer}
.cw-chip.on{border-color:var(--g-cross);background:color-mix(in srgb,var(--g-cross) 16%,transparent);color:var(--ink,var(--fg));box-shadow:inset 0 0 0 1px var(--g-cross);font-weight:500}
.cw-fl-row{display:flex;justify-content:flex-start;margin-top:18px}
.cw-fl-send{min-width:120px}
.cw-fl-send:disabled{opacity:.45;cursor:default}
@media (max-width:420px){.cw-fl-item{grid-template-columns:auto minmax(0,1fr) auto}.cw-fl-n{grid-column:1 / -1}.cw-fl-c{grid-column:1 / 3}.cw-fl-tick,.cw-fl-sent{grid-row:2;grid-column:3}}
/* 14r (Aziz): «سلّم اللغز» on its own, under the clue bar, once the grid is full */
.cw-submit{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
.cw-submit[hidden]{display:none}
.cw-submit .g-btn{min-width:160px;min-height:46px;font-weight:700}
.cw-submit span{font-size:13.5px;color:var(--ink-3,var(--g-muted,#667))}