:root{color-scheme:dark;--bg:#050a13;--cyan:#45eaff;--green:#55f598;--purple:#b36bff;--orange:#ff9c42;--red:#ff526d;--text:#eafaff;--muted:#8ba9b8;--board-size:min(88vw,66vh,610px);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-width:300px;min-height:100dvh;overflow-x:hidden;color:var(--text);overscroll-behavior:none;background:radial-gradient(circle at 18% 12%,#1c85c42e,transparent 30%),radial-gradient(circle at 84% 80%,#632ca62b,transparent 32%),linear-gradient(145deg,#07111f,#040811 62%)}button{font:inherit}button:focus-visible{outline:3px solid #fff;outline-offset:2px}[hidden]{display:none!important}
.network-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;opacity:.48;background-image:linear-gradient(#59e2ff2e 1px,transparent 1px),linear-gradient(90deg,#59e2ff2e 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(#000,transparent 92%)}.network-bg:before,.network-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 9%,#45eaff66 9% 9.2%,transparent 9.2% 72%,#55f59847 72% 72.2%,transparent 72.2%),linear-gradient(0deg,transparent 24%,#b36bff4d 24% 24.2%,transparent 24.2% 68%,#45eaff4d 68% 68.2%,transparent 68.2%)}.network-bg:after{transform:rotate(180deg);opacity:.4}.network-bg i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan),0 0 22px var(--cyan);animation:dataPulse 7s linear infinite}.network-bg i:nth-child(1){top:24%;left:-2%}.network-bg i:nth-child(2){top:68%;left:-10%;animation-delay:-3s;animation-duration:10s;background:var(--green)}.network-bg i:nth-child(3){top:42%;left:-15%;animation-delay:-5s;animation-duration:12s;background:var(--purple)}.network-bg i:nth-child(n+4){top:-8%;animation:dataDrop 9s linear infinite}.network-bg i:nth-child(4){left:72%;animation-delay:-4s}.network-bg i:nth-child(5){left:9%;animation-duration:12s;background:var(--orange)}.network-bg i:nth-child(6){left:88%;animation-delay:-2s;background:var(--red)}@keyframes dataPulse{to{transform:translateX(110vw)}}@keyframes dataDrop{to{transform:translateY(115vh)}}
.app-shell{position:relative;width:min(1180px,100%);min-height:100dvh;margin:auto;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));display:flex;flex-direction:column}.topbar{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.brand{display:flex;align-items:center;gap:11px;min-width:0}.brand svg{width:42px;height:42px;flex:none;overflow:visible;fill:none;stroke:var(--cyan);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 8px #45eaffb3)}.brand h1{margin:0;font-size:clamp(1.25rem,4.5vw,2rem);line-height:1;letter-spacing:-.035em;text-transform:uppercase}.brand p{margin:6px 0 0;color:var(--muted);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}.header-actions{display:flex;gap:8px}.icon-button{min-width:48px;min-height:48px;padding:7px 10px;display:grid;place-items:center;gap:2px;color:var(--text);background:#0c1b2ce6;border:1px solid #6ac8e233;border-radius:12px;cursor:pointer}.icon-button:active{transform:scale(.96)}.button-label{font-size:.62rem;color:var(--muted)}.pause-icon,.pause-mark{width:19px;height:19px;display:inline-block;border-left:6px solid var(--cyan);border-right:6px solid var(--cyan)}.sound-icon{color:var(--red);font-size:1.2rem;font-weight:900;line-height:1}.sound-icon.on{color:var(--green);font-size:1rem}
.game-layout{flex:1;display:grid;gap:18px;align-items:center;justify-content:center}.dashboard{width:min(100%,610px);display:grid;gap:10px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-card,.objective-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#0f2134f0,#08121ff0);border:1px solid #69d6ef29;box-shadow:inset 0 1px #ffffff0a,0 12px 30px #00000038}.stat-card{min-height:82px;padding:11px 14px;border-radius:15px;display:grid;grid-template-columns:1fr auto;align-items:end}.stat-card:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.moves-card:after{background:var(--purple);box-shadow:0 0 10px var(--purple)}.stat-card span{grid-column:1/-1;color:var(--muted);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}.stat-card strong{font-size:clamp(1.8rem,7vw,2.45rem);line-height:1}.stat-card small{color:var(--muted);padding-bottom:3px}.stat-card b{color:var(--cyan)}.score-pop{animation:scorePop .42s}@keyframes scorePop{45%{transform:scale(1.18);color:var(--green);text-shadow:0 0 15px var(--green)}}
.objective-card{padding:12px 14px;border-radius:15px}.objective-head{display:flex;justify-content:space-between;gap:12px;font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.objective-head b{color:var(--text);white-space:nowrap}.objective-card p{margin:8px 0 0;color:var(--muted);font-size:.75rem}.progress-track{height:8px;margin-top:10px;overflow:hidden;border-radius:20px;background:#02060b;box-shadow:inset 0 1px 3px #000}.progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--green));box-shadow:0 0 12px var(--cyan);transition:width .35s}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.primary-button,.secondary-button{min-height:47px;padding:10px 18px;border-radius:12px;border:1px solid transparent;color:#04111a;font-weight:800;text-transform:uppercase;letter-spacing:.07em;cursor:pointer}.primary-button{background:linear-gradient(135deg,var(--cyan),#4ff6bd);box-shadow:0 0 18px #45eaff38}.secondary-button{color:var(--text);background:#0d1f30e6;border-color:#70d7f140}.primary-button:active,.secondary-button:active{transform:translateY(1px) scale(.98)}
.board-area{position:relative;display:grid;justify-items:center;min-width:0}.board-frame{position:relative;padding:clamp(6px,1.8vw,11px);border-radius:22px;background:linear-gradient(145deg,#162e44f2,#050c17fa);border:1px solid #5be1ff52;box-shadow:0 0 0 1px #080c14e6,0 0 34px #1cb3db1f,0 25px 55px #0000006b}.board-frame:before{content:"";position:absolute;inset:5px;border:1px solid #56e0ff17;border-radius:16px;pointer-events:none}.board{width:var(--board-size);height:var(--board-size);display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr);gap:clamp(2px,.65vw,5px);position:relative;z-index:1;touch-action:none;user-select:none;-webkit-user-select:none}.tile{--tile-color:var(--cyan);position:relative;min-width:0;padding:0;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--tile-color) 48%,transparent);border-radius:clamp(7px,1.6vw,13px);background:linear-gradient(145deg,color-mix(in srgb,var(--tile-color) 17%,#102032),#040a12f5 72%);box-shadow:inset 0 1px #ffffff17,0 2px 5px #00000061;cursor:pointer;transform:translateZ(0);transition:filter .15s,border-color .15s,box-shadow .15s}.tile:after{content:"";position:absolute;inset:12%;border-radius:8px;background:radial-gradient(circle,color-mix(in srgb,var(--tile-color) 24%,transparent),transparent 68%);opacity:.65}.tile svg{position:relative;z-index:1;width:72%;height:72%;overflow:visible;color:var(--tile-color);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--tile-color) 65%,transparent))}.tile .fill{fill:color-mix(in srgb,var(--tile-color) 20%,#07111f)}.tile .solid{fill:var(--tile-color)}.tile .stroke{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.tile[data-type="0"]{--tile-color:#46e8ff}.tile[data-type="1"]{--tile-color:#59f391}.tile[data-type="2"]{--tile-color:#b56cff}.tile[data-type="3"]{--tile-color:#ff596f}.tile[data-type="4"]{--tile-color:#ffab45}.tile[data-type="5"]{--tile-color:#7b8dff}
.tile.selected{border-color:#fff;filter:brightness(1.28);box-shadow:0 0 0 2px var(--tile-color),0 0 17px var(--tile-color);animation:selectedPulse .8s ease-in-out infinite alternate}@keyframes selectedPulse{to{transform:scale(.94)}}.tile.matching{z-index:4;animation:matchBurst .34s ease forwards}@keyframes matchBurst{45%{transform:scale(1.16) rotate(4deg);filter:brightness(1.8);box-shadow:0 0 26px var(--tile-color)}to{transform:scale(.15);opacity:0}}.tile.falling{animation:tileFall .33s cubic-bezier(.2,.8,.3,1.18) both}@keyframes tileFall{from{transform:translateY(calc(-1*var(--fall,2)*82%));opacity:.2}}.tile.invalid{animation:invalid .32s}@keyframes invalid{20%,60%{transform:translateX(-7px);border-color:var(--red)}40%,80%{transform:translateX(7px);border-color:var(--red)}}.board.reshuffling .tile{animation:reshuffle .55s;animation-delay:calc(var(--delay)*8ms)}@keyframes reshuffle{45%{transform:scale(.35) rotate(70deg);opacity:.25}}.board.win{animation:winBoard .9s}.board.loss{animation:lossBoard .8s}@keyframes winBoard{40%{box-shadow:0 0 60px var(--green);filter:brightness(1.35)}}@keyframes lossBoard{30%,65%{filter:grayscale(.8) brightness(.6);transform:translateX(-3px)}48%,82%{transform:translateX(3px)}}
.cascade-label{position:absolute;z-index:8;top:44%;pointer-events:none;color:#fff;font-size:clamp(1.4rem,8vw,3.2rem);font-weight:950;font-style:italic;text-transform:uppercase;text-shadow:0 0 8px var(--purple),0 0 26px var(--cyan),3px 3px #1b2b4fb3;opacity:0}.cascade-label.show{animation:cascadeCallout .7s}@keyframes cascadeCallout{0%{opacity:0;transform:scale(.3) rotate(-8deg)}35%,65%{opacity:1;transform:scale(1.08) rotate(-2deg)}to{opacity:0;transform:scale(1.35)}}.gesture-hint{margin:9px 0 0;font-size:.72rem;color:var(--muted);text-align:center}.board-overlay{position:absolute;z-index:10;inset:0;display:grid;place-items:center;border-radius:20px;background:#030911d1;backdrop-filter:blur(7px);text-align:center}.board-overlay>div{padding:24px}.board-overlay .pause-mark{width:36px;height:40px;border-width:10px;filter:drop-shadow(0 0 12px var(--cyan))}.board-overlay h2{margin:15px 0 5px;text-transform:uppercase}.board-overlay p{margin:0 0 18px;color:var(--muted)}
.modal{width:min(92vw,480px);max-height:min(85dvh,620px);overflow:auto;padding:clamp(22px,6vw,36px);color:var(--text);background:linear-gradient(145deg,#0d1f31fa,#040a13fc);border:1px solid #5ae6ff66;border-radius:22px;box-shadow:0 0 50px #2fc4e22e}.modal::backdrop{background:#01050ac2;backdrop-filter:blur(5px)}.modal-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% -20%,#45eaff33,transparent 48%)}.dialog-icon{width:60px;height:60px;margin:0 auto 16px;border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 20px #45eaff61}.dialog-icon:before{content:"";display:block;width:24px;height:24px;margin:16px;border:4px solid var(--cyan);transform:rotate(45deg)}.modal.win-modal{border-color:#55f598a6;animation:modalWin .55s}.modal.loss-modal{border-color:#ff526d8c;animation:modalLoss .45s}.win-modal .dialog-icon{border-color:var(--green);box-shadow:0 0 25px var(--green)}.win-modal .dialog-icon:before{width:12px;height:25px;margin:12px 20px;border:solid var(--green);border-width:0 5px 5px 0;transform:rotate(45deg)}.loss-modal .dialog-icon,.loss-modal .dialog-icon:before{border-color:var(--red)}
@keyframes modalWin{from{transform:scale(.6);opacity:0}}@keyframes modalLoss{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}.modal h2{position:relative;margin:0 0 12px;text-align:center;font-size:clamp(1.55rem,7vw,2.15rem);text-transform:uppercase}.dialog-body{position:relative;color:var(--muted);line-height:1.5}.dialog-body p{text-align:center}.dialog-body ul{margin:16px 0;padding-left:22px}.dialog-body li{margin:9px 0}.dialog-actions{position:relative;display:flex;gap:10px;margin-top:22px}.dialog-actions button{flex:1}.toast{position:fixed;z-index:30;left:50%;bottom:max(22px,calc(env(safe-area-inset-bottom) + 12px));padding:10px 17px;border:1px solid #45eaff57;border-radius:100px;background:#05121df0;color:var(--text);box-shadow:0 0 24px #45eaff33;transform:translate(-50%,30px);opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;font-size:.82rem}.toast.show{transform:translate(-50%);opacity:1}
@media(min-width:760px){:root{--board-size:min(69vw,66vh,620px)}.app-shell{padding-inline:max(24px,env(safe-area-inset-left))}.dashboard{grid-template-columns:1fr 1.45fr;align-items:stretch}.stats{grid-row:span 2}.stat-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.stat-card span{grid-column:auto}.stat-card small{margin-top:5px}}@media(orientation:landscape) and (min-width:720px){:root{--board-size:min(64vh,56vw,610px)}.topbar{margin-bottom:8px}.game-layout{grid-template-columns:minmax(250px,360px) auto;gap:clamp(18px,4vw,48px)}.dashboard{grid-template-columns:1fr;width:100%}.stats{grid-row:auto}.stat-card{min-height:92px}.button-label{display:none}}@media(max-height:620px) and (orientation:landscape){:root{--board-size:min(68vh,58vw)}.app-shell{padding-top:max(7px,env(safe-area-inset-top));padding-bottom:max(7px,env(safe-area-inset-bottom))}.topbar{min-height:45px;margin:0}.brand svg{width:34px;height:34px}.brand p,.gesture-hint,.objective-card p{display:none}.icon-button{min-width:42px;min-height:42px}.dashboard{gap:7px}.stat-card{min-height:68px;padding:8px 12px}.stat-card strong{font-size:1.8rem}.objective-card{padding:9px 12px}.controls button{min-height:42px;padding:7px 10px}}@media(max-width:380px){:root{--board-size:min(92vw,57vh)}.brand svg{display:none}.brand p{font-size:.62rem}.app-shell{padding-inline:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Tablet-first usability pass */
body {
  font-size: 16px;
  background:
    radial-gradient(circle at 15% 10%, rgba(16, 158, 218, .24), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(137, 61, 219, .2), transparent 36%),
    linear-gradient(145deg, #061321, #03070e 64%);
}
.app-shell { width: min(1360px, 100%); }
.topbar {
  padding: 4px 2px 10px;
  border-bottom: 1px solid rgba(69, 234, 255, .12);
}
.stat-card, .objective-card {
  background:
    linear-gradient(145deg, rgba(21, 48, 72, .96), rgba(7, 17, 29, .98));
  border-color: rgba(114, 225, 248, .25);
}
.tile {
  border-width: 2px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--tile-color) 26%, #13243a), rgba(3, 9, 17, .98) 74%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    inset 0 -5px 12px rgba(0,0,0,.25),
    0 4px 9px rgba(0,0,0,.38);
}
.tile::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 10%;
  right: 10%;
  width: clamp(4px, .7vw, 7px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tile-color);
  box-shadow: 0 0 8px var(--tile-color);
  opacity: .85;
}
.tile svg { width: 80%; height: 80%; }
.tile.selected {
  border-color: white;
  box-shadow: 0 0 0 3px var(--tile-color), 0 0 26px var(--tile-color);
}
.sound-icon.on { letter-spacing: -4px; transform: translateX(-2px); }

@media (min-width: 760px) {
  :root { --board-size: min(82vw, 72vh, 740px); }
  .app-shell {
    padding: max(18px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
      max(26px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  }
  .topbar { min-height: 78px; margin-bottom: 18px; }
  .brand svg { width: 54px; height: 54px; }
  .brand h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
  .brand p { font-size: .86rem; }
  .icon-button { min-width: 60px; min-height: 60px; padding: 9px 13px; }
  .button-label { display: block; font-size: .72rem; }
  .dashboard { width: min(100%, 740px); gap: 14px; }
  .stats, .controls { gap: 14px; }
  .stat-card { min-height: 108px; padding: 16px 19px; }
  .stat-card span { font-size: .85rem; }
  .stat-card strong { font-size: 3rem; }
  .stat-card small { font-size: .92rem; }
  .objective-card { padding: 16px 18px; }
  .objective-head { font-size: .9rem; }
  .objective-card p, .gesture-hint { font-size: .9rem; }
  .progress-track { height: 12px; }
  .primary-button, .secondary-button { min-height: 58px; font-size: 1rem; }
  .board-frame { padding: 12px; border-radius: 28px; }
  .board { gap: 6px; }
  .tile { border-radius: 15px; }
}

@media (orientation: landscape) and (min-width: 900px) {
  :root { --board-size: min(75vh, 60vw, 700px); }
  body { min-height: 100svh; }
  .app-shell {
    min-height: 100svh;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .topbar { min-height: 58px; margin-bottom: 2px; padding-bottom: 4px; }
  .brand svg { width: 48px; height: 48px; }
  .brand h1 { font-size: 2.2rem; }
  .gesture-hint { display: none; }
  .game-layout {
    grid-template-columns: minmax(350px, 430px) auto;
    gap: clamp(30px, 4vw, 58px);
  }
  .dashboard { max-width: 430px; }
  .button-label { display: block; }
}

@media (max-height: 760px) and (orientation: landscape) {
  :root { --board-size: min(73vh, 58vw, 650px); }
  .topbar { min-height: 58px; margin-bottom: 6px; }
  .brand svg { width: 42px; height: 42px; }
  .brand h1 { font-size: 1.7rem; }
  .stat-card { min-height: 80px; padding: 10px 14px; }
  .stat-card strong { font-size: 2.25rem; }
  .objective-card { padding: 10px 14px; }
  .primary-button, .secondary-button { min-height: 50px; }
}

/* Product polish */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(115, 224, 255, .035) 4px);
  mix-blend-mode: screen;
}
.brand h1 {
  color: transparent;
  background: linear-gradient(110deg, #fff 12%, #8ef5ff 52%, #78ffbd 88%);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 26px rgba(69, 234, 255, .18);
}
.brand p { display: flex; align-items: center; gap: 8px; }
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: statusPulse 1.8s ease-in-out infinite;
}
@keyframes statusPulse { 50% { opacity: .35; transform: scale(.7); } }
.icon-button {
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(23, 51, 75, .95), rgba(7, 17, 29, .98));
  border-color: rgba(120, 225, 249, .28);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.25);
}
.icon-button[aria-pressed="true"] {
  border-color: rgba(85, 245, 152, .6);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 18px rgba(85, 245, 152, .16);
}
.sound-icon { width: 28px; height: 24px; overflow: visible; }
.sound-icon .speaker-shape { fill: currentColor; stroke: none; }
.sound-icon .sound-waves, .sound-icon .mute-mark {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.sound-icon { color: var(--red); }
.sound-icon .sound-waves { display: none; }
.sound-icon.on { color: var(--green); transform: none; }
.sound-icon.on .sound-waves { display: block; }
.sound-icon.on .mute-mark { display: none; }
.mission-tag {
  display: none;
  align-items: center;
  gap: 9px;
  color: #a9c5d2;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mission-tag span {
  width: 9px;
  height: 9px;
  border: 2px solid var(--cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--cyan);
}
.mission-tag b { margin-left: auto; color: var(--cyan); }
.stat-card {
  isolation: isolate;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(31, 66, 91, .96), rgba(7, 18, 31, .98) 72%);
}
.stat-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 90px;
  height: 90px;
  right: -28px;
  top: -36px;
  border: 1px solid rgba(69, 234, 255, .15);
  transform: rotate(45deg);
}
.moves-card::before { border-color: rgba(179, 107, 255, .22); }
.stat-card strong { letter-spacing: -.045em; text-shadow: 0 0 22px rgba(255,255,255,.11); }
.objective-card {
  border-radius: 20px;
  border-color: rgba(89, 226, 255, .3);
  background:
    linear-gradient(120deg, rgba(14, 41, 61, .98), rgba(6, 16, 28, .98)),
    radial-gradient(circle at 90% 0, rgba(85, 245, 152, .14), transparent 45%);
}
.objective-head span { color: #b5d9e6; font-weight: 800; }
.objective-head b { color: var(--green); text-shadow: 0 0 12px rgba(85,245,152,.3); }
.progress-track { border: 1px solid rgba(101, 220, 243, .15); }
.progress-track span { position: relative; overflow: hidden; }
.progress-track span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-100%);
  animation: progressSweep 2.2s ease-in-out infinite;
}
@keyframes progressSweep { 60%,100% { transform: translateX(120%); } }
.primary-button, .secondary-button {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.primary-button {
  background: linear-gradient(115deg, #45eaff, #54f3ac 80%);
  box-shadow: 0 8px 24px rgba(45, 221, 211, .2), inset 0 1px rgba(255,255,255,.55);
}
.secondary-button { box-shadow: inset 0 1px rgba(255,255,255,.07), 0 8px 24px rgba(0,0,0,.2); }
.primary-button:hover, .secondary-button:hover { filter: brightness(1.12); }
.primary-button:active, .secondary-button:active { transform: translateY(2px) scale(.98); }
.protocol-legend { display: none; }
.protocol {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid rgba(117, 211, 235, .13);
  border-radius: 12px;
  background: rgba(7, 19, 32, .72);
  color: #a9c5d2;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.protocol i { width: 9px; height: 9px; border-radius: 50%; background: var(--protocol-color); box-shadow: 0 0 9px var(--protocol-color); }
.protocol.firewall { --protocol-color: #ff596f; }
.protocol.wifi { --protocol-color: #ffab45; }
.protocol.switch { --protocol-color: #7b8dff; }
.board-frame {
  isolation: isolate;
  border: 1px solid rgba(92, 230, 255, .48);
  background:
    linear-gradient(145deg, rgba(29, 66, 91, .98), rgba(4, 12, 22, .99)),
    radial-gradient(circle at 50% 0, rgba(69,234,255,.2), transparent 42%);
  box-shadow:
    0 0 0 1px rgba(3, 8, 14, .95),
    0 0 42px rgba(22, 188, 224, .16),
    0 28px 70px rgba(0,0,0,.48);
}
.tile { overflow: hidden; }
.tile[data-type="0"] { border-radius: 18px 7px 18px 7px; }
.tile[data-type="1"] { border-radius: 22px; }
.tile[data-type="2"] { border-radius: 8px; }
.tile[data-type="3"] { border-radius: 23px 23px 11px 11px; }
.tile[data-type="4"] { border-radius: 26px; }
.tile[data-type="5"] { border-radius: 7px 16px 7px 16px; }
.tile svg { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tile-color) 82%, transparent)); }
.tile:active { filter: brightness(1.35); transform: scale(.94); }

@media (orientation: landscape) and (min-width: 900px) {
  .mission-tag { display: flex; }
  .protocol-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
}

@media (max-height: 820px) and (orientation: landscape) {
  .protocol-legend { grid-template-columns: repeat(3, 1fr); }
  .protocol { min-height: 32px; padding: 5px 9px; font-size: .69rem; }
}

/* Packet Match number-routing board */
.number-board { grid-template: repeat(9, 1fr) / repeat(9, 1fr); }
.utility-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.text-button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(112, 215, 241, .24);
  border-radius: 13px;
  color: #aed0dc;
  background: rgba(7, 19, 32, .72);
  font-weight: 750;
  cursor: pointer;
}
.text-button:active { transform: translateY(1px) scale(.98); }
.difficulty-control {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0;
  border: 1px solid rgba(112, 215, 241, .24);
  border-radius: 13px;
  color: #a9c5d2;
  background: rgba(7, 19, 32, .72);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.difficulty-control > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.install-button {
  position: fixed;
  z-index: 25;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  width: min(260px, calc(100% - 28px));
  transform: translateX(-50%);
  border-color: rgba(85, 245, 152, .45);
  color: #c9ffe0;
  background: linear-gradient(120deg, rgba(14, 62, 66, .94), rgba(8, 31, 45, .96));
  box-shadow: 0 0 18px rgba(85, 245, 152, .12);
}
.install-button:active { transform: translateX(-50%) scale(.98); }
.difficulty-control select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 5px 24px 5px 7px;
  border: 1px solid rgba(85, 245, 152, .32);
  border-radius: 10px;
  color: #eafaff;
  background: #0b2131;
  font: inherit;
  letter-spacing: .03em;
  text-transform: none;
}
.number-board { grid-template: repeat(9, 1fr) / repeat(9, 1fr); }
.number-tile {
  --tile-color: #46e8ff;
  isolation: isolate;
  overflow: hidden;
  border-width: 1px;
  border-radius: 13px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--tile-color) 25%, #14283b), rgba(3, 9, 17, .98) 72%);
}
.number-tile::after {
  inset: 8%;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--tile-color) 28%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tile-color) 23%, transparent), transparent 64%);
}
.number-tile::before {
  top: auto;
  right: 8%;
  bottom: 8%;
  width: clamp(3px, .45vw, 6px);
}
.number-tile[data-value="1"] { --tile-color: #46e8ff; }
.number-tile[data-value="2"] { --tile-color: #59f391; }
.number-tile[data-value="3"] { --tile-color: #b56cff; }
.number-tile[data-value="4"] { --tile-color: #ffab45; }
.number-tile[data-value="5"] { --tile-color: #ff596f; }
.number-tile[data-value="6"] { --tile-color: #6a8cff; }
.number-tile[data-value="7"] { --tile-color: #ff6fd2; }
.number-tile[data-value="8"] { --tile-color: #ffd84d; }
.number-tile[data-value="9"] { --tile-color: #35e0c1; }
.node-number {
  position: relative;
  z-index: 2;
  font-size: clamp(1.05rem, 3.2vw, 2rem);
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #f4fdff;
  text-shadow: 0 0 5px var(--tile-color), 0 0 14px color-mix(in srgb, var(--tile-color) 75%, transparent);
}
.node-port {
  position: absolute;
  z-index: 2;
  left: 9%;
  bottom: 9%;
  width: 18%;
  height: 3px;
  border-radius: 4px;
  background: var(--tile-color);
  box-shadow: 0 0 7px var(--tile-color);
  opacity: .75;
}
.number-tile.empty {
  pointer-events: none;
  border-color: rgba(96, 171, 192, .08);
  background: rgba(4, 14, 24, .28);
  box-shadow: inset 0 0 0 1px rgba(96, 171, 192, .025);
  cursor: default;
}
.number-tile.empty::before, .number-tile.empty::after { display: none; }
.number-tile.selected {
  z-index: 4;
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--tile-color), 0 0 30px var(--tile-color), inset 0 0 18px color-mix(in srgb, var(--tile-color) 45%, transparent);
}
.number-tile.hint { animation: hintPulse .55s ease-in-out infinite alternate; }
@keyframes hintPulse {
  to { transform: scale(.9); border-color: #fff; box-shadow: 0 0 22px var(--green); filter: brightness(1.55); }
}
.number-tile.packet-added { animation: packetAdded .38s cubic-bezier(.2,.8,.3,1.25) both; }
@keyframes packetAdded {
  from { transform: translateY(-18px) scale(.72); opacity: 0; filter: brightness(1.8); }
}
.route-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
}
.route-layer line {
  stroke: var(--green);
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--green)) drop-shadow(0 0 9px var(--cyan));
}
.route-layer.show { opacity: 1; }
.route-layer.hint-route line {
  stroke: var(--cyan);
  stroke-dasharray: 12 8;
  animation: routeFlow .45s linear infinite;
}
@keyframes routeFlow { to { stroke-dashoffset: -20; } }

@media (min-width: 760px) {
  .utility-controls { gap: 14px; }
  .text-button { min-height: 50px; font-size: .92rem; }
}

@media (max-height: 820px) and (orientation: landscape) {
  .utility-controls { gap: 7px; }
  .text-button { min-height: 44px; padding: 5px 8px; font-size: .76rem; }
  .number-tile { border-radius: 10px; }
}