/* Kambana OS - Sudoku */
.app-sudoku {
  --su-line: color-mix(in srgb, var(--text) 16%, transparent); --su-thick: color-mix(in srgb, var(--text) 55%, transparent);
  --su-cell: var(--surface); --su-peer: rgba(var(--accent-rgb), .08); --su-same: rgba(var(--accent-rgb), .26); --su-sel: rgba(var(--accent-rgb), .38);
  --su-given: var(--text); --su-user: #3b6fe0; --su-wrong: #e5484d; --su-cs: 50px;
  display: flex; flex-direction: column; background: var(--surface-2); outline: none; position: relative;
}
[data-theme="dark"] .app-sudoku { --su-user: #8db4ff; --su-wrong: #ff7a7e; --su-cell: var(--surface); --su-peer: rgba(var(--accent-rgb), .10); }
.app-sudoku .su-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.app-sudoku .su-head-l { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.app-sudoku .su-head-r { display: flex; align-items: center; gap: 2px; }
.app-sudoku .su-head-r .icon-btn.on { color: #e5484d; }
.app-sudoku .su-daily .ic { display: inline; }

.app-sudoku .su-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px 14px 14px; }
.app-sudoku .su-main.side { flex-direction: row; gap: 26px; }
.app-sudoku .su-left { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.app-sudoku .su-info { display: flex; align-items: center; gap: 12px; height: 34px; font-size: 13px; }
.app-sudoku .su-title { font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sudoku .su-mistakes { color: var(--text-2); font-variant-numeric: tabular-nums; }
.app-sudoku .su-mistakes.bad { color: var(--su-wrong); }
.app-sudoku .su-clock { display: flex; align-items: center; gap: 2px; padding-left: 10px; border-radius: 10px; background: var(--tile); }
.app-sudoku .su-time { font-family: var(--font-display); font-size: 15px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

.app-sudoku .su-board-wrap { position: relative; width: 450px; height: 450px; }
.app-sudoku .su-board {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px;
  padding: 2px; border-radius: 14px; background: var(--su-thick); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .55); overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: filter .25s, opacity .25s;
}
.app-sudoku .su-board.hidden { filter: blur(14px); opacity: .25; pointer-events: none; }
.app-sudoku .su-box { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1px; background: var(--su-line); }
.app-sudoku .su-box:nth-child(1) { border-top-left-radius: 12px; overflow: hidden; }
.app-sudoku .su-box:nth-child(3) { border-top-right-radius: 12px; overflow: hidden; }
.app-sudoku .su-box:nth-child(7) { border-bottom-left-radius: 12px; overflow: hidden; }
.app-sudoku .su-box:nth-child(9) { border-bottom-right-radius: 12px; overflow: hidden; }
.app-sudoku .su-cell {
  position: relative; display: grid; place-items: center; background: var(--su-cell); cursor: pointer;
  font-family: var(--font-display); font-size: calc(var(--su-cs) * .56); line-height: 1; transition: background .12s;
}
.app-sudoku .su-cell.peer { background: color-mix(in srgb, var(--su-cell), rgb(var(--accent-rgb)) 12%); }
.app-sudoku .su-cell.same { background: color-mix(in srgb, var(--su-cell), rgb(var(--accent-rgb)) 26%); }
.app-sudoku .su-cell.sel { background: color-mix(in srgb, var(--su-cell), rgb(var(--accent-rgb)) 40%); box-shadow: inset 0 0 0 2px rgb(var(--accent-rgb)); }
.app-sudoku .su-cell.given { color: var(--su-given); font-weight: 700; }
.app-sudoku .su-cell.user { color: var(--su-user); font-weight: 500; }
.app-sudoku .su-cell.wrong { color: var(--su-wrong); }
.app-sudoku .su-cell.wrong:not(.sel) { background: color-mix(in srgb, var(--su-cell), #e5484d 12%); }
.app-sudoku .su-notes { position: absolute; inset: 6%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.app-sudoku .su-notes i { font-style: normal; font-family: var(--font); font-weight: 600; font-size: calc(var(--su-cs) * .22); color: var(--text-2); display: grid; place-items: center; border-radius: 4px; }
.app-sudoku .su-notes i.hl { background: rgb(var(--accent-rgb)); color: var(--accent-fg); }
.app-sudoku .su-cell.intro .su-v { animation: su-intro .4s var(--ease) both; animation-delay: inherit; }
@keyframes su-intro { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: none; } }
.app-sudoku .su-cell.pop .su-v { animation: su-pop .25s var(--ease); }
@keyframes su-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.2); } 100% { transform: none; } }
.app-sudoku .su-cell.bad { animation: su-bad .35s; }
@keyframes su-bad { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
.app-sudoku .su-cell.hinted::after { content: ''; position: absolute; inset: 0; border-radius: 4px; box-shadow: inset 0 0 0 3px #facc15; animation: su-hint 1.2s var(--ease) both; pointer-events: none; }
@keyframes su-hint { 0% { opacity: 0; transform: scale(1.4); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.app-sudoku .su-cell.done-unit { animation: su-unit .7s var(--ease); }
@keyframes su-unit { 40% { background: color-mix(in srgb, var(--su-cell), #22c55e 35%); } }
.app-sudoku .su-board.won .su-cell { animation: su-won 1.1s var(--ease) both; }
@keyframes su-won { 0% { transform: none; } 30% { transform: scale(.82) rotate(-6deg); background: color-mix(in srgb, var(--su-cell), #f59e0b 45%); } 60% { transform: scale(1.06); background: color-mix(in srgb, var(--su-cell), #22c55e 30%); } 100% { transform: none; } }

.app-sudoku .su-paused, .app-sudoku .su-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-2); z-index: 5; }
.app-sudoku .su-paused { cursor: pointer; }
.app-sudoku .su-paused[hidden], .app-sudoku .su-loading[hidden], .app-sudoku .su-result[hidden] { display: none; }
.app-sudoku .su-paused b { font-size: 18px; color: var(--text); }
.app-sudoku .su-paused-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb), .8); }
.app-sudoku .su-result {
  position: absolute; left: 50%; top: 50%; z-index: 30; width: min(320px, 92%); transform: translate(-50%, -44%) scale(.94); opacity: 0;
  transition: transform .35s var(--ease), opacity .25s; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 18px 18px;
  border-radius: 20px; background: var(--glass-strong); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--glass-border);
}
.app-sudoku .su-result.show { transform: translate(-50%, -50%); opacity: 1; }
.app-sudoku .su-result-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #a5b4fc, #4f46e5); margin-bottom: 6px; }
.app-sudoku .su-result h2 { margin: 0; font-family: var(--font-display); font-size: 24px; }
.app-sudoku .su-result p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.app-sudoku .su-result .su-streak { color: var(--accent); font-weight: 700; }
.app-sudoku .su-result-actions { display: flex; gap: 8px; margin-top: 12px; }

.app-sudoku .su-controls { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 620px; }
.app-sudoku .su-main.side .su-controls { width: 260px; flex: 0 0 auto; }
.app-sudoku .su-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.app-sudoku .su-tool {
  position: relative; border: 0; background: none; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: 12px;
  font-size: 11.5px; font-weight: 600; transition: background .12s;
}
.app-sudoku .su-tool > span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: background .12s, color .12s; }
.app-sudoku .su-tool:hover > span { background: var(--tile-hover); }
.app-sudoku .su-tool:active > span { transform: scale(.94); }
.app-sudoku .su-tool small { color: var(--text-2); font-size: 11.5px; }
.app-sudoku .su-tool:disabled { opacity: .45; pointer-events: none; }
.app-sudoku .su-tool.on > span { background: var(--accent); color: var(--accent-fg); box-shadow: none; }
.app-sudoku .su-badge { position: absolute; top: 2px; left: calc(50% + 10px); font-style: normal; font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); }
.app-sudoku .su-tool.on .su-badge { background: #22c55e; color: #fff; }
.app-sudoku .su-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.app-sudoku .su-main.side .su-pad { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.app-sudoku .su-num {
  border: 0; border-radius: 12px; background: var(--surface); color: var(--su-user); box-shadow: inset 0 0 0 1px var(--line), 0 2px 0 var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0 4px; min-height: 56px; transition: background .12s, transform .08s;
}
.app-sudoku .su-main.side .su-num { min-height: 70px; }
.app-sudoku .su-num b { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1; }
.app-sudoku .su-num small { font-size: 10.5px; color: var(--text-3); height: 13px; margin-top: 2px; }
.app-sudoku .su-num:hover { background: var(--tile-hover); }
.app-sudoku .su-num:active { transform: translateY(1px) scale(.97); }
.app-sudoku .su-num.on { background: rgba(var(--accent-rgb), .18); }
.app-sudoku .su-num.complete { opacity: .3; }

.app-sudoku .su-sheet-layer { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .28); opacity: 0; transition: opacity .16s; }
.app-sudoku .su-sheet-layer.show { opacity: 1; }
.app-sudoku .su-sheet-layer[hidden] { display: none; }
.app-sudoku .su-sheet { width: min(520px, 100%); max-height: 100%; overflow: auto; padding: 18px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--line); }
.app-sudoku .su-sheet h2 { margin: 0 0 12px; font-size: 17px; }
.app-sudoku .su-stats { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.app-sudoku .su-stats-row { display: grid; grid-template-columns: 1.1fr .8fr 1.1fr .9fr .9fr .9fr; gap: 6px; padding: 8px 10px; border-radius: 9px; font-variant-numeric: tabular-nums; }
.app-sudoku .su-stats-row:nth-child(even):not(.head) { background: var(--surface-2); }
.app-sudoku .su-stats-row.head { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.app-sudoku .su-stats-row span:first-child { font-weight: 600; }
.app-sudoku .su-daily-line { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 13px; }
.app-sudoku .su-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.reduce-motion .app-sudoku .su-cell, .reduce-motion .app-sudoku .su-cell .su-v, .reduce-motion .app-sudoku .su-cell::after { animation: none !important; }

@media (max-width: 759px) {
  .app-sudoku .su-head { padding: 8px; }
  .app-sudoku .su-levels button { padding: 0 8px; }
  .app-sudoku .su-main { justify-content: flex-start; padding: 10px; gap: 10px; }
  .app-sudoku .su-pad { gap: 4px; }
  .app-sudoku .su-num { min-height: 50px; border-radius: 10px; }
  .app-sudoku .su-num b { font-size: 22px; }
  .app-sudoku .su-tool > span { width: 40px; height: 40px; }
  .app-sudoku .su-stats-row { grid-template-columns: 1.1fr .7fr 1.1fr .9fr .9fr .8fr; font-size: 12px; padding: 7px 4px; }
}