:root{
  color-scheme:dark;
  --ink:#eef7ff;
  --muted:#8eabc0;
  --deep:#071522;
  --panel:rgba(10,32,48,.94);
  --panel-soft:rgba(232,247,255,.05);
  --line:rgba(126,210,232,.18);
  --signal:#3ec3e8;
  --signal-soft:#7ee0c5;
  --sand:#f3e2c5;
  --sand-deep:#d7c09a;
  --island-ink:#1a2a33;
  --bridge:#d7e7f2;
  --bridge-double:#f4fbff;
  --danger:#ef9a7a;
  --focus:#7ee0c5;
  --shadow:0 24px 70px rgba(0,0,0,.4);
  --app-pad:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
  --island-hit:46px;
  --board-w:6;
  --board-h:6;
  font-family:"Segoe UI",ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-height:100dvh}
body{min-height:100dvh;color:var(--ink);background:
  radial-gradient(circle at 18% 0,rgba(62,195,232,.16),transparent 34%),
  radial-gradient(circle at 88% 100%,rgba(126,224,197,.1),transparent 32%),
  linear-gradient(165deg,#0a1c2b,var(--deep));}
button,select,input{font:inherit}button{color:inherit;touch-action:manipulation;cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}[hidden]{display:none!important}
.app{position:relative;width:100%;height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:7px;padding:var(--app-pad);overflow:auto;isolation:isolate}
.topbar{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(100%,960px);margin:0 auto;padding:0 2px}
.brand{display:flex;align-items:center;gap:9px;min-width:0}.brand>div{display:grid;gap:1px}.brand-kicker{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:850;white-space:nowrap}.brand strong{font-size:clamp(20px,3vw,30px);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.brand-mark{position:relative;width:40px;height:40px;border:1px solid rgba(62,195,232,.35);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(243,226,197,.2),rgba(10,32,48,.9));display:block}
.brand-mark i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 1px rgba(26,42,51,.35)}.brand-mark i:nth-child(1){left:8px;top:11px}.brand-mark i:nth-child(2){right:9px;top:8px}.brand-mark i:nth-child(3){left:12px;bottom:8px}.brand-mark i:nth-child(4){right:8px;bottom:11px}
.header-actions{display:flex;align-items:center;gap:5px}.icon-button{min-width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:var(--panel-soft);display:inline-grid;place-items:center;font-weight:900;font-size:17px}.icon-button:hover{background:rgba(62,195,232,.1);border-color:rgba(62,195,232,.4)}.help-button{grid-template-columns:auto auto;gap:6px;padding:0 11px}.help-button strong{font-size:10px}
.game-panel{min-width:0;min-height:0;width:min(100%,960px);margin:0 auto;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:var(--shadow);padding:clamp(8px,1.7vw,16px);display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:clamp(5px,1vh,9px);overflow:hidden}
.context-bar{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px}.context-copy{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}.context-copy span{font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:850}.context-copy strong{font-size:13px}.context-copy small{font-size:8px;color:var(--signal-soft)}.assist-chip{border:1px solid rgba(126,224,197,.42);border-radius:999px;background:rgba(126,224,197,.1);color:var(--signal-soft);font-size:8px;font-weight:850;min-height:28px;padding:6px 8px}
.play-zone{min-width:0;min-height:0;display:flex;align-items:center;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.board-shell{position:relative;flex:0 0 auto;margin:auto;aspect-ratio:var(--board-w)/var(--board-h);touch-action:pan-y;background:
  radial-gradient(circle at 50% 20%,rgba(62,195,232,.08),transparent 42%),
  linear-gradient(180deg,#0c2738,#08202f);
  border:1px solid rgba(62,195,232,.22);border-radius:22px;box-shadow:inset 0 1px rgba(255,255,255,.05),0 16px 40px rgba(0,0,0,.28);overflow:hidden}
.bridge-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.island-layer{position:absolute;inset:0;z-index:2}
.island{position:absolute;width:var(--island-hit);height:var(--island-hit);min-width:44px;min-height:44px;padding:0;border:2px solid rgba(26,42,51,.45);border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--sand),var(--sand-deep));color:var(--island-ink);transform:translate(-50%,-50%);display:grid;place-items:center;place-content:center;gap:0;box-shadow:inset 0 1px rgba(255,255,255,.55),0 4px 10px rgba(0,0,0,.28);z-index:2}
.island-clue{font-size:clamp(16px,4.6vmin,22px);font-weight:950;line-height:1}
.island-meta{position:absolute;right:3px;bottom:4px;font-size:8px;font-weight:900;letter-spacing:.02em;color:#35505c}
.island[data-satisfied="true"]{box-shadow:inset 0 0 0 2px rgba(26,42,51,.25),0 0 0 2px rgba(126,224,197,.55)}
.island[data-satisfied="true"] .island-meta{color:#1f5a4a}
.island[aria-pressed="true"]{box-shadow:0 0 0 3px var(--signal),0 0 16px rgba(62,195,232,.35)}
.island.is-candidate{box-shadow:0 0 0 3px var(--signal-soft),0 0 14px rgba(126,224,197,.28)}
.island.is-candidate::after{content:"";position:absolute;inset:-5px;border:1px dashed rgba(126,224,197,.7);border-radius:50%;pointer-events:none}
.island.is-blocked{border-style:dashed;background:repeating-linear-gradient(135deg,var(--sand) 0 5px,var(--sand-deep) 5px 9px)}
.island.is-blocked::before{content:"×";position:absolute;top:1px;left:6px;font-size:11px;font-weight:1000;color:#7a3a28}
.island.is-nudge{box-shadow:0 0 0 3px rgba(62,195,232,.7),0 0 18px rgba(62,195,232,.25)}
.island.is-preview{box-shadow:0 0 0 3px #f4fbff}
.island:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.bridge-stroke{fill:none;stroke:var(--bridge);stroke-linecap:round;stroke-width:.09;pointer-events:none}
.bridge-stroke.is-double{stroke:var(--bridge-double);stroke-width:.07}
.bridge-stroke.is-preview{stroke-dasharray:.12 .1;stroke:var(--signal-soft);stroke-width:.07}
.teach-cue{margin:0;min-height:22px;text-align:center;font-size:clamp(10px,2.4vw,13px);font-weight:750;color:var(--signal-soft)}
.board-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.board-actions button{min-width:0;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px}.board-actions button:hover:not(:disabled){background:rgba(62,195,232,.1);border-color:rgba(62,195,232,.35)}.board-actions button:disabled{opacity:.4;cursor:default}.board-actions span{font-size:15px;color:var(--signal)}
.feedback-zone{min-height:34px;text-align:center;display:grid;align-content:center;gap:4px}.status-message,.control-hint{margin:0}.status-message{font-size:clamp(9px,1.5vw,12px);font-weight:800;line-height:1.28}.status-message.success{color:var(--signal-soft)}.status-message.error{color:var(--danger)}.status-message.neutral{color:var(--signal)}
#explainButton{justify-self:center;min-height:44px;min-width:44px;padding:0 12px;border:1px dashed var(--line);border-radius:999px;background:transparent;font-size:10px;font-weight:800}
.control-hint{font-size:7px;color:var(--muted)}.control-hint span{border:1px solid var(--line);border-radius:4px;padding:1px 3px;margin-right:3px;letter-spacing:1px;font-weight:900}
.game-tip{position:fixed;z-index:8;left:50%;bottom:max(12px,calc(env(safe-area-inset-bottom) + 7px));transform:translate(-50%,14px);width:min(90vw,520px);min-height:44px;border:1px solid rgba(62,195,232,.34);border-radius:14px;background:#0d2a3c;color:var(--ink);padding:9px 13px;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;pointer-events:none;box-shadow:0 18px 46px rgba(0,0,0,.42);font-size:10px;font-weight:750;transition:opacity .26s ease,transform .26s ease}.game-tip.is-visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}.game-tip.is-fading{opacity:0;transform:translate(-50%,8px)}
.app-dialog{width:min(94vw,650px);max-height:min(90dvh,780px);padding:0;border:0;border-radius:24px;background:transparent;color:var(--ink);overflow:visible}.app-dialog::backdrop{background:rgba(4,12,18,.75)}.dialog-card{max-height:min(90dvh,780px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:linear-gradient(145deg,#123044,#0a1c28);border:1px solid rgba(62,195,232,.24);border-radius:24px;box-shadow:0 34px 90px rgba(0,0,0,.55);overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--line)}.dialog-kicker{font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--signal);font-weight:900}.dialog-header h2{margin:0;font-size:clamp(22px,4vw,32px);letter-spacing:-.04em}.dialog-close{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);font-size:24px}.dialog-content{padding:15px 18px;overflow:auto;color:var(--muted);font-size:12px;line-height:1.48}.dialog-content p{margin:0 0 10px}.dialog-actions{display:flex;justify-content:flex-end;gap:7px;padding:12px 18px 16px;border-top:1px solid var(--line)}.dialog-actions button{min-width:105px;min-height:44px;border:1px solid var(--line);border-radius:11px;background:var(--panel-soft);padding:0 13px;font-weight:850;font-size:10px}.dialog-actions button.primary{background:var(--signal);color:#072028;border-color:transparent}.dialog-actions button.danger{background:rgba(239,154,122,.12);border-color:rgba(239,154,122,.5)}
.rule-stack{display:grid;gap:8px}.rule-row{display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:9px;background:var(--panel-soft)}.rule-row>b{width:38px;height:38px;border:1px solid rgba(62,195,232,.28);border-radius:10px;display:grid;place-items:center;color:var(--signal);font-size:14px}.rule-row strong{color:var(--ink);font-size:11px}.rule-row small{font-size:9px;display:block}
.demo-box{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(4,18,28,.45);display:grid;gap:8px}.demo-board{position:relative;height:72px;border-radius:12px;background:#08202f}.demo-island{position:absolute;top:50%;width:48px;height:48px;min-width:44px;min-height:44px;border:2px solid rgba(26,42,51,.45);border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--sand),var(--sand-deep));color:var(--island-ink);font-weight:950;transform:translate(-50%,-50%)}.demo-island[data-count="1"]::after,.demo-island[data-count="2"]::after{content:"";position:absolute;left:100%;top:50%;height:0;border-top:2px solid var(--bridge);transform:translateY(-50%)}.demo-island[data-count="1"]::after{width:72px}.demo-island[data-count="2"]::after{width:72px;border-top-width:6px;border-style:double;border-bottom:none;border-left:none;border-right:none;border-color:var(--bridge-double)}.demo-note{text-align:center;font-weight:850;color:var(--ink)}
.setting-row{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}.setting-row>span:first-child{display:grid;gap:2px}.setting-row strong{color:var(--ink);font-size:10px}.setting-row small{font-size:8px}.setting-row select{min-width:145px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#10283a;color:var(--ink);padding:0 8px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}.toggle-row input{width:1.25rem;height:1.25rem}
@media(max-width:600px){
  :root{--app-pad:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));--island-hit:46px}
  .app{gap:4px}.topbar{min-height:44px}.brand-mark{width:36px;height:36px}.brand-kicker{display:none}.brand strong{font-size:18px}.help-button{grid-template-columns:1fr;width:44px;padding:0}.help-button strong{display:none}
  .game-panel{border-radius:17px;padding:6px;gap:4px}.board-shell{border-radius:16px}.board-actions button{min-height:44px;font-size:9px}.control-hint{display:none}.status-message{font-size:9px}
}
@media(max-width:350px){.brand strong{font-size:15px}.context-copy small{max-width:90px;overflow:hidden;text-overflow:ellipsis}.board-actions{gap:4px}}
@media(max-width:240px){
  .topbar{flex-wrap:wrap;justify-content:center;align-content:start;padding-bottom:3px}.brand{width:100%;justify-content:center}.header-actions{width:100%;justify-content:center}
  .context-bar{min-height:0;flex-direction:column;align-items:stretch}.mode-strip{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.mode-strip button{width:100%}.context-copy{justify-content:center;text-align:center}.context-copy small{max-width:100%;white-space:normal}.context-actions{display:flex;justify-content:center;flex-wrap:wrap}.practice-tier{margin-left:0;width:100%}.practice-tier select{width:100%}
  .board-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.result-region,.daily-unavailable{align-items:stretch;flex-direction:column}.result-actions{display:grid;grid-template-columns:1fr}.result-actions button,.daily-unavailable button{width:100%}
}
@media(max-width:600px) and (max-height:520px){.teach-cue{display:none}.context-copy small{display:none}.island{min-height:44px}}
@media(max-height:700px) and (min-width:601px){.app{gap:4px}.topbar{min-height:44px}.game-panel{padding:7px;gap:3px}}
@media(max-width:900px) and (min-height:700px){.game-panel{align-content:start}}
@media(max-width:520px){.app-dialog{width:min(97vw,650px)}.dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.dialog-actions button{min-width:0;width:100%}}
.tutorial-presentation{margin:0 0 14px}.bridge-count-presentation-demo{display:grid;gap:13px;padding:16px;border:1px solid rgba(127,202,239,.24);border-radius:18px;background:linear-gradient(155deg,rgba(18,53,73,.97),rgba(7,27,41,.99));box-shadow:0 18px 48px rgba(0,0,0,.28)}.bridge-count-presentation-header{display:grid;gap:3px}.bridge-count-presentation-header span{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.bridge-count-presentation-header strong{font-size:clamp(1rem,4vw,1.35rem);color:#eff9ff}.bridge-count-presentation-route{display:grid;grid-template-columns:64px minmax(88px,1fr) 64px;align-items:center;width:min(100%,340px);margin:2px auto 0}.bridge-count-presentation-island{position:relative;z-index:2;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:3px solid rgba(194,229,246,.72);background:#e9f7ff;color:#103149;font-weight:800;font-size:1.35rem;box-shadow:0 8px 20px rgba(0,0,0,.28);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.bridge-count-presentation-island.is-selected{transform:scale(1.08);border-color:#ffd47b;box-shadow:0 0 0 5px rgba(255,212,123,.18),0 8px 20px rgba(0,0,0,.28)}.bridge-count-presentation-island.is-satisfied{border-color:#7ee3ba;box-shadow:0 0 0 5px rgba(126,227,186,.16),0 8px 20px rgba(0,0,0,.28)}.bridge-count-presentation-bridge{position:relative;display:block;height:24px}.bridge-count-presentation-bridge i{position:absolute;left:-8px;right:-8px;top:50%;height:5px;border-radius:999px;background:#8bd7f5;opacity:0;transform:translateY(-50%) scaleX(.18);transform-origin:center;transition:opacity .2s ease,transform .24s ease}.bridge-count-presentation-bridge[data-count="1"] i:first-child{opacity:1;transform:translateY(-50%) scaleX(1)}.bridge-count-presentation-bridge[data-count="2"] i:first-child{opacity:1;transform:translateY(calc(-50% - 5px)) scaleX(1)}.bridge-count-presentation-bridge[data-count="2"] i:last-child{opacity:1;transform:translateY(calc(-50% + 5px)) scaleX(1)}.bridge-count-presentation-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.bridge-count-presentation-facts span{padding:5px 9px;border-radius:999px;border:1px solid rgba(199,229,243,.18);background:rgba(230,247,255,.06);color:var(--muted);font-size:.78rem}.bridge-count-presentation-facts span.is-valid{border-color:rgba(126,227,186,.45);background:rgba(126,227,186,.1);color:#dff9ee}.bridge-count-presentation-caption{margin:0;min-height:2.7em;text-align:center;color:#eaf7ff;font-size:1rem;line-height:1.35}html[data-presentation-surface=preview],html[data-presentation-surface=preview] body{width:100%;height:100%;overflow:hidden}html[data-presentation-surface=preview] .app{visibility:hidden}#bridgeCountPresentationPreview .bridge-count-presentation-demo{grid-template-columns:minmax(0,1.2fr) minmax(190px,.8fr);grid-template-areas:"route header" "route facts" "route caption";align-items:center;column-gap:20px;width:min(570px,calc(100vw - 40px))!important;max-height:calc(100vh - 40px)!important;padding:16px 18px}#bridgeCountPresentationPreview .bridge-count-presentation-header{grid-area:header;align-self:end}#bridgeCountPresentationPreview .bridge-count-presentation-route{grid-area:route;width:min(100%,320px)}#bridgeCountPresentationPreview .bridge-count-presentation-facts{grid-area:facts;justify-content:flex-start}#bridgeCountPresentationPreview .bridge-count-presentation-caption{grid-area:caption;align-self:start;text-align:left;min-height:0}@media(max-width:420px){.bridge-count-presentation-demo{padding:12px;gap:10px}.bridge-count-presentation-route{grid-template-columns:56px minmax(70px,1fr) 56px}.bridge-count-presentation-island{width:52px;height:52px}.bridge-count-presentation-caption{font-size:.96rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
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}
html[data-motion-profile="cinematic"] .island.is-candidate::after{animation:candidate-pulse 1.1s ease-in-out 1}
html[data-motion-profile="cinematic"] .bridge-stroke{animation:bridge-arrive .16s ease-out 1}
@keyframes bridge-arrive{from{stroke-dasharray:.03 .12;opacity:.35}to{stroke-dasharray:none;opacity:1}}
@keyframes candidate-pulse{0%{opacity:.2}40%{opacity:1}100%{opacity:.35}}