@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@700;800&display=swap');

:root {
  --ink: #202b2c;
  --muted: #71807d;
  --paper: #fbf8f1;
  --panel: #ffffff;
  --line: #dedfd9;
  --green-dark: #174f45;
  --red: #e65e54;
  --blue: #4386c8;
  --yellow: #efbd48;
  --green: #54ad7b;
  --shadow: 0 16px 45px rgba(35, 54, 50, .09);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 5% 30%, rgba(239,189,72,.08), transparent 22rem),
    radial-gradient(circle at 95% 10%, rgba(84,173,123,.08), transparent 25rem),
    var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  min-height: 100vh;
}
button, select { font: inherit; }
button { color: inherit; }

.page-shell { width: min(1420px, calc(100% - 48px)); margin: 0 auto; }
.topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(32,43,44,.1); }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); font-family: Manrope, sans-serif; font-size: 19px; letter-spacing: -.5px; }
.brand b { color: var(--green-dark); }
.brand-mark { width: 38px; height: 38px; position: relative; display: block; transform: rotate(45deg); overflow: hidden; border-radius: 7px; box-shadow: 0 4px 12px rgba(23,79,69,.15); border: 2px solid #fff; }
.brand-mark i { position: absolute; width: 50%; height: 50%; }
.m-red { background: var(--red); left:0; top:0; }.m-blue { background:var(--blue);right:0;top:0}.m-yellow{background:var(--yellow);left:0;bottom:0}.m-green{background:var(--green);right:0;bottom:0}
.header-actions { display: flex; align-items: center; gap: 12px; }
.score-pill { height: 42px; display: flex; gap: 9px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 0 9px 0 14px; font-size: 13px; font-weight: 600; box-shadow: 0 3px 10px rgba(40,50,48,.04); }
.score-pill strong { background: #ecf5ef; color: var(--green-dark); border-radius: 50%; min-width: 27px; height: 27px; display:grid; place-items:center; }
.trophy { color: var(--yellow); font-size: 13px; }
.visualization-button { height:42px; padding:0 14px; border:1px solid var(--line); border-radius:22px; background:#fff; color:#53625e; font-size:11px; font-weight:800; cursor:pointer; }
.visualization-button span { margin-right:5px; color:var(--green); }.visualization-button:hover { border-color:#91a99f; color:var(--green-dark); }
.icon-button { width: 42px; height: 42px; border-radius: 50%; background: transparent; border: 1px solid var(--line); font-weight: 700; cursor: pointer; }
.icon-button:hover { background:#fff; }

main { padding:0 0 65px; }
.intro { margin-bottom:9px; }
.eyebrow, .section-kicker { margin: 0 0 8px; color: #4b8b71; letter-spacing: 1.7px; font-size: 11px; font-weight: 800; }
h2 { font-family: Manrope, sans-serif; margin:0; letter-spacing:-1.4px; }
.subtitle { color:var(--muted); font-size:16px; margin:0; }
.controls-card { display:flex; align-items:end; justify-content:flex-end; gap:10px; flex-shrink:0; flex-wrap:wrap; }
.size-control { display:flex; align-items:center; gap:9px; }
.controls-card label { display:block; font-size:11px; font-weight:800; letter-spacing:.7px; color:var(--muted); white-space:nowrap; }
.select-wrap select { height:47px; min-width:128px; border:1px solid var(--line); border-radius:10px; background:#fff; padding:0 38px 0 14px; font-weight:600; color:var(--ink); cursor:pointer; }
.primary-button { border:0; border-radius:10px; background:var(--green-dark); color:#fff; min-height:47px; padding:0 20px; font-weight:700; cursor:pointer; box-shadow:0 7px 16px rgba(23,79,69,.18); transition:.18s ease; }
.primary-button:hover { background:#0f4038; transform:translateY(-1px); }
.primary-button:disabled { opacity:.65; cursor:wait; transform:none; }
#newSetButton { min-width:190px; }
.primary-button span { margin-right:7px; font-size:18px; }
.design-button { min-height:47px; padding:0 16px; border:1px solid #9fb6ad; border-radius:10px; background:#fff; color:var(--green-dark); font-weight:800; cursor:pointer; transition:.18s ease; }
.design-button:hover { border-color:var(--green-dark); background:#edf5f0; }
.design-button.active { border-color:#d69f35; background:#fff3d4; color:#795312; box-shadow:0 0 0 3px rgba(239,189,72,.16); }
.design-button span { margin-right:6px; color:var(--yellow); }

.file-toolbar { display:flex; align-items:center; gap:18px; padding:12px 15px; margin-bottom:22px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.7); }
.toolbar-new-button { border:0; border-radius:8px; padding:8px 12px; background:var(--green-dark); color:#fff; font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap; }.toolbar-new-button:hover { background:#0f4038; }.toolbar-new-button span { margin-right:4px; font-size:14px; }
.file-group { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.file-group > span { color:var(--muted); font-size:9px; letter-spacing:1.2px; font-weight:800; margin-right:5px; }
.file-group button { border:0; border-radius:7px; background:transparent; padding:8px 10px; color:#4f605c; font-size:11px; font-weight:700; cursor:pointer; }
.file-group button:hover { background:#eaf2ed; color:var(--green-dark); }
.file-divider { width:1px; align-self:stretch; background:var(--line); }

.game-layout { display:grid; grid-template-columns: 310px minmax(0, 1fr); gap:24px; align-items:start; }
.palette-panel, .board-panel { background:rgba(255,255,255,.91); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.palette-panel { padding:25px 22px 20px; max-height: 710px; display:flex; flex-direction:column; }
.panel-title-row { display:flex; align-items:start; justify-content:space-between; }
.panel-title-row h2 { font-size:24px; letter-spacing:-.7px; }
.component-name { margin:5px 0 0; max-width:190px; color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.component-name strong { color:var(--green-dark); font-weight:800; }
.count-badge { font-size:10px; font-weight:800; color:var(--green-dark); background:#ecf5ef; border-radius:10px; padding:6px 8px; }
.panel-copy { color:var(--muted); font-size:12px; line-height:1.55; margin:9px 0 17px; }
.palette { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; overflow-y:auto; padding:2px 5px 10px 2px; min-height:120px; scrollbar-width:thin; scrollbar-color:#cbd5d0 transparent; }
.proto-card { appearance:none; border:1px solid #dfe2dd; background:#f8f8f5; aspect-ratio:1; border-radius:9px; padding:8px; cursor:grab; transition:.15s ease; position:relative; }
.proto-card:hover { border-color:#88aa9e; background:#fff; transform:translateY(-2px); box-shadow:0 6px 14px rgba(30,60,50,.1); }
.proto-card.selected { border-color:var(--green-dark); box-shadow:0 0 0 2px rgba(23,79,69,.18); background:#fff; }
.proto-card:active { cursor:grabbing; }
.palette.design-readonly .proto-card { cursor:not-allowed; }
.palette.design-readonly .proto-card:hover { transform:none; border-color:#dfe2dd; box-shadow:none; background:#f8f8f5; }
.proto-card svg, .tile svg { width:100%; height:100%; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.12)); }
.proto-index { position:absolute; right:4px; bottom:3px; width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.88); color:#67736f; font-size:8px; display:grid; place-items:center; font-weight:700; }
.empty-palette { grid-column:1/-1; min-height:155px; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px dashed #cfd7d1; border-radius:10px; color:var(--muted); }
.empty-palette b { color:#52615d; font-size:12px; margin-bottom:5px; }.empty-palette span { font-size:10px; line-height:1.5; }
.palette.drop-remove { border-radius:10px; outline:2px dashed var(--red); outline-offset:3px; background:#fff4f2; }
.palette-tip { border-top:1px solid #e7e7e2; margin-top:9px; padding-top:15px; font-size:10px; color:var(--muted); text-align:center; }
.palette-tip span { font-size:15px; color:var(--green-dark); font-weight:700; vertical-align:-1px; margin-right:4px; }

.board-panel { overflow:hidden; }
.board-toolbar { height:67px; border-bottom:1px solid #e7e7e2; padding:0 25px; display:flex; align-items:center; gap:17px; }
.stat { min-width:80px; }
.board-name-stat { min-width:115px; max-width:170px; padding-right:16px; border-right:1px solid #e2e5e1; }
.board-name-stat strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--green-dark); }
.mode-stat { min-width:105px; padding-right:16px; border-right:1px solid #e2e5e1; }.mode-stat strong { display:block; white-space:nowrap; font-size:12px; }.mode-stat .mode-free { color:#60706b; }.mode-stat .mode-design { color:#9a6812; }.mode-stat .mode-competing { color:#9a6800; }
.stat span { display:block; color:var(--muted); font-size:9px; letter-spacing:1.2px; font-weight:800; margin-bottom:3px; }
.stat strong { font-size:14px; }
.stat-right { text-align:right; min-width:55px; }
.progress-track { flex:1; height:5px; border-radius:3px; background:#ebeee9; overflow:hidden; }
.progress-track div { height:100%; width:0; background:var(--green); transition:width .25s ease; border-radius:3px; }
.board-wrap { min-height:550px; padding:27px; display:flex; justify-content:center; align-items:center; background-color:#fafbf8; background-image:radial-gradient(#d7ddd7 0.7px, transparent .7px); background-size:15px 15px; }
.board { --n:5; width:min(100%, 522px); aspect-ratio:1; display:grid; grid-template-columns:repeat(var(--n),1fr); grid-template-rows:repeat(var(--n),1fr); gap:var(--board-gap, 3px); padding:var(--board-padding, 5px); background:#cad3cd; border:1px solid #b8c3bc; border-radius:10px; box-shadow:0 12px 25px rgba(39,57,49,.13); }
.cell { min-width:0; min-height:0; border:0; border-radius:3px; background:rgba(255,255,255,.82); position:relative; padding:var(--cell-padding, 4px); cursor:pointer; transition:background .15s, box-shadow .15s; overflow:hidden; }
.cell:hover { background:#fff; box-shadow:inset 0 0 0 2px rgba(23,79,69,.28); z-index:2; }
.cell.drag-over { background:#e6f2eb; box-shadow:inset 0 0 0 3px var(--green); }
.cell .tile { width:100%; height:100%; cursor:grab; }
.board-tile-index { position:absolute; right:2px; bottom:2px; z-index:4; min-width:var(--tile-number-size, 17px); height:var(--tile-number-size, 17px); padding:0 2px; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.9); color:#3f4d49; font:800 var(--tile-number-font, 10px)/1 "DM Sans",sans-serif; box-shadow:0 1px 3px rgba(0,0,0,.14); pointer-events:none; }
.side-hint { position:absolute; z-index:3; display:block; max-width:92%; padding:1px 3px; overflow:hidden; color:#25322f; background:rgba(255,255,255,.9); border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.14); font:800 var(--hint-font, 7px)/1.15 "DM Sans",sans-serif; letter-spacing:-.2px; white-space:nowrap; pointer-events:none; }
.hint-top { top:3px; left:50%; transform:translateX(-50%); }
.hint-right { right:3px; top:50%; transform:translate(38%,-50%) rotate(90deg); }
.hint-bottom { bottom:3px; left:50%; transform:translateX(-50%); }
.hint-left { left:3px; top:50%; transform:translate(-38%,-50%) rotate(-90deg); }
.cell.conflict { z-index:3; box-shadow:inset 0 0 0 3px #d83c3c; }
.cell.conflict::after { content:"!"; position:absolute; right:3px; top:3px; width:14px; height:14px; display:grid; place-items:center; background:#d83c3c; color:#fff; font:800 9px sans-serif; border-radius:50%; }
.cell.hint-empty::before { content:"+"; position:absolute; inset:0; display:grid; place-items:center; color:#c8ceca; font-size:18px; }
.cell.impossible-empty { background:#fff2f0; }
.cell.impossible-empty::before { content:"×"; z-index:2; color:#d94f47; font:800 clamp(20px, 3vw, 34px)/1 Manrope,sans-serif; text-shadow:0 1px 0 #fff; }
.cell.impossible-empty:hover { background:#ffe9e6; box-shadow:inset 0 0 0 2px rgba(217,79,71,.35); }
.cell.forced-empty { background:#eff9f2; }
.cell.forced-empty::before { content:""; }
.forced-tile-number { position:absolute; inset:0; z-index:2; display:grid; place-items:center; color:#238451; font:800 clamp(10px, 2vw, 20px)/1 Manrope,sans-serif; text-shadow:0 1px 0 #fff; pointer-events:none; }
.cell.forced-empty:hover { background:#e4f5e9; box-shadow:inset 0 0 0 2px rgba(35,132,81,.3); }
.board.solving { pointer-events:none; opacity:.72; transition:opacity .2s ease; }
.board.no-tile-gaps .cell { border-radius:0; }
.board.no-tile-gaps .tile svg { filter:none; }
.board.design-mode .cell { cursor:crosshair; }
.board.design-mode .cell:hover { box-shadow:inset 0 0 0 2px rgba(239,189,72,.8); }
.board.design-mode .tile { cursor:crosshair; }
.board-footer { min-height:58px; padding:0 25px; border-top:1px solid #e7e7e2; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.footer-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-shrink:0; flex-wrap:wrap; }
.hint-toggle { display:flex; align-items:center; gap:7px; color:#596963; font-size:11px; font-weight:700; cursor:pointer; user-select:none; }
.hint-toggle input { position:absolute; opacity:0; pointer-events:none; }
.hint-toggle span { width:30px; height:17px; padding:2px; display:block; border-radius:10px; background:#cdd4d0; transition:.18s ease; }
.hint-toggle span::after { content:""; display:block; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.18s ease; }
.hint-toggle input:checked + span { background:var(--green-dark); }
.hint-toggle input:checked + span::after { transform:translateX(13px); }
.hint-toggle input:focus-visible + span { outline:2px solid var(--blue); outline-offset:2px; }
.game-status { margin:0; color:var(--muted); font-size:11px; }
.status-dot { display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; margin-right:7px; }
.game-status.bad { color:#b3443e; }.game-status.bad .status-dot { background:var(--red); }
.history-button { border:1px solid #d7dcd8; border-radius:7px; background:#fff; color:#52635e; cursor:pointer; padding:7px 9px; font-size:10px; font-weight:700; white-space:nowrap; }.history-button:hover:not(:disabled) { border-color:#8eaa9f; color:var(--green-dark); background:#f3f8f5; }.history-button:disabled { opacity:.38; cursor:not-allowed; }
.solution-button { border:1px solid #d2b15f; border-radius:7px; background:#fff7df; color:#6f5314; cursor:pointer; padding:7px 10px; font-size:10px; font-weight:800; white-space:nowrap; }
.solution-button:hover:not(:disabled) { border-color:#a77b16; background:#ffefbd; }
.solution-button:disabled { opacity:.42; cursor:not-allowed; filter:grayscale(.7); }
.solve-button { border:1px solid #8eaa9f; border-radius:7px; background:#edf5f0; color:var(--green-dark); cursor:pointer; padding:7px 10px; font-size:10px; font-weight:800; white-space:nowrap; }
.solve-button:hover { border-color:var(--green-dark); background:#e2efe7; }
.solve-button:disabled { opacity:.55; cursor:wait; }
.clear-board-button { border:1px solid #d7dcd8; border-radius:7px; background:#fff; color:#65736f; cursor:pointer; padding:7px 10px; font-size:10px; font-weight:700; }
.clear-board-button:hover { border-color:#bb7771; color:#a5413b; background:#fff7f6; }
.clear-board-button:disabled { opacity:.45; cursor:not-allowed; }
.text-button { border:0; background:transparent; color:#65736f; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:8px; font-size:11px; font-weight:600; }
.text-button:hover { color:var(--green-dark); }
.memo-panel { border-top:1px solid #e7e7e2; padding:17px 25px 21px; background:#fff; }
.memo-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.memo-heading div { display:flex; align-items:baseline; gap:9px; }.memo-heading span { color:var(--muted); font-size:8px; letter-spacing:1.2px; font-weight:800; }.memo-heading strong { font-family:Manrope,sans-serif; font-size:14px; }
.memo-heading button { border:0; background:transparent; color:#7a8582; text-decoration:underline; text-underline-offset:3px; font-size:9px; font-weight:700; cursor:pointer; }
.memo-heading button:hover { color:#a5413b; }
.memo-panel textarea { display:block; width:100%; resize:vertical; min-height:72px; max-height:220px; border:1px solid #dfe2dd; border-radius:9px; padding:11px 12px; color:var(--ink); background:#fbfcfa; font:12px/1.5 "DM Sans",sans-serif; outline:none; }
.memo-panel textarea:focus { border-color:#7da491; box-shadow:0 0 0 3px rgba(84,173,123,.12); background:#fff; }

.dialog { width:min(430px, calc(100% - 35px)); border:0; border-radius:18px; padding:36px; text-align:center; box-shadow:0 25px 80px rgba(20,40,34,.25); color:var(--ink); }
.dialog::backdrop { background:rgba(20,35,31,.55); backdrop-filter:blur(3px); }
.dialog-close { position:absolute; right:14px; top:12px; border:0; background:transparent; color:#7a8582; font-size:25px; cursor:pointer; }
.dialog-icon { width:48px; height:48px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; color:var(--yellow); background:#fff5d9; }
.dialog h2 { font-size:29px; margin-bottom:12px; }
.dialog ol { list-style:none; margin:24px 0; padding:0; text-align:left; }
.dialog li { display:flex; gap:13px; margin:15px 0; align-items:start; }
.dialog li > span { width:25px; height:25px; flex:0 0 25px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--green-dark); font-size:11px; font-weight:700; }
.dialog li p { font-size:13px; line-height:1.45; margin:0; color:var(--muted); }.dialog li b { color:var(--ink); }
.dialog-action { width:100%; }
.new-puzzle-dialog { width:min(530px, calc(100% - 35px)); text-align:left; }.new-puzzle-dialog h2 { margin-bottom:6px; }.new-puzzle-copy { margin:0 0 22px; color:var(--muted); font-size:12px; line-height:1.5; }.new-puzzle-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }.new-puzzle-options label > span { display:block; margin:0 0 6px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }.new-puzzle-options select { width:100%; height:43px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-weight:700; }.new-puzzle-actions { display:grid; grid-template-columns:1.15fr 1fr; gap:10px; }.new-puzzle-actions button { width:100%; min-width:0!important; }
.help-dialog { max-height:calc(100vh - 30px); overflow:auto; }
.about-dialog { width:min(580px, calc(100% - 35px)); max-height:calc(100vh - 30px); overflow:auto; text-align:left; }.about-dialog h2 { margin-bottom:8px; }.about-dialog h3 { margin:0 0 5px; font:800 16px Manrope,sans-serif; }.about-copy,.feedback-copy { color:var(--muted); font-size:12px; line-height:1.5; }.about-copy { margin:0; }.about-copy b { color:var(--ink); }.feedback-copy { margin:0 0 16px; }.about-divider { height:1px; margin:22px 0; background:var(--line); }.feedback-form { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.feedback-form label > span { display:block; margin-bottom:5px; color:#53625e; font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }.feedback-form label small { color:var(--muted); font-size:8px; font-weight:600; text-transform:none; }.feedback-form input,.feedback-form select,.feedback-form textarea { width:100%; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); outline:none; font:12px "DM Sans",sans-serif; }.feedback-form input,.feedback-form select { height:39px; padding:0 10px; }.feedback-form textarea { min-height:95px; padding:10px; resize:vertical; line-height:1.45; }.feedback-form input:focus,.feedback-form select:focus,.feedback-form textarea:focus { border-color:#7da491; box-shadow:0 0 0 3px rgba(84,173,123,.12); }.feedback-message,.feedback-challenge,.feedback-status,.feedback-submit { grid-column:1/-1; }.feedback-trap { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }.feedback-challenge { display:grid; grid-template-columns:1fr auto; align-items:end; gap:8px; }.feedback-challenge button { height:39px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:#f5f7f4; color:#53625e; font-size:10px; font-weight:700; cursor:pointer; }.feedback-status { min-height:16px; margin:0; color:var(--muted); font-size:10px; }.feedback-status.bad { color:#b3443e; }.feedback-status.good { color:var(--green-dark); font-weight:700; }.feedback-submit { width:100%; }
.welcome-copy { margin:0 auto 24px; color:var(--muted); font-size:13px; line-height:1.5; }.welcome-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.welcome-actions button { min-height:47px; border-radius:10px; font-weight:700; cursor:pointer; }.welcome-free-button { border:1px solid var(--line); background:#fff; color:var(--green-dark); }.welcome-free-button:hover { border-color:var(--green-dark); background:#f3f8f5; }
.visualization-dialog { width:min(560px, calc(100% - 35px)); text-align:left; }
.visualization-dialog h2 { margin-bottom:5px; }.visualization-copy { margin:0 0 20px; color:var(--muted); font-size:12px; }
.visualization-options { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:0 0 18px; padding:0; border:0; }
.visualization-options label { position:relative; min-width:0; padding:12px 9px 11px; border:1px solid var(--line); border-radius:10px; text-align:center; cursor:pointer; }
.visualization-options label:has(input:checked) { border-color:var(--green-dark); box-shadow:0 0 0 2px rgba(23,79,69,.12); background:#f8fcf9; }
.visualization-options input { position:absolute; opacity:0; }.visualization-options b,.visualization-options small { display:block; }
.visualization-options b { margin-top:8px; font-size:11px; }.visualization-options small { margin-top:3px; color:var(--muted); font-size:8px; line-height:1.35; }
.mode-sample { position:relative; display:block; width:48px; height:48px; margin:auto; overflow:hidden; border:1px solid #cad1cc; border-radius:6px; background:#fff; }
.sample-triangles { background:conic-gradient(from 45deg,var(--blue) 0 25%,var(--yellow) 0 50%,var(--green) 0 75%,var(--red) 0); }
.sample-lines::before,.sample-lines::after { content:""; position:absolute; left:5px; right:5px; top:20px; height:7px; border-radius:5px; background:var(--blue); }.sample-lines::after { top:5px; bottom:5px; left:20px; width:7px; height:auto; background:var(--red); }
.sample-marks { display:flex; align-items:center; justify-content:center; gap:4px; }.sample-marks i { width:7px; height:18px; border:2px solid #425650; border-radius:2px; }.sample-marks i:nth-child(1),.sample-marks i:nth-child(3) { background:#425650; }
.sample-flow::before,.sample-flow::after { content:""; position:absolute; border-radius:50%; }
.sample-flow::before { left:20px; top:-3px; width:8px; height:54px; background:#303a36; }
.sample-flow::after { left:-3px; top:19px; width:54px; height:10px; background:#aeb8b2; box-shadow:0 0 0 3px #fff; }
.color-limit-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px; border:1px solid #e1e4df; border-radius:10px; background:#fafbf9; }
.color-limit-row b,.color-limit-row small { display:block; }.color-limit-row b { font-size:12px; }.color-limit-row small { margin-top:2px; color:var(--muted); font-size:9px; }
.color-limit-row select { height:37px; padding:0 28px 0 10px; border:1px solid var(--line); border-radius:7px; background:#fff; font-weight:700; }
.color-swatches { display:flex; gap:7px; min-height:22px; margin:12px 2px 15px; }.color-swatches span { width:20px; height:20px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #c9ceca; }.color-swatch-r { background:#e65e54; }.color-swatch-b { background:#4386c8; }.color-swatch-y { background:#efbd48; }.color-swatch-g { background:#54ad7b; }.color-swatch-o { background:#e8873c; }.color-swatch-p { background:#9169c6; }.color-swatch-c { background:#32aeb9; }
.visualization-check { display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:11px 13px; border:1px solid #e1e4df; border-radius:10px; cursor:pointer; }
.visualization-check input { width:17px; height:17px; accent-color:var(--green-dark); }.visualization-check b,.visualization-check small { display:block; }.visualization-check b { font-size:11px; }.visualization-check small { margin-top:2px; color:var(--muted); font-size:9px; }
.library-dialog { width:min(520px, calc(100% - 35px)); text-align:left; }
.library-dialog h2 { margin-bottom:5px; }.library-copy { color:var(--muted); font-size:12px; margin:0 0 20px; }
.library-list { max-height:360px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.library-empty { padding:35px 15px; text-align:center; border:1px dashed var(--line); border-radius:10px; color:var(--muted); font-size:12px; }
.library-item { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:10px; padding:11px 12px; }
.library-item-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:#edf4ef; color:var(--green-dark); }
.library-item-info { flex:1; min-width:0; }.library-item-info b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.library-item-info span { color:var(--muted); font-size:10px; }
.puzzle-origin { display:inline-block!important; margin-right:6px; padding:2px 5px; border-radius:5px; font-size:7px!important; font-weight:800; letter-spacing:.7px; vertical-align:1px; }.puzzle-origin.global { color:#72520b!important; background:#fff0bd; }.puzzle-origin.local { color:#315f50!important; background:#e4f1e9; }
.library-item.global-item { border-color:#e4cd89; background:#fffdf5; }
.library-item button { border:0; border-radius:7px; padding:7px 10px; cursor:pointer; font-size:10px; font-weight:700; }
.library-load { background:var(--green-dark); color:#fff; }.library-delete { background:#f7eeee; color:#a34d47; }
.leaderboard-content { max-height:430px; overflow:auto; display:flex; flex-direction:column; gap:14px; }
.leaderboard-section { border:1px solid var(--line); border-radius:10px; overflow:hidden; }.leaderboard-section h3 { display:flex; justify-content:space-between; margin:0; padding:10px 12px; background:#f6f8f5; font:800 12px Manrope,sans-serif; }.leaderboard-section ol { margin:0; padding:5px 12px 8px; list-style:none; counter-reset:rank; }.leaderboard-dialog .leaderboard-section li { counter-increment:rank; display:grid; grid-template-columns:25px 1fr auto; align-items:center; gap:7px; margin:0; padding:6px 0; border-bottom:1px solid #edf0ec; font-size:10px; }.leaderboard-dialog .leaderboard-section li:last-child { border:0; }.leaderboard-section li::before { content:counter(rank); color:#9a7830; font-weight:800; }.leaderboard-dialog .leaderboard-section li > span { display:block; width:auto; height:auto; color:var(--ink); background:transparent; border-radius:0; font-size:10px; font-weight:400; }.leaderboard-dialog .leaderboard-section li > .leaderboard-time { color:var(--green-dark); font-variant-numeric:tabular-nums; font-weight:800; }.leaderboard-empty { padding:11px; color:var(--muted); font-size:10px; text-align:center; }
.win-dialog > p:not(.eyebrow) { color:var(--muted); font-size:14px; }
.win-burst { color:var(--yellow); font-size:48px; animation:pop .55s ease; }
.point-earned { margin:22px auto; background:#ecf5ef; color:var(--green-dark); font-weight:800; padding:13px; border-radius:10px; }
.point-earned span { color:var(--yellow); margin-right:5px; }
.dialog-review { margin-top:9px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); background:#233b35; color:#fff; padding:11px 18px; border-radius:8px; font-size:12px; opacity:0; pointer-events:none; transition:.2s ease; z-index:30; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.toast.show { opacity:1; transform:translate(-50%, 0); }
@keyframes pop { 0%{transform:scale(.2) rotate(-30deg);opacity:0} 70%{transform:scale(1.2) rotate(5deg)} 100%{transform:scale(1)} }

@media (max-width: 900px) {
  .page-shell { width:min(100% - 28px, 700px); }
  main { padding-top:0; }
  .intro { margin-bottom:9px; }
  .controls-card { width:100%; }.size-control { flex:1; }.select-wrap { flex:1; }.select-wrap select { width:100%; }
  .file-toolbar { align-items:flex-start; }.file-divider { display:none; }
  .game-layout { grid-template-columns:1fr; }
  .palette-panel { max-height:none; }
  .palette { display:flex; overflow-x:auto; overflow-y:hidden; min-height:95px; }
  .proto-card { flex:0 0 78px; }
  .board-wrap { min-height:auto; }
}
@media (max-width: 520px) {
  .page-shell { width:100%; }
  .topbar { height:70px; padding:0 10px; }.header-actions { gap:6px; }.brand { gap:7px; }.brand > span:last-child { display:none; }.score-pill > span:not(.trophy) { display:none; }.visualization-button { width:42px; padding:0; font-size:0; }.visualization-button span { margin:0; font-size:16px; }
  main { padding:0 12px 35px; }
  .subtitle { font-size:14px; }
  .intro { gap:32px; }
  .file-toolbar { flex-direction:column; gap:6px; }.file-group > span { width:100%; }.file-group button { padding:7px 8px; }
  .primary-button { flex:1; white-space:nowrap; }.new-puzzle-options,.new-puzzle-actions { grid-template-columns:1fr; }
  .palette-panel { padding:20px 16px 15px; }
  .board-wrap { padding:13px 8px; }
  .board { gap:var(--board-gap, 2px); padding:var(--board-padding, 3px); }
  .cell { padding:var(--cell-padding, 2px); }
  .board-toolbar, .board-footer { padding-left:14px; padding-right:14px; }
  .board-toolbar { gap:8px; }.board-name-stat { min-width:78px; max-width:90px; padding-right:6px; }.board-toolbar .mode-stat { min-width:70px; padding-right:6px; }.board-toolbar .progress-stat { min-width:55px; }.board-toolbar .stat-right { min-width:45px; }
  .game-status { max-width:48%; }
  .footer-actions { gap:2px; }.hint-toggle { font-size:10px; gap:5px; }
  .welcome-actions,.feedback-form { grid-template-columns:1fr; }.feedback-challenge { grid-template-columns:1fr; }.feedback-challenge button { width:100%; }
  .visualization-options { grid-template-columns:1fr; }.visualization-options label { display:grid; grid-template-columns:48px 1fr; column-gap:10px; text-align:left; }.visualization-options .mode-sample { grid-row:1/3; }.visualization-options b { margin-top:7px; }
}