*{box-sizing:border-box}body{margin:0;background:#07110f;color:#f4faf7;font-family:Inter,system-ui,sans-serif}.page{width:min(1510px,100%);margin:auto;padding:12px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.brand{display:flex;gap:10px;align-items:center}.brand i{width:39px;height:39px;border-radius:12px;background:#75f0ba;color:#06110d;display:grid;place-items:center;font-style:normal;font-weight:950}.brand b,.brand span{display:block}.brand span{font-size:10px;color:#86a098}.btn{border:1px solid #1e3831;background:#0d1a17;color:white;border-radius:9px;padding:8px 11px;font-weight:800;cursor:pointer;text-decoration:none}.primary,.home{background:#75f0ba;color:#07120e;border-color:#75f0ba}.ad{position:relative;display:flex;align-items:center;justify-content:center;background:#0b1714;border:1px solid #193028;border-radius:9px}.ad:not(.has-ad):before{content:"ADVERTISEMENT";color:#45665d;font-size:9px;letter-spacing:1px}.topad,.bottomad{min-height:90px}.topad{margin-bottom:9px}.bottomad{margin-top:9px}.layout{display:flex;gap:9px;align-items:flex-start}.rail{flex:0 0 170px;min-height:600px}.layout main{flex:1 1 0;min-width:0}.game{background:#0d1a17;border:1px solid #1e3831;border-radius:18px;overflow:hidden}.hud{display:grid;grid-template-columns:repeat(4,1fr);padding:10px 14px;border-bottom:1px solid #1e3831}.hud small,.results small{display:block;color:#86a098;font-size:8px;text-transform:uppercase}.hud b{font-size:16px}.boardwrap{position:relative;width:100%;aspect-ratio:16/10;min-height:520px;background:#081310;overflow:hidden;touch-action:manipulation}.boardwrap canvas{width:100%;height:100%;display:block}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(3,10,8,.74);backdrop-filter:blur(6px)}.hidden{display:none!important}.modal{width:min(560px,94%);background:#0d1a17;border:1px solid #24443a;border-radius:20px;padding:24px;text-align:center}.modal em{font-style:normal;color:#75f0ba;font-size:9px;font-weight:900;letter-spacing:1px}.modal h1{font-size:31px;margin:7px 0}.modal p{font-size:12px;color:#86a098}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:17px 0}.mode{background:#091411;border:1px solid #1e3831;color:white;border-radius:12px;padding:12px;text-align:left;cursor:pointer}.mode.selected{border-color:#75f0ba;background:#10261f}.mode small,.mode b,.mode span{display:block}.mode small{color:#75f0ba;font-size:9px}.mode b{font-size:18px;margin:4px 0}.mode span{font-size:9px;color:#86a098}.finish{font-size:44px;color:#e6ff8c;font-weight:950}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.results span{padding:10px;background:#091411;border:1px solid #1e3831;border-radius:10px}.foot{display:flex;justify-content:space-between;padding:8px 12px;border-top:1px solid #1e3831;color:#86a098;font-size:10px}.info{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.info div{background:#0d1a17;border:1px solid #1e3831;border-radius:13px;padding:13px}.info b,.info span{display:block}.info b{font-size:11px}.info span{font-size:10px;color:#86a098;margin-top:4px}footer{display:flex;justify-content:space-between;gap:12px;padding:14px 3px;color:#688078;font-size:10px}footer a{color:inherit;text-decoration:none}@media(max-width:1279px) and (min-width:1024px){.rail{flex-basis:140px}}@media(max-width:1023px){.rail{display:none!important}.layout{display:block}}@media(max-width:720px){.topad{display:none!important}.boardwrap{aspect-ratio:1/1.3;min-height:570px}.modes,.info{grid-template-columns:1fr}.bottomad{min-height:50px}}
.hud{grid-template-columns:repeat(5,1fr)}
.savebox{margin:13px 0;padding:13px;border-radius:11px;background:#10261f;border:1px solid #2e624f}
.savebox b{display:block;font-size:12px}
.savebox span{display:block;color:#9bb3aa;font-size:10px;margin:4px 0 9px}
.notice{margin-top:9px;padding:11px 13px;border:1px solid #2b604e;background:#10261f;color:#9df0c8;border-radius:10px;font-size:11px}
.score-area{display:grid;grid-template-columns:1.2fr .8fr;gap:9px;margin-top:9px}
.leader-panel,.account-panel{background:#0d1a17;border:1px solid #1e3831;border-radius:13px;padding:13px}
.leader-head,.account-panel{display:flex;justify-content:space-between;align-items:center;gap:12px}
.leader-head h3{margin:0;font-size:12px}.leader-head span,.account-panel span{font-size:9px;color:#86a098}
.account-panel b,.account-panel span{display:block}.account-panel span{margin-top:3px}
.leader-row{display:grid;grid-template-columns:30px 1fr auto;gap:8px;padding:7px 0;border-top:1px solid #193028;font-size:10px}
.leader-row:first-child{border-top:0}.leader-row span:first-child{color:#86a098}.leader-row b{font-variant-numeric:tabular-nums}
.empty-leader{padding:8px 0;color:#86a098;font-size:10px}
@media(max-width:720px){.score-area{grid-template-columns:1fr}.hud{grid-template-columns:repeat(3,1fr)}.hud>div:nth-child(4),.hud>div:nth-child(5){display:none}}

.tile-layer{
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  pointer-events:auto;
}
.tile-hit{
  appearance:none;
  -webkit-appearance:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  min-width:0;
  min-height:0;
}
.tile-hit:focus{
  outline:1px solid rgba(117,240,186,.45);
  outline-offset:-1px;
}

/* FLOW V2.4 interaction-layer lock */
.overlay{
  z-index:20 !important;
}
.tile-layer{
  z-index:5 !important;
  pointer-events:none !important;
}
.tile-layer.active{
  pointer-events:auto !important;
}

/* Keep the actual puzzle board centered and comfortably sized */
.boardwrap canvas{
  position:absolute;
  inset:0;
}

/* FLOW V2.5 — single-layer DOM board */
.boardwrap{
  display:flex;
  align-items:center;
  justify-content:center;
}
.boardwrap canvas,
.tile-layer{
  display:none !important;
}
.dom-board{
  position:relative;
  z-index:4;
  display:grid;
  width:min(100%, 780px);
  aspect-ratio:1/1;
  background:#081310;
  border:1px solid #173127;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}
.flow-tile{
  position:relative;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:1px solid #11241e;
  background:#0b1915;
  cursor:pointer;
  overflow:hidden;
  appearance:none;
  -webkit-appearance:none;
}
.flow-tile.live{
  background:#102b23;
}
.flow-tile:focus-visible{
  outline:2px solid #e6ff8c;
  outline-offset:-2px;
}
.flow-segment{
  position:absolute;
  left:50%;
  top:50%;
  width:42%;
  height:10%;
  border-radius:999px;
  background:#29473f;
  transform-origin:0 50%;
}
.flow-tile.live .flow-segment{
  background:#75f0ba;
  box-shadow:0 0 10px rgba(117,240,186,.22);
}
.flow-segment.up{transform:translate(0,-50%) rotate(-90deg)}
.flow-segment.right{transform:translate(0,-50%) rotate(0deg)}
.flow-segment.down{transform:translate(0,-50%) rotate(90deg)}
.flow-segment.left{transform:translate(0,-50%) rotate(180deg)}
.flow-node{
  position:absolute;
  left:50%;
  top:50%;
  width:16%;
  aspect-ratio:1;
  border-radius:50%;
  background:#47665d;
  transform:translate(-50%,-50%);
}
.flow-tile.live .flow-node{background:#b6ffda}
.flow-tile.source::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:44%;
  aspect-ratio:1;
  border:2px solid #e6ff8c;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
@media(max-width:720px){
  .dom-board{width:100%}
}

/* FLOW V2.6 — board fit + source visibility */
.boardwrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px !important;
}

.dom-board{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  flex:0 0 auto;
}

.flow-tile{
  isolation:isolate;
}

.flow-segment{
  z-index:1;
}

.flow-node{
  z-index:2;
}

.source-bulb{
  position:absolute;
  left:50%;
  top:50%;
  width:42%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#efffa8;
  border:2px solid #ffffff;
  box-shadow:
    0 0 0 3px rgba(230,255,140,.28),
    0 0 12px rgba(230,255,140,.95),
    0 0 26px rgba(117,240,186,.65);
  z-index:4;
  pointer-events:none;
}

.flow-tile.source{
  background:#18372c;
  box-shadow:inset 0 0 0 2px rgba(230,255,140,.55);
}

.flow-tile.source::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:68%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:2px solid rgba(230,255,140,.65);
  border-radius:50%;
  box-shadow:0 0 18px rgba(230,255,140,.45);
  z-index:3;
  pointer-events:none;
}

@media(max-width:720px){
  .boardwrap{
    padding:8px !important;
  }
}


/* FULL-VIEW PLAY AREA */
.stage,.game-stage,.playfield,.boardwrap{max-height:calc(100svh - 180px)!important}
@media(max-width:760px){.stage,.game-stage,.playfield,.boardwrap{max-height:calc(100svh - 165px)!important}}

/* FLOW MODERN VISUAL SYSTEM V3 — presentation only */
:root{--flow-bg:#070a12;--flow-panel:#101725;--flow-panel-2:#151f31;--flow-line:rgba(144,177,223,.18);--flow-text:#f5f8ff;--flow-muted:#91a0b6;--flow-cyan:#65e9ff;--flow-green:#7fffb8;--flow-lime:#d8ff83;--flow-violet:#a58aff}
html[data-game="flow"]{color-scheme:dark}
body{background:radial-gradient(circle at 12% 5%,rgba(70,211,255,.14),transparent 28rem),radial-gradient(circle at 88% 28%,rgba(152,93,255,.12),transparent 32rem),linear-gradient(180deg,#070a12,#0a101b 55%,#070a12);color:var(--flow-text);background-attachment:fixed}
.page{width:min(1180px,100%);padding:14px}
header{min-height:66px;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--flow-line)}
.brand i{overflow:hidden;background:#121c2b;border:1px solid rgba(101,233,255,.34);box-shadow:0 0 22px rgba(101,233,255,.12)}.brand i img{display:block;width:100%;height:100%;object-fit:cover}.brand b{font-size:13px;letter-spacing:.7px}.brand span{color:var(--flow-muted);font-size:9px}
.btn{min-height:40px;border-color:var(--flow-line);border-radius:11px;background:#131c2a;color:var(--flow-text);font-size:10px;transition:transform .13s ease,border-color .13s ease,background .13s ease}.btn:hover{transform:translateY(-1px);border-color:rgba(101,233,255,.48);background:#192538}.primary,.home{background:linear-gradient(135deg,var(--flow-lime),var(--flow-green));border-color:transparent;color:#07130e;box-shadow:0 8px 26px rgba(127,255,184,.10)}
.sg-audio-btn{width:40px!important;padding:0!important}.sg-audio-btn svg{display:block}.sg-audio-btn.muted{color:#748196!important}
.layout{display:block}.layout main{max-width:980px;margin:auto}.game{border-color:var(--flow-line);border-radius:24px;background:linear-gradient(150deg,rgba(17,24,38,.97),rgba(9,14,24,.98));box-shadow:0 28px 90px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.025)}
.hud{padding:0;gap:1px;background:var(--flow-line);border-bottom-color:var(--flow-line)}.hud>div{min-width:0;padding:13px 15px 12px;background:rgba(9,14,23,.9)}.hud small,.results small{color:var(--flow-muted);font-weight:850;letter-spacing:.7px}.hud b{display:block;margin-top:4px;font-size:19px;line-height:1}.hud>div:first-child b{color:var(--flow-green)}
.boardwrap{min-height:560px;padding:18px!important;background:linear-gradient(rgba(101,233,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(101,233,255,.028) 1px,transparent 1px),radial-gradient(circle at 50% 45%,rgba(51,111,163,.18),transparent 61%),#080e18;background-size:30px 30px,30px 30px,auto,auto}
.dom-board{border:1px solid rgba(101,233,255,.15);border-radius:18px;background:#090f1a;box-shadow:0 0 0 1px rgba(255,255,255,.018),0 24px 70px rgba(0,0,0,.3),inset 0 0 55px rgba(61,129,195,.045);overflow:hidden}
.flow-tile{border-color:rgba(93,125,167,.11);background:#0b121e;-webkit-tap-highlight-color:transparent}.flow-tile:hover{background:#101b2a}.flow-tile.live{background:linear-gradient(145deg,rgba(17,51,54,.94),rgba(12,34,41,.94));box-shadow:inset 0 0 12px rgba(101,233,255,.04)}.flow-tile:focus-visible{outline:2px solid var(--flow-lime);outline-offset:-2px;z-index:6}
.flow-segment{height:11%;background:#30435b;box-shadow:inset 0 0 0 1px rgba(187,213,255,.04)}.flow-tile.live .flow-segment{background:linear-gradient(90deg,var(--flow-cyan),var(--flow-green));box-shadow:0 0 8px rgba(101,233,255,.42),0 0 16px rgba(127,255,184,.14)}.flow-node{width:18%;background:#4a607a;box-shadow:0 0 0 1px rgba(207,228,255,.07)}.flow-tile.live .flow-node{background:#efffff;box-shadow:0 0 9px rgba(101,233,255,.9),0 0 18px rgba(127,255,184,.34)}
.source-bulb{background:#f5ffbd;border-color:#fff;box-shadow:0 0 0 3px rgba(216,255,131,.24),0 0 14px rgba(216,255,131,.95),0 0 32px rgba(101,233,255,.64)}.flow-tile.source{background:#18313a;box-shadow:inset 0 0 0 2px rgba(216,255,131,.6)}.flow-tile.source::after{border-color:rgba(216,255,131,.8);box-shadow:0 0 20px rgba(216,255,131,.5)}
.overlay{background:rgba(5,9,16,.76);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.modal{border-color:rgba(137,175,226,.24);border-radius:23px;background:linear-gradient(145deg,rgba(23,33,51,.98),rgba(12,19,31,.98));box-shadow:0 28px 90px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.04)}.modal em{color:var(--flow-cyan);letter-spacing:1.4px}.modal h1{font-size:clamp(32px,5vw,45px);letter-spacing:-1.8px;line-height:1}.modal p{color:#aab6c9;line-height:1.6}.modes{gap:10px}.mode{min-height:94px;border-color:var(--flow-line);background:#0a111d;color:var(--flow-text);transition:transform .14s ease,border-color .14s ease,background .14s ease}.mode:hover{transform:translateY(-2px);border-color:rgba(101,233,255,.42)}.mode.selected{border-color:var(--flow-green);background:linear-gradient(145deg,rgba(25,69,65,.72),rgba(16,37,45,.9));box-shadow:inset 0 0 0 1px rgba(127,255,184,.08)}.mode small{color:var(--flow-green)}.mode span{color:var(--flow-muted)}.finish{color:var(--flow-lime);text-shadow:0 0 28px rgba(216,255,131,.2)}.results span{border-color:var(--flow-line);background:#09111c}
.foot{padding:10px 14px;border-top-color:var(--flow-line);background:#0a111d;color:var(--flow-muted)}.info{gap:10px}.info div,.leader-panel,.account-panel{border-color:var(--flow-line);background:linear-gradient(145deg,rgba(16,23,37,.94),rgba(10,16,26,.94))}.info b{color:#eaf8ff}.info span,.leader-head span,.account-panel span,.empty-leader{color:var(--flow-muted)}.score-area{gap:10px}.leader-row{border-top-color:var(--flow-line)}.leader-row b{color:var(--flow-lime)}.savebox,.notice{border-color:rgba(127,255,184,.28);background:rgba(22,64,56,.48)}
footer{color:#75849a}
@media(max-width:720px){.page{padding:8px}header{align-items:flex-start;gap:8px}.brand span{display:none}header>div:last-child{display:flex;justify-content:flex-end;gap:5px;flex-wrap:wrap}.game{border-radius:18px}.hud>div{padding:10px 8px}.hud b{font-size:17px}.boardwrap{min-height:500px;padding:8px!important}.dom-board{border-radius:12px}.modal{padding:21px 14px}.modes{grid-template-columns:repeat(3,1fr)}.mode{min-height:84px;padding:9px}.mode b{font-size:15px}.mode span{display:none}.info{grid-template-columns:1fr}.score-area{grid-template-columns:1fr}}
@media(max-width:430px){header{display:grid;grid-template-columns:1fr}header>div:last-child{justify-content:flex-start}.boardwrap{width:100%;min-width:0;min-height:420px;overflow:hidden}.dom-board{width:100%!important;height:auto!important;max-width:100%!important;aspect-ratio:1}.modes{grid-template-columns:1fr}.mode{min-height:auto}.mode span{display:block}.hud{grid-template-columns:repeat(3,1fr)}.foot{display:grid;gap:4px}}
@media(prefers-reduced-motion:reduce){.btn,.mode{transition:none}}