@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900;1000&display=swap');
:root{font-family:'Nunito',ui-rounded,system-ui,sans-serif;color:#f6f2df;background:#172e3a;font-synthesis:none;--accent:#64d6ef;--accent-dark:#167d9c;--tile:#335b66;--pipe:#7aaec0;--flow:#8decff;--board:#172f39}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 10% 0%,#325a64 0,transparent 55%),radial-gradient(ellipse at 95% 100%,#214650 0,transparent 55%),#172e3a}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #fff4b4;outline-offset:4px}button:disabled{cursor:default}button[hidden]{display:none}body[data-theme=light]{--accent:#ffcf65;--accent-dark:#a16b25;--tile:#4a4c68;--pipe:#c39b54;--flow:#ffe298;--board:#292b43}body[data-theme=air]{--accent:#b4dc9d;--accent-dark:#5b8553;--tile:#52575f;--pipe:#a4b5ae;--flow:#d8ffe6;--board:#2d3640}
.game{max-width:1070px;margin:auto;padding:34px 36px 24px}.masthead{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:26px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:900;color:#a5c2c4;margin:0 0 8px}h1{font-size:36px;line-height:1.15;letter-spacing:-1.4px;margin:4px 0 0;font-weight:1000}h1 span{color:#ffc96e;margin-left:10px}.prototype{font-size:13px;color:#bacacb;border:1px solid #5c737a;border-radius:20px;padding:7px 12px;white-space:nowrap}.themes{display:flex;gap:10px;margin-bottom:30px}.themes button{flex:1;text-align:left;border:1px solid #536e76;border-radius:14px;background:#203d49;padding:14px 17px;font-size:19px;font-weight:900;box-shadow:0 3px 0 #122730;transition:background .2s}.themes button span{font-size:12px;color:#94b1b7;margin-right:9px}.themes small{font-size:13px;font-weight:600;display:block;margin:3px 0 0 28px;color:#a9c0c5}.themes .selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,#203d49)}.themes .selected span,.themes .selected small{color:var(--accent)}.play-layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:44px;align-items:start}.mission{padding-top:10px}.scene{width:100%;aspect-ratio:1;position:relative;overflow:hidden;background:#294c58;border:4px solid #73918b;border-radius:26px 26px 65px 26px;box-shadow:0 9px 0 #102630,0 15px 35px #10212a55;isolation:isolate}.scene-art{position:absolute;inset:0;background-image:url('assets/seasons.png');background-size:300% 200%;background-repeat:no-repeat;transition:filter .4s}.season-label{position:absolute;left:14px;top:14px;background:#152d3bea;backdrop-filter:blur(5px);padding:5px 12px;border-radius:20px;font-size:13px;font-weight:800;letter-spacing:.5px}.mission-copy{padding:27px 5px 0}h2{font-weight:1000;font-size:27px;line-height:1.15;margin:7px 0 10px;letter-spacing:-.5px}#mission-text{font-size:17px;line-height:1.55;margin:0;color:#cfdbdb;max-width:31ch}.calm{color:#a6bdc0;font-size:14px;margin-top:18px;display:flex;align-items:center;gap:7px}.calm span{font-size:20px}.board-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 17px;padding:0 8px}#board-label{font-size:14px;color:#a7c1c5;font-weight:800}.levels{display:flex;gap:5px}.levels button{border:1px solid #61777d;border-radius:50%;width:29px;height:29px;padding:0;background:transparent;font-size:13px;font-weight:900}.levels button.current{background:var(--accent);color:#152e37;border-color:var(--accent)}.levels button.complete:not(.current){border-color:#9ecf9c;color:#afe9ad;background:#375641}.board-shell{position:relative;margin:0 25px;padding:0}.board{display:grid;grid-template-columns:repeat(var(--size),1fr);gap:5px;padding:10px;background:var(--board);border:3px solid #658487;border-bottom:7px solid #101f29;border-radius:20px;box-shadow:0 12px 26px #0a1b2855}.tile{display:block;aspect-ratio:1;min-width:0;width:100%;padding:0;border:1px solid #ffffff19;border-top-color:#ffffff2b;border-bottom:4px solid #102c3980;border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--tile) 80%,white),var(--tile) 50%);position:relative;overflow:hidden;transition:filter .15s,background .2s}.tile:hover:not(:disabled){filter:brightness(1.15)}.tile:active:not(:disabled){transform:scale(.96)}.tile svg{width:100%;height:100%;display:block;overflow:visible}.tile path{fill:none;stroke-linecap:butt;stroke-linejoin:round}.pipe-shadow{stroke:#0f2632;stroke-width:32}.pipe-rim{stroke:var(--pipe);stroke-width:24}.pipe-core{stroke:#244c5c;stroke-width:13}.pipe-flow{stroke:var(--flow);stroke-width:9;opacity:0}.tile.flowing .pipe-flow{opacity:1;stroke-dasharray:9 4;animation:flow .6s linear infinite;filter:drop-shadow(0 0 3px var(--flow))}.tile.hinted{outline:3px solid #ffdc89;outline-offset:-3px;filter:brightness(1.22)}body[data-theme=light] .pipe-rim{stroke-width:16}body[data-theme=light] .pipe-shadow{stroke-width:23}body[data-theme=light] .pipe-core{stroke:#816932;stroke-width:7}body[data-theme=light] .pipe-flow{stroke-width:8}body[data-theme=air] .pipe-rim{stroke-width:30}body[data-theme=air] .pipe-core{stroke-width:20;stroke:#465e62}body[data-theme=air] .pipe-shadow{stroke-width:36}.port{position:absolute;z-index:2;transform:translateY(-50%);font-size:11px;letter-spacing:.1px;font-weight:1000;padding:7px 3px;text-align:center;width:37px;border-radius:7px;background:var(--accent);color:#19343b;border:2px solid #eaf6c4;box-shadow:0 3px 0 #102a34}.source-port{left:-27px}.goal-port{right:-27px;background:#253f48;color:#fff0c1;border-color:#98a69a}.instruction{text-align:center;font-size:14px;line-height:1.5;color:#bed1d2;margin:19px 0 0}.feedback{text-align:center;font-size:14px;line-height:1.45;min-height:41px;margin:8px 0 12px;color:#dde7e1;display:flex;align-items:center;justify-content:center}.feedback.win{color:#c7edb4;font-weight:900}.actions{display:flex;gap:9px}.actions button{border-radius:13px;min-height:53px;font-weight:900;line-height:1.1}.secondary{background:#2d4954;border:1px solid #61777c;border-bottom:4px solid #102b36;padding:9px 13px;font-size:20px}.secondary span{display:block;font-size:12px;margin-top:2px;color:#c3d4d5}.primary{flex:1;background:linear-gradient(#ffe1a0,#edb756);color:#3b2e20;border:1px solid #ffedc5;border-bottom:5px solid #9c692a;font-size:17px;padding:9px 12px;box-shadow:0 5px 12px #0d233b40}.primary:disabled{filter:saturate(.55)}.next{width:100%;margin-top:12px;padding:13px;background:#52714b;border:1px solid #9cb889;border-bottom:4px solid #2c482e;border-radius:12px;font-weight:900;font-size:16px}.wind{display:none}.success .scene-art{animation:celebrate .6s ease-out}body[data-theme=air] .success .wind{display:block;position:absolute;top:40%;font-size:40px;color:#fff;animation:gust 1.2s forwards;pointer-events:none}footer{display:flex;justify-content:space-between;color:#95afb4;font-size:13px;border-top:1px solid #58707955;padding-top:16px;margin-top:35px}footer span:last-child{letter-spacing:1px}@keyframes flow{to{stroke-dashoffset:-26}}@keyframes celebrate{50%{filter:brightness(1.4)}}@keyframes gust{from{left:-50%;opacity:.7}to{left:110%;opacity:0}}
@media(max-width:700px){.game{max-width:480px;padding:18px 17px max(20px,env(safe-area-inset-bottom))}.masthead{margin-bottom:17px;align-items:center}h1{font-size:27px}.masthead .eyebrow{font-size:9px;letter-spacing:1.3px}.prototype{font-size:11px;padding:5px 8px;max-width:72px;text-align:center;white-space:normal}.themes{gap:7px;margin-bottom:21px}.themes button{font-size:17px;padding:10px 10px;border-radius:11px}.themes button span{font-size:10px;margin-right:5px}.themes small{font-size:12px;margin-left:20px}.play-layout{display:flex;flex-direction:column;gap:22px}.mission{display:flex;gap:16px;padding:0;width:100%;align-items:center}.scene{width:132px;min-width:132px;border-width:3px;border-radius:18px 18px 38px 18px;box-shadow:0 5px 0 #102630}.season-label{display:none}.mission-copy{padding:0}h2{font-size:22px;margin:4px 0 6px}.mission-copy .eyebrow{font-size:10px;letter-spacing:1.4px}#mission-text{font-size:14px;line-height:1.4}.calm{font-size:12px;margin-top:6px;gap:4px}.calm span{font-size:16px}.puzzle{width:100%}.board-heading{margin-bottom:12px;padding:0 1px}.levels{gap:5px}.levels button{width:27px;height:27px}.board-shell{margin:0 21px}.board{padding:7px;gap:4px;border-radius:16px}.tile{border-radius:9px;border-bottom-width:3px}.port{width:31px;font-size:9px;padding:6px 1px}.source-port{left:-22px}.goal-port{right:-22px}.instruction{font-size:12px;margin-top:15px}.feedback{font-size:13px;min-height:36px;margin:6px 0 10px}.actions button{min-height:51px}.primary{font-size:16px}.secondary{padding:7px 12px}footer{margin-top:24px;font-size:12px;padding-top:13px}}
@media(max-width:360px){.game{padding-left:12px;padding-right:12px}.scene{width:105px;min-width:105px}.mission{gap:12px}h2{font-size:20px}.calm{font-size:11px}.board-heading{gap:4px}#board-label{font-size:12px}.levels{gap:4px}.levels button{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Polished game feedback and theme personality. */
:root{--glow:#66ddf5}
body{background:radial-gradient(circle at 16% 9%,#37646d88 0,transparent 29%),radial-gradient(ellipse at 95% 100%,#214650 0,transparent 55%),linear-gradient(125deg,#1c3943,#112a36 68%,#172e3a);background-attachment:fixed}
body[data-theme=light]{--glow:#ffd778}
body[data-theme=air]{--glow:#c8f0b6}
.themes button{transition:background .2s,transform .2s,border-color .2s}
.themes button:hover{transform:translateY(-1px)}
.themes button .theme-number{font-size:12px;color:#94b1b7;margin-right:7px}
.themes button .theme-mark{display:inline-grid;place-items:center;width:23px;height:23px;margin-right:5px;border-radius:50%;font-size:16px;color:var(--accent);background:#ffffff0d}
.themes small{margin-left:58px}
.themes .selected{box-shadow:0 3px 0 #122730,0 0 22px color-mix(in srgb,var(--accent) 16%,transparent)}
.themes .selected .theme-number,.themes .selected small{color:var(--accent)}
.scene::after{content:'';position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 45px #071b2b45;pointer-events:none}
.scene-art{inset:-1px;transition:filter .45s,transform .8s;transform:scale(1.01)}
.scene-shine{position:absolute;z-index:2;inset:-50%;opacity:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#fff9cf77 49%,transparent 58%);transform:translateX(-60%)}
.season-label{z-index:4}
#mission-text{font-size:16px;line-height:1.5;max-width:36ch}
.mission-meta{display:flex;align-items:center;gap:10px;margin-top:18px}
.mission-meta>span{border:1px solid #60777b88;background:#223f49;padding:6px 10px;border-radius:20px;color:#b8cbcb;font-size:12px;font-weight:800}
.mission-meta .calm{margin:0;display:flex;align-items:center;gap:5px}
.calm b{font-size:15px}
.board-heading{margin-bottom:14px}
.board-meta{display:flex;align-items:center;gap:8px}
#board-label,#turn-count{font-size:13px;color:#a7c1c5;font-weight:800}
#turn-count{padding-left:8px;border-left:1px solid #66808788;color:var(--accent)}
.board{transition:border-color .3s,box-shadow .3s}
.connection-ready .board{border-color:var(--accent);box-shadow:0 12px 26px #0a1b2855,0 0 24px color-mix(in srgb,var(--glow) 28%,transparent)}
.tile{transition:filter .15s,background .2s,box-shadow .2s}
.tile.turned{animation:turn-pop .2s ease-out}
.tile.reachable{background:linear-gradient(145deg,color-mix(in srgb,var(--tile) 74%,var(--accent)),var(--tile) 55%);box-shadow:inset 0 0 13px color-mix(in srgb,var(--glow) 16%,transparent)}
.tile.reachable .pipe-core{stroke:color-mix(in srgb,#244c5c 65%,var(--flow));filter:drop-shadow(0 0 2px var(--flow))}
.tile.hinted{animation:hint-pulse 1.1s ease-in-out infinite}
.primary{transition:transform .2s,box-shadow .2s,filter .2s}
.primary.ready{animation:ready-pulse 1.5s ease-in-out infinite;box-shadow:0 5px 12px #0d233b40,0 0 22px color-mix(in srgb,var(--accent) 46%,transparent)}
.success .scene-art{animation:celebrate .75s ease-out;transform:scale(1.035)}
.success .scene-shine{animation:scene-shine .85s ease-out}
.celebration{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.celebration i{position:absolute;left:var(--x);top:-10%;width:9px;height:15px;opacity:0;background:var(--accent);animation:particle 1.45s var(--d) ease-out forwards}
.celebration.water i{border-radius:70% 30% 65% 35%;background:#b7f3ff}
.celebration.light i{background:#ffe279;clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%)}
.celebration.air i{border-radius:100% 0 100% 0;background:#df9447;transform:rotate(calc(var(--i) * 23deg))}
body[data-theme=air] .success .wind{z-index:4}
.attempt-failed{animation:nudge .35s ease-out}
@keyframes scene-shine{0%{opacity:0;transform:translateX(-60%)}35%{opacity:1}100%{opacity:0;transform:translateX(60%)}}
@keyframes particle{0%{opacity:0;transform:translateY(0) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translateY(390px) translateX(calc((var(--i) - 7) * 5px)) rotate(280deg)}}
@keyframes turn-pop{50%{transform:scale(.93);filter:brightness(1.3)}}
@keyframes hint-pulse{50%{box-shadow:inset 0 0 18px #ffdc8966}}
@keyframes ready-pulse{50%{transform:translateY(-2px);filter:brightness(1.08)}}
@keyframes nudge{25%{transform:translateX(-4px)}55%{transform:translateX(4px)}80%{transform:translateX(-2px)}}

@media(max-width:700px){
  .themes button{font-size:16px;padding:9px 8px}
  .themes button .theme-number{display:none}
  .themes button .theme-mark{width:20px;height:20px;font-size:14px;margin-right:3px}
  .themes small{font-size:11px;margin-left:27px}
  #mission-text{font-size:14px;line-height:1.35}
  .mission-meta{margin-top:8px;gap:5px}
  .mission-meta>span{font-size:10px;padding:4px 7px}
  .calm b{font-size:12px}
  .board-meta{gap:5px}
  #board-label,#turn-count{font-size:11px}
  #turn-count{padding-left:5px}
}
@media(max-width:360px){
  .game{padding-left:8px;padding-right:8px}
  .board-shell{margin-left:16px;margin-right:16px}
  .source-port{left:-18px}
  .levels button{width:27px;height:27px}
}

/* Language selector and localized header. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand #brand-name{color:inherit;margin-left:0}
.brand .brand-spark{color:#ffc96e;margin-left:10px}
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:9px}
.language-picker{position:relative;display:block}
.language-icon{position:absolute;z-index:1;left:9px;top:50%;transform:translateY(-52%);color:var(--accent);font-size:13px;font-weight:1000;pointer-events:none}
.language-picker select{width:120px;min-height:34px;padding:5px 27px 5px 27px;border:1px solid #5c737a;border-bottom:3px solid #102a34;border-radius:18px;background:#203d49;color:#f6f2df;font:800 12px/1.2 'Nunito',ui-rounded,system-ui,sans-serif;cursor:pointer;color-scheme:dark}
.language-picker select:hover{border-color:var(--accent)}
.language-picker select:focus-visible{outline:3px solid #fff4b4;outline-offset:3px}
.language-picker select:disabled{opacity:.6;cursor:default}
.themes button .theme-name{font-size:inherit;color:inherit;margin:0}
.themes .selected .theme-name{color:inherit}
.mission-meta .calm span{font-size:12px;margin:0}

@media(max-width:700px){
  .header-tools{flex-direction:column;align-items:stretch;gap:5px}
  .language-picker select{width:84px;min-height:29px;padding:4px 18px 4px 8px;font-size:10.5px;text-align:center}
  .language-icon{display:none}
  .mission-meta .calm span{font-size:10px}
}
/* Host-site navigation */
.ubi-home {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  margin-bottom: 1.25rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  background: rgba(16, 35, 47, 0.78);
  color: #fff;
  font: 800 0.78rem/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-decoration: none;
  backdrop-filter: blur(12px);
}

.ubi-home:hover { background: rgba(16, 35, 47, 0.96); }
.ubi-home:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }