*{box-sizing:border-box}body{margin:0;background:#090b0d;color:#f3f4f5;font-family:Inter,system-ui,sans-serif}.page{width:min(1510px,100%);margin:auto;padding:12px}a{text-decoration:none;color:inherit}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:#d9f59b;color:#111;display:grid;place-items:center;font-style:normal;font-weight:950}.brand b,.brand span{display:block}.brand span{font-size:10px;color:#858d95}.btn{border:1px solid #292e34;background:#15191e;color:#fff;border-radius:9px;padding:8px 11px;font-size:11px;font-weight:800;cursor:pointer}.home{background:#20252b}.primary{background:#d9f59b;border-color:#d9f59b;color:#111}.large{padding:11px 17px}.ad{position:relative;display:flex;align-items:center;justify-content:center;background:#101317;border:1px solid #20262c;border-radius:9px}.ad:not(.has-ad):before{content:'ADVERTISEMENT';color:#4f5861;font-size:9px}.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:#111418;border:1px solid #292e34;border-radius:18px;overflow:hidden}.hud{display:grid;grid-template-columns:repeat(5,1fr);padding:10px 14px;border-bottom:1px solid #292e34}.hud small,.results small{display:block;color:#858d95;font-size:8px;text-transform:uppercase}.hud b{font-size:16px}.instruction{text-align:center;padding:12px;border-bottom:1px solid #292e34}.instruction small,.instruction strong,.instruction span{display:block}.instruction small{font-size:8px;color:#d9f59b}.instruction strong{font-size:16px}.instruction span{font-size:9px;color:#858d95}.stage{position:relative;min-height:540px;padding:18px;background:#0c0f12;display:flex;align-items:center;justify-content:center}.signal-grid{width:min(100%,760px);display:grid;gap:5px}.cell{aspect-ratio:1;border:1px solid #20262b;background:#12161a;border-radius:5px;display:grid;place-items:center;cursor:pointer;position:relative;overflow:hidden}.cell.found{border-color:#d9f59b;box-shadow:inset 0 0 0 1px #d9f59b}.cell.wrong{animation:wrong .22s}.glyph{width:44%;height:44%;position:relative;color:#d9dde0}.glyph.circle{border:3px solid currentColor;border-radius:50%}.glyph.square{border:3px solid currentColor}.glyph.diamond{border:3px solid currentColor;transform:rotate(45deg)}.glyph.cross:before,.glyph.cross:after{content:'';position:absolute;background:currentColor;left:46%;top:0;width:8%;height:100%}.glyph.cross:after{transform:rotate(90deg)}.glyph.arrow:before{content:'';position:absolute;left:12%;top:44%;width:62%;height:12%;background:currentColor}.glyph.arrow:after{content:'';position:absolute;right:8%;top:27%;width:34%;height:34%;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg)}.dot{position:absolute;width:7px;height:7px;background:currentColor;border-radius:50%;right:5%;top:5%}@keyframes wrong{50%{background:#54211e;transform:scale(.94)}}.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(6,8,10,.82);backdrop-filter:blur(6px)}.hidden{display:none!important}.modal{width:min(550px,94%);background:#12161a;border:1px solid #30373e;border-radius:20px;padding:24px;text-align:center}.compact{width:min(430px,92%)}.modal em{font-style:normal;color:#d9f59b;font-size:9px;font-weight:900}.modal h1{font-size:30px;margin:7px}.modal p{color:#858d95;font-size:11px}.preview{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:16px 0}.preview span,.results span{padding:9px;border:1px solid #292e34;border-radius:9px;background:#0c0f12;font-size:9px}.final{font-size:50px;font-weight:950;color:#d9f59b}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px}.foot{display:flex;justify-content:space-between;padding:8px 12px;border-top:1px solid #292e34;font-size:9px;color:#858d95}.info{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.info div{background:#111418;border:1px solid #292e34;border-radius:13px;padding:12px}.info b,.info span{display:block}.info b{font-size:11px}.info span{font-size:9px;color:#858d95;margin-top:3px}footer{display:flex;justify-content:space-between;gap:12px;padding:14px 3px;color:#717a82;font-size:10px}@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}.hud{grid-template-columns:repeat(3,1fr)}.hud>div:nth-child(4),.hud>div:nth-child(5){display:none}.stage{min-height:580px;padding:8px}.signal-grid{gap:3px}.preview,.info{grid-template-columns:1fr}.bottomad{min-height:50px}}
/* SIGNAL V2 — viewport fit + extended difficulty */
.stage{
  min-height:0 !important;
  height:auto !important;
  padding:12px !important;
  overflow:hidden !important;
}
.signal-grid{
  width:560px;
  height:560px;
  max-width:100%;
  max-height:100%;
  flex:0 0 auto;
}
.cell{
  min-width:0;
  min-height:0;
}
@media(max-width:720px){
  .stage{
    padding:6px !important;
  }
}

/* SIGNAL V2.1 — anomaly visibility lock */
.glyph{
  transition:none !important;
}
.glyph.offset-visible{transform:translate(12%, -10%) !important}
.glyph.rotate-soft{transform:rotate(12deg) !important}
.glyph.rotate-hard{transform:rotate(7deg) !important}
.glyph.mirror-visible{transform:scaleX(-1) !important}
.glyph.smaller-soft{width:34% !important;height:34% !important}
.glyph.smaller-hard{width:38% !important;height:38% !important}
.glyph.faded-soft{opacity:.58 !important}
.glyph.faded-hard{opacity:.72 !important}
.glyph.lighter-soft{color:#b7bec2 !important}
.glyph.lighter-hard{color:#c7cdd0 !important}
.glyph.filled-visible{background:currentColor !important}
.glyph.broken-visible{clip-path:inset(0 0 28% 0) !important}
.glyph.thin-visible{border-width:1px !important}
.glyph.extra-ring::after{
  content:"";
  position:absolute;
  inset:-18%;
  border:2px solid currentColor;
  border-radius:50%;
}
.glyph.extra-bar::after{
  content:"";
  position:absolute;
  width:55%;
  height:3px;
  background:currentColor;
  left:22%;
  bottom:-16%;
}

/* SIGNAL V2.2 — universal viewport fit */
html,body{min-height:100%}
.stage{min-height:0!important;height:auto!important;overflow:hidden!important;padding:8px!important}
.signal-grid{width:320px;height:320px;max-width:none!important;max-height:none!important;flex:0 0 auto}
.cell{min-width:0!important;min-height:0!important}
@media (max-height:900px){
  .page{padding-top:8px!important;padding-bottom:8px!important}
  .topad{min-height:60px!important}
  .hud{padding-top:7px!important;padding-bottom:7px!important}
  .instruction{padding-top:8px!important;padding-bottom:8px!important}
  .stage{padding:6px!important}
  .foot{padding-top:6px!important;padding-bottom:6px!important}
}
@media (max-height:760px){
  .topad{display:none!important}
  header{margin-bottom:6px!important}
  .hud{padding-top:5px!important;padding-bottom:5px!important}
  .instruction{padding-top:6px!important;padding-bottom:6px!important}
  .instruction span{display:none!important}
  .info{display:none!important}
  footer{padding-top:8px!important;padding-bottom:10px!important}
}
@media (max-height:650px){
  .brand span{display:none!important}
  .hud small{font-size:7px!important}
  .hud b{font-size:14px!important}
  .instruction strong{font-size:14px!important}
  .stage{padding:4px!important}
  .foot{font-size:8px!important}
}
@media(max-width:720px){.stage{padding:4px!important}}

.hud{grid-template-columns:repeat(6,1fr)}
.results{grid-template-columns:repeat(4,1fr)}
.savebox,.notice,.leader-panel,.account-panel{border:1px solid #292e34;border-radius:11px;background:#111418}
.savebox{margin:12px 0;padding:12px}.savebox b,.savebox span{display:block}.savebox b{color:#d9f59b;font-size:12px}.savebox span{color:#858d95;font-size:9px;margin:4px 0 10px}
.notice{margin-top:9px;padding:11px 13px;color:#d9f59b;font-size:10px}
.score-area{display:grid;grid-template-columns:1.35fr .65fr;gap:9px;margin-top:9px}
.leader-panel,.account-panel{padding:12px}.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:#858d95}.account-panel b,.account-panel span{display:block}
.leader-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:7px 0;border-top:1px solid #242a30;font-size:10px}.leader-row:first-child{border-top:0}.leader-row span:first-child{color:#858d95}.leader-row b{font-variant-numeric:tabular-nums}.empty-leader{padding:8px 0;color:#858d95;font-size:10px}
@media(max-width:720px){.score-area{grid-template-columns:1fr}.hud{grid-template-columns:repeat(3,1fr)}}


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

/* SIGNAL MODERN VISUAL SYSTEM V4 — presentation only */
:root{--si-bg:#05090e;--si-panel:#0e1720;--si-panel-2:#13212d;--si-line:rgba(114,169,196,.21);--si-text:#f3fbff;--si-muted:#8da1ae;--si-lime:#d9ff82;--si-cyan:#65e6ff;--si-red:#ff716b;--si-green:#80ffc1}
html[data-game="signal"]{color-scheme:dark}
body{background:radial-gradient(circle at 12% 4%,rgba(54,220,255,.14),transparent 29rem),radial-gradient(circle at 88% 30%,rgba(175,255,91,.08),transparent 31rem),linear-gradient(180deg,#05090e,#08131a 55%,#05090e);color:var(--si-text);background-attachment:fixed}
.page{padding:14px}header{border-color:var(--si-line)!important;background:linear-gradient(135deg,rgba(14,27,37,.97),rgba(7,14,22,.98))!important}.brand i{overflow:hidden;border:1px solid rgba(101,230,255,.38);background:#111d28 url('/assets/branding/smallgames-mark.png?v=6') center/cover no-repeat;color:transparent!important;font-size:0!important;box-shadow:0 0 22px rgba(101,230,255,.13)}.brand b{letter-spacing:.75px}.brand span{color:var(--si-muted)}
.btn{min-height:40px;border-color:var(--si-line);border-radius:10px;background:#13212b;color:var(--si-text);font-size:10px;transition:transform .13s ease,border-color .13s ease,background .13s ease}.btn:hover{transform:translateY(-1px);border-color:rgba(101,230,255,.5);background:#19303b}.primary{background:linear-gradient(135deg,var(--si-lime),#b9ff9c);border-color:transparent;color:#0b1608;box-shadow:0 9px 28px rgba(217,255,130,.12)}.sg-audio-btn{width:40px!important;padding:0!important}.sg-audio-btn.muted{color:#70828c!important}
.game{border-color:var(--si-line);border-radius:22px;background:linear-gradient(150deg,rgba(15,27,37,.98),rgba(7,14,21,.98));box-shadow:0 28px 88px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.025)}
.hud{gap:1px;padding:0;background:var(--si-line);border-bottom-color:var(--si-line)}.hud>div{min-width:0;padding:12px 11px;background:rgba(7,14,21,.96)}.hud small{color:var(--si-muted);font-weight:850;letter-spacing:.65px}.hud b{display:block;margin-top:4px;font-size:17px;line-height:1}.hud>div:nth-child(2) b{color:var(--si-cyan)}.hud>div:nth-child(4) b{color:var(--si-red)}.hud>div:nth-child(5) b{color:var(--si-lime)}.hud>div:last-child b{color:var(--si-green)}
.instruction{padding:13px;border-bottom-color:var(--si-line);background:#08131a}.instruction small{color:var(--si-cyan);font-weight:900;letter-spacing:1.25px}.instruction strong{font-size:17px;letter-spacing:-.2px}.instruction span{color:var(--si-muted);line-height:1.45}
.stage{background:linear-gradient(rgba(101,230,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(101,230,255,.026) 1px,transparent 1px),radial-gradient(circle at 50% 48%,rgba(38,94,111,.18),transparent 62%),#071017;background-size:28px 28px,28px 28px,auto,auto}.signal-grid{padding:5px;border:1px solid rgba(101,230,255,.13);border-radius:15px;background:#08121a;box-shadow:0 24px 70px rgba(0,0,0,.3),inset 0 0 45px rgba(49,114,134,.06)}.cell{border-color:rgba(130,167,190,.13);border-radius:6px;background:#0d1921;transition:border-color .1s ease,background .1s ease,transform .1s ease}.cell:hover{border-color:rgba(101,230,255,.35);background:#11232c}.cell:focus-visible{outline:2px solid var(--si-lime);outline-offset:-2px;z-index:2}.cell.found{border-color:var(--si-lime);background:rgba(50,79,35,.5);box-shadow:inset 0 0 0 1px rgba(217,255,130,.7),0 0 12px rgba(217,255,130,.14)}.glyph{color:#d9e4e9}.cell.found .glyph{color:#f3ffc9}.cell.wrong{animation:wrong .22s}
.overlay{background:rgba(3,8,12,.79);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.modal{border-color:rgba(130,182,208,.26);border-radius:23px;background:linear-gradient(145deg,rgba(18,34,45,.98),rgba(8,16,24,.98));box-shadow:0 30px 95px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.04)}.modal em{color:var(--si-cyan);letter-spacing:1.45px}.modal h1{font-size:clamp(29px,4.5vw,40px);letter-spacing:-1.45px;line-height:1.05}.modal p{color:#aabac4}.preview span,.results span{border-color:var(--si-line);background:#08131a}.final{color:var(--si-lime);text-shadow:0 0 28px rgba(217,255,130,.2)}.savebox,.notice{border-color:rgba(128,255,193,.28);background:rgba(17,58,44,.5)}
.foot{padding:10px 13px;border-top-color:var(--si-line);background:#08121a;color:var(--si-muted)}.info{gap:12px}.info div,.leader-panel,.account-panel{border-color:var(--si-line)!important;background:linear-gradient(145deg,rgba(14,26,35,.96),rgba(8,16,23,.96))!important}.info b,.leader-head h3,.account-panel b{color:#eefaff}.info span,.leader-head span,.account-panel span,.empty-leader{color:var(--si-muted)}.leader-row{border-top-color:var(--si-line)}.leader-row b{color:var(--si-lime)}
@media(max-width:720px){.page{padding:8px}.game{border-radius:17px}.hud>div{padding:10px 8px}.hud b{font-size:16px}.instruction strong{font-size:14px}.stage{background-size:22px 22px,22px 22px,auto,auto}.signal-grid{padding:3px;border-radius:11px}.modal{padding:21px 14px}.foot{display:grid;gap:4px}}
@media(max-width:430px){.preview,.results{grid-template-columns:1fr}.modal h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){.btn,.cell{transition:none}}
