:root{
  color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:#061019;--surface:#0a1822;--surface-2:#102531;--line:#254757;
  --text:#eefaff;--muted:#9cb2bd;--accent:#62d9ff;--focus:#b9f2ff;
  --loop:#eafaff;--excluded:#829aa5;--warn:#ffc970;--danger:#ff8d8d;--ok:#73e0b0;
  --radius:18px;--shadow:0 18px 55px rgba(0,0,0,.34)
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-width:0;min-height:100%}
body{
  min-height:100svh;display:grid;place-items:center;
  padding:max(.5rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right)) max(.5rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-left));
  overflow-x:hidden;background-color:var(--bg);background-image:radial-gradient(ellipse at 50% -15%,rgba(23,56,71,.88) 0,rgba(6,16,25,.92) 48%,rgba(4,10,16,.96) 100%),url("assets/shared/ambient-backdrop.png");background-position:center,center;background-size:cover,cover;background-repeat:no-repeat,no-repeat;color:var(--text)
}
button,select,input{font:inherit}
button,select{min-width:0;max-width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text)}
button{padding:.55rem .75rem;cursor:pointer;font-weight:720;touch-action:manipulation}
button:hover:not(:disabled){border-color:#467589;background:#143344}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.38;cursor:not-allowed}
button:focus-visible,select:focus-visible,input:focus-visible,.board-grid:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
select{padding:.5rem 2rem .5rem .65rem}
.game-shell{
  position:relative;width:min(100%,48rem);min-width:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:.45rem;
  padding:clamp(.55rem,2.3vw,1rem);border:1px solid rgba(95,165,191,.45);border-radius:clamp(14px,3vw,22px);
  background:linear-gradient(155deg,rgba(11,27,38,.98),rgba(5,15,23,.98));box-shadow:var(--shadow)
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0}
.brand-lockup{display:flex;align-items:center;gap:.55rem;min-width:0}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--accent);border-radius:50%;color:transparent;font-size:1.3rem;background:url("assets/shared/loop-emblem.png") center/27px 27px no-repeat;box-shadow:inset 0 0 0 5px rgba(98,217,255,.08)}
.brand-lockup h1{margin:0;font-size:clamp(1.2rem,5vw,1.55rem);line-height:1;letter-spacing:-.035em}
.brand-lockup p{margin:.2rem 0 0;color:var(--muted);font-size:.78rem;white-space:nowrap}
.utility-actions{display:flex;gap:.32rem}.icon-button{width:44px;padding:0;font-size:1rem}
.mode-row{display:flex;align-items:center;gap:.5rem;min-width:0}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid var(--line);border-radius:13px;background:#07141d}
.mode-switch button{min-height:44px;border:0;background:transparent;padding:.35rem .7rem;color:var(--muted)}
.mode-switch button[aria-pressed="true"]{background:#173849;color:var(--text);box-shadow:inset 0 0 0 1px rgba(98,217,255,.25)}
.practice-controls{display:flex;align-items:center;gap:.35rem;min-width:0}
.practice-controls label{font-size:.75rem;color:var(--muted)}
.practice-controls select{min-height:44px;max-width:9rem}.compact-button{padding-inline:.65rem}
.puzzle-meta{margin-left:auto;min-width:0;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.74rem;text-transform:capitalize}
.status-row{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.4rem .65rem;border:1px solid rgba(62,101,118,.48);border-radius:13px;background:rgba(6,18,27,.74)}
.status-copy{display:flex;align-items:center;gap:.4rem;min-width:0}.status-copy p{margin:0;min-width:0;font-size:.86rem;line-height:1.25;color:#d8e9ef}
.text-button{min-height:36px;padding:.25rem .5rem;border:0;background:transparent;color:var(--accent)}
.status-side{display:flex;align-items:center;gap:.45rem;flex:0 0 auto}
.status-side time{font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--muted);min-width:2.8rem;text-align:right}
.assist-badge{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--warn)}
.continue-button{min-height:44px;padding:.45rem .8rem;border-color:#59d9a8;background:#116048;color:#effff8;box-shadow:0 0 0 1px rgba(115,224,176,.16)}
.game-shell[data-solved="true"] .status-row{border-color:rgba(115,224,176,.55);background:rgba(12,55,44,.72)}
.playfield-zone{min-height:0;display:grid;place-items:center;position:relative}
.board-frame{position:relative;isolation:isolate;width:min(100%,32rem,58svh);min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem;padding:clamp(.45rem,1.8vw,.75rem);border:1px solid rgba(69,119,139,.48);border-radius:var(--radius);background:linear-gradient(145deg,rgba(9,25,35,.94),rgba(5,17,25,.92));box-shadow:inset 0 0 35px rgba(98,217,255,.035)}
.board-frame::before{content:"";position:absolute;inset:.35rem;z-index:0;pointer-events:none;background:url("assets/shared/loop-glow-accent.png") center/contain no-repeat;opacity:0;transform:scale(.96);transition:opacity .28s ease,transform .28s ease}
.board-frame>*{position:relative;z-index:1}
.game-shell[data-solved="true"] .board-frame::before{opacity:.16;transform:scale(1)}
.board-grid{position:relative;width:auto;min-width:0;max-width:100%;height:auto;aspect-ratio:1;align-self:start;justify-self:stretch;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain;border-radius:12px;background:radial-gradient(circle at 50% 45%,rgba(34,75,91,.28),rgba(4,13,20,.28) 70%)}
.board-grid[data-ambiguous="true"]{cursor:crosshair}.board-svg{position:absolute;inset:0;display:block;width:100%;min-width:0;max-width:100%;height:100%;overflow:visible;pointer-events:none}
.edge-visual .edge-guide{stroke:#365461;stroke-width:3;stroke-linecap:round;opacity:.55;stroke-dasharray:2 12}
.edge-visual .edge-line{stroke:var(--loop);stroke-width:10;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 5px rgba(98,217,255,.22))}
.edge-visual .edge-x{stroke:var(--excluded);stroke-width:5;stroke-linecap:round;opacity:0}
.edge-visual.is-line .edge-line{opacity:1}.edge-visual.is-excluded .edge-guide{opacity:.18}.edge-visual.is-excluded .edge-x{opacity:.95}
.edge-visual.is-preview .edge-guide,.edge-visual.is-cursor .edge-guide{stroke:var(--accent);stroke-width:8;opacity:.72;stroke-dasharray:none}
.edge-visual.is-ambiguous .edge-guide{stroke:var(--warn);stroke-width:8;opacity:.72;stroke-dasharray:8 8}
.edge-visual.is-nudge-evidence .edge-guide{stroke:var(--warn);stroke-width:7;opacity:.7;stroke-dasharray:7 7}
.edge-visual.is-nudge-target .edge-guide{stroke:var(--accent);stroke-width:9;opacity:.96;stroke-dasharray:none}
.edge-visual.is-conflict .edge-guide{stroke:var(--danger);stroke-width:8;opacity:.8;stroke-dasharray:none}
.vertex-dot{fill:#5c7884;opacity:.85}
.clue{fill:#dfeef3;font-size:42px;font-weight:760;text-anchor:middle;dominant-baseline:middle}
.clue.is-satisfied{fill:#aeeed1}.clue.is-conflict{fill:#ffaaaa;text-decoration:underline}
.board-legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.8rem;min-width:0;min-height:22px;color:var(--muted);font-size:.7rem}
.board-legend span{display:inline-flex;align-items:center;gap:.25rem}.legend-line{width:1rem;border-top:3px solid var(--loop);border-radius:3px}.legend-x{font-style:normal;font-weight:850;color:var(--excluded);font-size:1rem}.keyboard-hint{opacity:.8}
.empty-state{width:min(100%,30rem);min-height:14rem;display:grid;place-items:center;align-content:center;gap:.45rem;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted)}
.empty-state strong{color:var(--text)}
.action-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}.action-row button{min-width:0;padding-inline:.4rem;overflow-wrap:anywhere;white-space:normal}
.app-dialog{width:min(calc(100% - 1rem),31rem);max-height:min(90svh,46rem);overflow:auto;border:1px solid #416f81;border-radius:18px;padding:1rem;color:var(--text);background:#081722;box-shadow:0 24px 65px rgba(0,0,0,.58)}
.app-dialog::backdrop{background:rgba(0,5,9,.75);backdrop-filter:blur(3px)}
.dialog-heading h2{margin:.18rem 0 .5rem;font-size:1.25rem}.eyebrow{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.app-dialog>p{color:#c2d4dc;line-height:1.45}.dialog-actions{display:flex;justify-content:flex-end;gap:.45rem;margin-top:.9rem}
.primary-button{background:#166b88;border-color:#3ebce5}.danger-quiet{width:100%;margin-top:.7rem;color:#ffd4d4;border-color:rgba(255,141,141,.35);background:#28171c}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;min-height:44px;margin:.65rem 0}.setting-row input{width:1.3rem;height:1.3rem}
.help-list{padding-left:1.2rem;color:#b9ccd5;font-size:.85rem;line-height:1.45}
.tutorial-demo{min-height:11rem;margin:.8rem 0;border:1px solid var(--line);border-radius:14px;background:#05111a;display:grid;place-items:center;overflow:hidden}
.tutorial-demo svg{width:min(75%,13rem);height:auto}.tutorial-caption{min-height:2.5rem;color:#d8f4ff}
.tutorial-opt-out{display:flex;align-items:center;gap:.5rem;font-size:.85rem}.tutorial-opt-out input{width:1.2rem;height:1.2rem}
.game-tip{position:absolute;left:50%;bottom:4.2rem;z-index:6;display:flex;align-items:center;gap:.5rem;width:min(calc(100% - 1.3rem),28rem);padding:.65rem .8rem;border:1px solid rgba(98,217,255,.55);border-radius:999px;background:#0a2c3b;color:#e8fbff;box-shadow:0 .8rem 2rem rgba(0,0,0,.35);opacity:0;transform:translate(-50%,.6rem);transition:opacity .2s ease,transform .2s ease;cursor:pointer;font-size:.78rem}
.game-tip.is-visible{opacity:1;transform:translate(-50%,0)}.game-tip.is-fading{opacity:0;transform:translate(-50%,.3rem)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
html[data-webgames-display-mode="fullscreen"],html[data-webgames-display-mode="fullscreen"] body{width:100%;height:100%;min-height:100%;overflow:hidden}
html[data-webgames-display-mode="fullscreen"] body{height:100dvh;place-items:stretch}
html[data-webgames-display-mode="fullscreen"] .game-shell{width:100%;max-width:none;min-height:100%;border-radius:0}
.game-shell[data-tutorial-paused]{filter:saturate(.82)}
html[data-motion-profile="instant"] *,html[data-motion-profile="instant"] *::before,html[data-motion-profile="instant"] *::after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}
@media(max-width:36rem){
  body{place-items:stretch}
  .game-shell{width:100%;min-height:calc(100svh - max(1rem,env(safe-area-inset-top) + env(safe-area-inset-bottom)));border-radius:14px;align-content:start}
  .brand-lockup p{display:none}.brand-mark{width:30px;height:30px}.utility-actions{gap:.2rem}
  .mode-row{flex-wrap:wrap}.puzzle-meta{order:3;max-width:100%;margin-left:0;width:100%}
  .practice-controls{margin-left:auto}.practice-controls label{position:absolute;clip:rect(0,0,0,0)}.practice-controls select{max-width:7.8rem}
  .status-row{padding:.32rem .5rem}.status-copy p{font-size:.8rem}
  .board-frame{width:min(100%,58svh)}.keyboard-hint{display:none}.board-legend{gap:.55rem}
  .action-row{gap:.28rem}.action-row button{font-size:.78rem}
}
@media(max-width:21rem){
  .game-shell{padding:.4rem}.topbar{flex-wrap:wrap}.utility-actions{margin-left:auto}.brand-lockup h1{font-size:1.08rem}.mode-switch button{padding-inline:4px;overflow-wrap:anywhere}
  .puzzle-meta{display:none}.practice-controls{margin-left:auto;flex:1;justify-content:flex-end;min-width:0}.practice-controls select{width:72px;max-width:72px;padding-left:.35rem;padding-right:1.1rem}.compact-button{min-width:44px;padding-inline:.35rem}
  .status-side .assist-badge{display:none}.board-frame{padding:.35rem}.action-row button{padding-inline:.2rem;font-size:.73rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}