@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap";:root{--bg:#050816;--bg-2:#091023;--panel:#0a1226bd;--panel-solid:#0b1226;--line:#a0c9ff29;--text:#f1f7fff0;--muted:#afc1e0c2;--cyan:#48d7ff;--cyan-2:#7efaff;--green:#51f5b6;--gold:#ffcb52;--red:#ff6f95;--shadow:0 24px 72px #00000070;--radius:24px;--font-ui:"Outfit", system-ui, sans-serif;--font-display:"Space Grotesk", "Outfit", system-ui, sans-serif}#root{min-height:100svh}body{min-height:100svh;color:var(--text);background:radial-gradient(circle at 20% 10%,#5b67ff38,#0000 24%),radial-gradient(circle at 80% 20%,#00cfff2e,#0000 28%),radial-gradient(circle at 50% 78%,#ff9b411f,#0000 26%),linear-gradient(#060915 0%,#050814 50%,#04060f 100%);margin:0}button,input{font:inherit}button{cursor:pointer;border:0}*{box-sizing:border-box}.app-shell{min-height:100svh;color:var(--text);font-family:var(--font-ui);position:relative;overflow:hidden}.background-orbs{filter:blur(18px);pointer-events:none;background:radial-gradient(circle at 15% 20%,#51f5b624,#0000 20%),radial-gradient(circle at 85% 15%,#48d7ff1f,#0000 24%),radial-gradient(circle at 55% 70%,#ffcb521a,#0000 26%);animation:26s ease-in-out infinite alternate drift;position:absolute;inset:-20%}@keyframes drift{0%{transform:translate(-1.5%,-1%)scale(1)}to{transform:translate(1.5%,1%)scale(1.05)}}.home-screen,.game-screen{z-index:1;width:min(1400px,100%);min-height:100svh;margin:0 auto;padding:24px;position:relative}.home-screen{align-content:center;gap:22px;display:grid}.hero-card,.info-card,.hud,.modal,.board-shell{border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(#0d1730db,#070d1cc2)}.hero-card{border-radius:30px;grid-template-columns:1.1fr .9fr;gap:20px;padding:26px;display:grid}.hero-copy{min-height:286px;padding-right:clamp(190px,23vw,330px);position:relative}.eyebrow,.modal__label{text-transform:uppercase;letter-spacing:.24em;color:#7efaffe6;font-size:.74rem}.hero-copy h1{font-family:var(--font-display);letter-spacing:-.06em;color:#f8fbff;text-shadow:0 0 18px #48d7ff2e;margin:10px 0 8px;font-size:clamp(3rem,7vw,6.2rem);line-height:.9}.hero-board-art{aspect-ratio:1;pointer-events:none;opacity:.92;filter:drop-shadow(0 18px 42px #00000057)drop-shadow(0 0 28px #48d7ff29);place-items:center;width:clamp(178px,21vw,292px);display:grid;position:absolute;top:4px;right:clamp(0px,1.8vw,22px)}.hero-board-art__svg{width:100%;height:100%;overflow:visible}.hero-board-art__number{fill:#fffffff5;font-family:var(--font-display);text-shadow:0 0 8px #ffffff47;dominant-baseline:middle;font-size:14px;font-weight:700}.hero-tag{max-width:34rem;color:var(--muted);font-size:clamp(1rem,2.3vw,1.22rem);line-height:1.5}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:18px;display:flex}.primary-button,.secondary-button,.pill,.icon-button,.mini-button,.direction-button{border-radius:18px;transition:transform .18s,box-shadow .18s,border-color .18s,background .18s,opacity .18s}.primary-button,.secondary-button{color:#fff;letter-spacing:.01em;min-height:48px;padding:0 18px;font-weight:700}.primary-button{color:#04101b;background:linear-gradient(135deg,#48d7ff,#51f5b6fa);box-shadow:0 16px 34px #48d7ff3d}.secondary-button{color:var(--text);background:#ffffff0f;border:1px solid #ffffff1f}.primary-button:hover,.secondary-button:hover,.icon-button:hover,.mini-button:hover,.pill:hover,.direction-button:hover{transform:translateY(-1px)}.level-pills{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}.how-to-button{color:var(--cyan-2);background:#48d7ff1a;border-color:#48d7ff42;margin-left:auto}.pill{min-height:42px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;background:#ffffff0a;border:1px solid #ffffff1a;padding:0 14px}.pill:disabled{opacity:.4;cursor:not-allowed;transform:none}.pill.active{color:#04101b;background:linear-gradient(135deg,#ffcb52,#ffefacf2);border-color:#ffd3628a}.hero-preview{background:radial-gradient(circle at 25% 20%,#48d7ff1f,#0000 34%),#050b1899;border:1px solid #7fabff29;border-radius:24px;flex-direction:column;justify-content:space-between;padding:18px;display:flex}.preview-grid{color:#dbe8ffe6;grid-template-columns:auto 1fr;align-items:center;gap:10px;display:grid}.preview-grid strong{color:#fff;font-size:1.1rem}.preview-badge{min-height:36px;color:var(--cyan-2);background:#48d7ff1f;border:1px solid #7efaff33;border-radius:999px;align-self:flex-start;align-items:center;margin-top:16px;padding:0 12px;display:inline-flex}.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.info-card{border-radius:22px;padding:20px}.info-card h2{color:#fff;font-family:var(--font-display);margin:0 0 10px}.info-card p{color:var(--muted);margin:0;line-height:1.55}.game-screen{grid-template-rows:auto minmax(0,1fr) auto;gap:14px;display:grid}.hud{border-radius:24px;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;display:grid}.hud__brand{appearance:none;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:14px;gap:6px;padding:0;display:grid}.hud__brand:hover .brand-mark,.hud__brand:focus-visible .brand-mark{color:var(--cyan-2);text-shadow:0 0 18px #48d7ff4d}.hud__brand:focus-visible{outline-offset:6px;outline:2px solid #48d7ff8c}.brand-mark{font-family:var(--font-display);color:#fff;font-size:1.8rem;line-height:1}.brand-sub{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;flex-wrap:wrap;gap:10px;font-size:.9rem;display:flex}.hud__stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.stat-card{background:#ffffff0d;border:1px solid #ffffff14;border-radius:18px;padding:10px 12px}.stat-card span{color:#acc1e0b3;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px;font-size:.76rem;display:block}.stat-card strong{color:#fff;font-size:1rem}.hud__actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.icon-button,.mini-button{min-height:42px;color:var(--text);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;padding:0 14px}.icon-button.hint,.mini-button.glow{color:var(--cyan-2);background:#48d7ff1f;border-color:#48d7ff38}.icon-button.pause{color:#ffe6a0;background:#ffcb5224;border-color:#ffcb5233}.board-stage{place-items:center;min-height:0;padding:8px 0 10px;display:grid;position:relative}.combo-banner{z-index:4;color:#fff;letter-spacing:.12em;text-transform:uppercase;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(135deg,#ffcb5238,#48d7ff2e);border:1px solid #ffffff29;border-radius:999px;justify-content:center;align-items:center;min-height:40px;padding:0 16px;font-weight:700;animation:1.1s pulseBanner;display:inline-flex;position:absolute;top:-2px}.resolved-board-badge{z-index:5;color:#ffe6a0;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 0 14px #ffcb526b;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;background:linear-gradient(135deg,#ffcb5247,#ffb50029),#070e1ed1;border:1px solid #ffcb526b;border-radius:999px;justify-content:center;align-items:center;min-height:36px;padding:0 18px;font-size:.78rem;font-weight:900;display:inline-flex;position:absolute;top:46px;box-shadow:0 0 28px #ffcb5229}.image-reference-button{z-index:6;width:44px;height:44px;color:var(--cyan-2);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#081020d1;border:1px solid #48d7ff47;border-radius:16px;justify-content:center;align-items:center;font-size:1.2rem;font-weight:900;display:inline-flex;position:absolute;top:28px;right:calc(50% - min(47vw,380px));box-shadow:0 0 22px #48d7ff1f}.image-reference-button:hover,.image-reference-button:focus-visible{border-color:#7efaff80;transform:translateY(-1px);box-shadow:0 0 28px #48d7ff38}@keyframes pulseBanner{0%{opacity:0;transform:translateY(-6px)scale(.96)}15%{opacity:1}to{opacity:.98;transform:translateY(0)scale(1)}}.board-shell{border-radius:30px;place-items:center;width:min(94vw,760px,112svh - 190.4px);padding:12px;display:grid}.hex-board{touch-action:none;width:100%;height:auto;display:block;overflow:visible}.hex-tile{cursor:pointer;transform-box:fill-box;transform-origin:50%}.hex-tile:hover path:first-child{filter:brightness(1.04)}.hex-tile.is-selected{animation:1.6s ease-in-out infinite selectedPulse}.hex-tile.is-petal{animation:1.4s ease-in-out infinite petalGlow}@keyframes selectedPulse{0%,to{opacity:1}50%{opacity:.9}}@keyframes petalGlow{0%,to{filter:drop-shadow(0 0 #48d7ff00)}50%{filter:drop-shadow(0 0 18px #48d7ff4d)}}.tile-number{fill:#fff;font-family:var(--font-display);text-shadow:0 0 10px #ffffff52;pointer-events:none;font-size:17px;font-weight:700}.rotation-controls{pointer-events:none;z-index:3;justify-content:space-between;width:min(94vw,760px,112svh - 190.4px);padding:0 22px;display:flex;position:absolute;bottom:42px;left:50%;transform:translate(-50%)}.direction-button{text-align:center;color:#fff;pointer-events:auto;background:#081020cc;border:1px solid #ffffff1f;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:126px;min-height:70px;padding:12px 14px;display:flex}.direction-button span{font-size:1.3rem;line-height:1}.direction-button strong{text-transform:uppercase;letter-spacing:.12em;font-size:.85rem}.direction-button.ccw{color:#8feaff;border-color:#48d7ff33}.direction-button.cw{color:#d6ff89;border-color:#79ff7833}.direction-button:disabled,.icon-button:disabled,.mini-button:disabled{opacity:.42;cursor:not-allowed;transform:none}.mobile-toolbar{flex-wrap:wrap;justify-content:center;gap:10px;display:none}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#03060fb8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{border-radius:28px;width:min(92vw,520px);padding:24px;position:relative}.modal-close-button{color:#f1f7ffe6;background:#ffffff14;border:1px solid #ffffff24;border-radius:999px;place-items:center;width:40px;height:40px;font-weight:800;line-height:1;display:grid;position:absolute;top:12px;right:12px}.modal-close-button:hover{background:#ffffff1f;transform:translateY(-1px)}.modal h2{font-family:var(--font-display);color:#fff;margin:8px 0;font-size:clamp(2rem,4vw,2.8rem)}.modal p{color:var(--muted);margin:0;line-height:1.55}.modal__actions{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.settings-list{gap:12px;margin-top:18px;display:grid}.how-to-modal{width:min(94vw,980px);max-height:min(88svh,900px);overflow:auto}.image-reference-modal{width:min(92vw,640px)}.reference-image-wrap{background:#ffffff0a;border:1px solid #ffffff1a;border-radius:24px;margin-top:18px;display:grid;position:relative;overflow:hidden;box-shadow:0 24px 70px #0000005c}.reference-image{object-fit:contain;width:100%;max-height:min(68vh,640px);display:block}.reference-grid-toggle{z-index:3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#070f1fb8;border:1px solid #ffffff29;border-radius:16px;place-items:center;width:44px;height:44px;display:grid;position:absolute;top:12px;right:12px;box-shadow:0 12px 28px #00000052}.reference-grid-toggle:hover,.reference-grid-toggle:focus-visible,.reference-grid-toggle.active{background:#48d7ff29;border-color:#7efaff7a}.reference-grid-toggle__icon{clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);filter:drop-shadow(0 0 8px #48d7ff61);background:linear-gradient(30deg,#0000 30%,#7efaffe6 31% 36%,#0000 37%),linear-gradient(90deg,#0000 30%,#7efaffe6 31% 36%,#0000 37%),linear-gradient(150deg,#0000 30%,#7efaffe6 31% 36%,#0000 37%);width:23px;height:23px}.reference-grid-overlay{z-index:2;pointer-events:none;box-sizing:border-box;opacity:.48;filter:drop-shadow(0 0 6px #070f1fc7);width:100%;height:100%;padding:3%;position:absolute;inset:0}.reference-grid-overlay polygon{fill:#ffffff08;stroke:#ffffffbd;stroke-width:1.7px;vector-effect:non-scaling-stroke}.how-to-modal h3{color:#fff;font-family:var(--font-display);margin:0 0 8px;font-size:1.2rem}.how-to-modal ul{color:var(--muted);margin:10px 0 0;padding-left:20px;line-height:1.55}.how-to-modal li+li{margin-top:6px}.how-section{background:#ffffff0b;border-radius:22px;grid-template-columns:minmax(0,.9fr) minmax(280px,1.1fr);align-items:center;gap:18px;margin-top:22px;padding:16px;display:grid}.how-section--rules{display:block}.how-section--modes{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.how-mode-card{background:#08102085;border:1px solid #ffffff14;border-radius:20px;gap:12px;padding:16px;display:grid}.how-mode-card h3{color:#fff;font-family:var(--font-display);margin:0;font-size:1.18rem}.how-mode-card p{color:var(--muted);margin:0;line-height:1.55}.how-diagram-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.how-diagram{color:#dbe8ffe0;text-align:center;justify-items:center;gap:8px;margin:0;font-size:.83rem;display:grid}.how-diagram__svg{aspect-ratio:1;filter:drop-shadow(0 12px 26px #00000052)drop-shadow(0 0 16px #48d7ff24);width:min(100%,210px);overflow:visible}.how-diagram--solved .how-diagram__svg{width:min(100%,260px)}.how-diagram__number,.how-diagram__center{fill:#fff;font-family:var(--font-display);pointer-events:none;font-weight:800}.how-diagram__number{font-size:12px}.how-diagram__center{font-size:14px}.spin-arrow{opacity:.85;filter:drop-shadow(0 0 8px #ffcb5270)}.spin-arrow--left{transform-origin:50%;transform:scaleX(-1)}.solved-line{stroke:#ffcb52c2;stroke-width:8px;stroke-linecap:round;filter:drop-shadow(0 0 10px #ffcb5259)}.solved-line--alt{stroke:#48d7ffb8}.setting-row{background:#ffffff0d;border:1px solid #ffffff14;border-radius:18px;justify-content:space-between;align-items:flex-start;gap:14px;min-height:64px;padding:12px 14px;display:flex}.setting-copy{gap:5px;min-width:0;display:grid}.setting-title{color:#fff;font-weight:800}.setting-tooltip{color:#acc1e0d1;max-width:34rem;font-size:.84rem;line-height:1.35}.setting-row input{accent-color:#48d7ff;flex:none;width:20px;height:20px;margin-top:2px}.setting-select{color:#fff;background:#081020e6;border:1px solid #48d7ff3d;border-radius:14px;flex:none;min-width:170px;min-height:40px;padding:0 12px}.victory-modal{text-align:center}.victory-stars{justify-content:center;gap:10px;margin-top:16px;display:flex}.rating-note{color:#acc1e0c7;max-width:34rem;margin:10px auto 0;font-size:.86rem;line-height:1.45}.star{opacity:.32;font-size:2rem}.star.filled{opacity:1;color:var(--gold);text-shadow:0 0 18px #ffcb5259}.victory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;display:grid}.victory-grid div{background:#ffffff0d;border:1px solid #ffffff14;border-radius:18px;padding:12px}.victory-grid span{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;display:block}.victory-grid strong{color:#fff;margin-top:6px;font-size:1.2rem;display:block}.sparkle-layer{pointer-events:none;z-index:40;position:fixed;inset:0}.sparkle{--x:0px;--y:0px;background:linear-gradient(#fff,#48d7ff33);border-radius:999px;width:6px;height:6px;animation:1.1s ease-out forwards sparkleFly;position:absolute;box-shadow:0 0 12px #48d7ffa6,0 0 18px #ffcb5259}@keyframes sparkleFly{0%{opacity:0;transform:scale(.45)}12%{opacity:1}to{opacity:0;transform:scale(.04)}}@media (width<=980px){.hero-card{grid-template-columns:1fr}.hero-copy{min-height:260px;padding-right:clamp(176px,34vw,300px)}.hero-board-art{width:clamp(170px,32vw,260px);top:8px}.how-section,.how-section--modes,.mode-grid,.hud{grid-template-columns:1fr}.hud__stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hud__actions{justify-content:flex-start}.board-shell{width:min(96vw,760px,112svh - 235.2px)}.rotation-controls{width:min(96vw,760px,112svh - 235.2px);padding:0 18px;bottom:38px}}@media (width<=720px){.home-screen,.game-screen{padding:14px}.hero-card,.hud,.modal{border-radius:22px}.hero-copy{min-height:0;padding-right:0}.hero-board-art{width:min(64vw,250px);margin:8px 0 10px;position:relative;top:auto;right:auto}.how-to-button{width:100%;margin-left:0}.how-to-modal{width:min(94vw,620px);padding:20px}.how-section{padding:14px}.how-diagram-row{grid-template-columns:1fr}.hud__actions{display:none}.mobile-toolbar{display:flex}.board-stage{align-items:start;padding-top:0}.resolved-board-badge{top:20px}.image-reference-button{width:40px;height:40px;top:18px;right:28px}.board-shell{width:min(96vw,760px);padding:10px 10px 118px}.hex-board{width:min(100%,82vw);margin-top:-6px}.rotation-controls{width:min(96vw,760px);padding:0 44px;bottom:32px}.direction-button{width:118px;min-height:66px}.tile-number{font-size:16px}}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-text-size-adjust:100%}body{min-width:320px}a{color:inherit}button,input,select,textarea{font:inherit}