*{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}}