*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none}
body{display:flex;justify-content:center}.app-shell{position:relative;width:min(100vw,760px);min-height:100dvh;background:#031729;overflow:hidden;box-shadow:0 0 60px #000}.screen{position:relative;width:100%;background:#031729}.screen-img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}.hotspot{position:absolute;border:0;background:transparent;padding:0;cursor:pointer}.hotspot:focus-visible{outline:2px solid #ffd24c;outline-offset:-2px}.toast{position:fixed;z-index:9999;left:50%;bottom:9vh;transform:translate(-50%,18px);max-width:min(88vw,620px);padding:11px 16px;border:1px solid #19c9ff;border-radius:14px;background:rgba(0,19,34,.96);box-shadow:0 8px 30px #0009;color:white;font-weight:800;text-align:center;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}

/* Canonical six-tab nav used on the Wheel page to replace the outdated seven-tab reference bar. */
.nav-cover{position:absolute;left:0;right:0;bottom:0;height:9.1%;display:grid;grid-template-columns:repeat(6,1fr);background:linear-gradient(180deg,#041b2e 0%,#031422 100%);border-top:1px solid #0f8ec1;z-index:5}.nav-cover button{border:0;border-right:1px solid #12435e;background:transparent;color:#ddecf8;font-size:clamp(10px,2.8vw,20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em}.nav-cover button:last-child{border-right:0}.nav-cover button.active{color:#ffd34e;background:radial-gradient(circle at 50% 40%,rgba(255,177,0,.25),transparent 68%);box-shadow:inset 0 -3px #ffb000}.nav-icon{font-size:1.5em;line-height:1}.nav-label{font-weight:700}

/* PLAYABLE GAME */
.game-screen{position:relative;width:100%;aspect-ratio:966/1628;background:url('assets/game.png') center top/100% 100% no-repeat;overflow:hidden}.game-board{position:absolute;left:18.9%;top:23.65%;width:61.55%;height:55.2%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:.35%;padding:.9%;border:2px solid #82e7ff;border-radius:3.2%;background:linear-gradient(180deg,rgba(0,16,27,.98),rgba(0,10,18,.98));box-shadow:inset 0 0 24px #008bc055,0 0 9px #11c9ff88;z-index:3}.tile{position:relative;border:0;border-radius:18%;padding:0;background:radial-gradient(circle at 50% 45%,#0d3855 0,#062238 55%,#021521 100%);overflow:hidden;cursor:pointer;transition:transform .12s,filter .12s,opacity .12s}.tile img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #0008);pointer-events:none}.tile.selected{transform:scale(.88);filter:brightness(1.25) drop-shadow(0 0 7px #fff)}.tile.removing{animation:fruit-pop .24s ease forwards}.tile.drop-in{animation:drop-in .22s ease-out}.tile.striped::after,.tile.wrapped::after,.tile.rainbow::after{content:"";position:absolute;inset:8%;border-radius:20%;pointer-events:none}.tile.striped::after{border:3px solid #fff8;box-shadow:inset 0 0 0 3px #ffd84b88;transform:skew(-9deg)}.tile.wrapped::after{border:4px dashed #ffd84b;box-shadow:0 0 8px #ff8c00,inset 0 0 8px #ff8c00}.tile.rainbow::after{border:4px solid transparent;background:conic-gradient(#ff3b30,#ffcc00,#34c759,#00a7ff,#af52de,#ff2d55,#ff3b30) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;box-shadow:0 0 10px #fff}.special-star{position:absolute;right:4%;top:2%;font-size:clamp(9px,2.4vw,17px);text-shadow:0 0 5px #000;color:#fff;pointer-events:none}.game-hud{position:absolute;z-index:6;font-weight:900;text-shadow:0 2px 3px #000}.moves-value{left:76.8%;top:85.2%;width:14%;text-align:center;font-size:clamp(16px,4.6vw,34px)}.goals{left:8.5%;top:85.7%;width:46%;display:flex;justify-content:space-around;gap:1%;font-size:clamp(9px,2.4vw,17px)}.goal{display:flex;align-items:center;gap:.28em;white-space:nowrap}.goal img{width:1.35em;height:1.35em;object-fit:contain}.game-message{position:absolute;left:50%;top:49%;z-index:20;transform:translate(-50%,-50%) scale(.8);padding:14px 20px;border:2px solid #2bd4ff;border-radius:18px;background:rgba(3,39,69,.94);font-size:clamp(22px,6vw,42px);font-weight:1000;opacity:0;pointer-events:none;transition:.18s;text-align:center}.game-message.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.blastfx{position:absolute;z-index:16;width:31%;left:34.5%;top:39%;opacity:0;pointer-events:none;mix-blend-mode:screen}.blastfx.go{animation:blast .55s ease-out}.game-lock{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:#00101bcc;font-size:clamp(18px,5vw,36px);font-weight:900}.game-lock.show{display:flex}
@keyframes fruit-pop{0%{transform:scale(1);opacity:1}55%{transform:scale(.1);filter:brightness(2.8);opacity:.8}100%{transform:scale(0);opacity:0}}@keyframes drop-in{from{transform:translateY(-35%);opacity:.2}to{transform:translateY(0);opacity:1}}@keyframes blast{0%{opacity:0;transform:scale(.12)}25%{opacity:1}100%{opacity:0;transform:scale(1.55)}}

/* Visible debug-free title chip only on game page so the web page always carries its product name. */
.game-name-chip{position:absolute;left:2%;top:1.1%;z-index:7;font-weight:900;font-size:clamp(10px,2.7vw,18px);opacity:0;pointer-events:none}
@media (min-width:761px){body{background:radial-gradient(circle at top,#123a59,#000 55%)}.app-shell{margin:16px 0;border-radius:18px;min-height:auto}.toast{bottom:35px}}
/* v4: direct finger/mouse swipe. No tap-to-select interaction. */
.game-board{touch-action:none;user-select:none;-webkit-user-select:none}
.tile{touch-action:none;user-select:none;-webkit-user-select:none}
.tile.dragging{transform:scale(.92);filter:brightness(1.12)}
.tile.swapping{transition:transform .12s ease}
/* Fruit PNGs are the same CFB fruit crops with the old board background removed. */
.tile img{width:94%;height:94%;margin:3%;object-fit:contain}

/* v5 fixes: the number printed in the supplied game artwork is masked and the live counter occupies exactly that same spot. */
.moves-value{
  left:74.8%;top:86.55%;width:14.3%;height:4.65%;
  display:flex;align-items:center;justify-content:center;
  background:#071d30;border-radius:10px;
  font-size:clamp(24px,6vw,43px);line-height:1;color:#fff;
  text-shadow:0 2px 3px #000;z-index:8;
}

/* Air Support cards are individually selectable. */
.air-selected{position:absolute;left:2.05%;width:15.55%;height:12.3%;border:3px solid #ffd246;border-radius:10px;z-index:7;pointer-events:none;box-shadow:0 0 14px #ffb000, inset 0 0 14px #ffb00055;transition:top .16s ease;opacity:0}
.air-selected.show{opacity:1}.air-selected span{position:absolute;right:4px;top:4px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#ffd246;color:#091729;font-weight:1000;font-size:16px;box-shadow:0 0 8px #0008}

/* The supplied Wheel reference is square; extend its page to the same mobile page height as the rest without shrinking the wheel. */
.wheel-page{min-height:calc(min(100vw,760px) * 1.68);background:linear-gradient(180deg,#101b25 0%,#061522 72%,#031422 100%)}
.wheel-page .screen-img{width:100%;height:auto;display:block}
.wheel-page .nav-cover{height:7.3%;min-height:72px}