:root {
  --bg1: #eaf4ff;
  --bg2: #fff0fb;
  --ink: #17234b;
  --muted: #727a9f;
  --panel: rgba(255,255,255,.88);
  --board-size: min(58vw, calc(100dvh - 225px), 620px);
  --gap: clamp(2px, .42vmin, 5px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; }
html { overflow: hidden; }
body {
  margin: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 11% 15%, rgba(69,187,255,.25), transparent 27%),
    radial-gradient(circle at 88% 13%, rgba(255,92,207,.20), transparent 29%),
    linear-gradient(145deg, var(--bg1), var(--bg2));
  color: var(--ink);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, system-ui, -apple-system, sans-serif;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; }
button:focus-visible { outline: 3px solid #52c8ff; outline-offset: 3px; }

.game-app {
  position: relative;
  isolation: isolate;
  width: min(1440px, 100vw);
  height: 100dvh;
  min-height: 0;
  margin: auto;
  padding:
    calc(var(--safe-top) + clamp(6px, 1.15vmin, 14px))
    calc(var(--safe-right) + clamp(7px, 1.4vmin, 18px))
    calc(var(--safe-bottom) + clamp(5px, .9vmin, 11px))
    calc(var(--safe-left) + clamp(7px, 1.4vmin, 18px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(5px, .9vmin, 11px);
  overflow: hidden;
}

.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(5px); opacity: .68; pointer-events: none; }
.ambient-a { width: 28vmin; height: 28vmin; left: -10vmin; top: 34%; background: radial-gradient(circle, rgba(47,143,255,.38), transparent 70%); }
.ambient-b { width: 33vmin; height: 33vmin; right: -12vmin; bottom: 2%; background: radial-gradient(circle, rgba(255,75,201,.26), transparent 72%); }

.topbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.05fr) minmax(260px, .9fr) auto;
  gap: clamp(7px, 1.2vw, 16px);
  align-items: center;
  min-width: 0;
}
.title-wrap { display: flex; align-items: center; gap: 9px; min-width: 0; }
.game-title { font-weight: 1000; font-size: clamp(18px, 2.25vw, 34px); line-height: .9; letter-spacing: -1px; white-space: nowrap; text-shadow: 0 3px 0 rgba(255,255,255,.88); }
.game-title span { display: block; color: #6b58ec; font-size: .68em; letter-spacing: .22em; margin-top: 5px; }
.mini-gem { width: clamp(16px, 2vmin, 23px); aspect-ratio: 1; transform: rotate(45deg); border-radius: 5px; box-shadow: inset 3px 3px 3px rgba(255,255,255,.65), 0 5px 10px rgba(62,75,160,.2); flex: 0 0 auto; }
.gem-cyan { background: linear-gradient(135deg, #79f1ff, #2586ff); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(4px, .65vw, 8px); min-width: 0; }
.stat-card { min-width: 0; background: var(--panel); border: 1px solid rgba(255,255,255,.92); box-shadow: 0 9px 24px rgba(62,68,139,.10); border-radius: clamp(10px, 1.2vw, 16px); padding: clamp(5px, .75vmin, 9px) 7px; text-align: center; backdrop-filter: blur(10px); }
.stat-card span { display: block; color: var(--muted); font-size: clamp(8px, .8vw, 11px); text-transform: uppercase; letter-spacing: .11em; }
.stat-card strong { display: block; margin-top: 1px; font-size: clamp(15px, 1.75vw, 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controls { display: flex; gap: clamp(4px, .55vw, 7px); }
.icon-btn { width: clamp(34px, 4.1vmin, 45px); height: clamp(34px, 4.1vmin, 45px); border: 0; border-radius: clamp(10px, 1.15vmin, 14px); background: rgba(255,255,255,.92); color: #4d5681; box-shadow: 0 7px 19px rgba(61,66,128,.14); cursor: pointer; transition: transform .15s ease, background .15s ease, opacity .15s ease; }
.icon-btn:hover { transform: translateY(-1px); background: #fff; }
.icon-btn.off { opacity: .46; }

.play-area {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(180px, 280px);
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  overflow: hidden;
}
.board-shell { position: relative; flex: 0 0 auto; width: var(--board-size); height: var(--board-size); max-width: 100%; aspect-ratio: 1; border-radius: clamp(18px, 2.4vmin, 29px); padding: clamp(6px, .9vmin, 11px); background: linear-gradient(145deg, #5574c9, #283776); box-shadow: 0 16px 42px rgba(29,44,108,.28), inset 0 2px 2px rgba(255,255,255,.27); }
.board { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); gap: var(--gap); padding: var(--gap); border-radius: clamp(14px, 1.8vmin, 21px); background: rgba(14,28,73,.65); touch-action: none; }
.cell { position: relative; min-width: 0; min-height: 0; border-radius: clamp(3px, .55vmin, 8px); background: rgba(255,255,255,.105); box-shadow: inset 0 1px 5px rgba(1,8,55,.22); overflow: hidden; transition: background .1s ease, transform .12s ease, opacity .12s ease; }
.cell::after { content: ""; position: absolute; inset: 18% 16% 48%; border-radius: 50%; background: rgba(255,255,255,.09); }
.cell.occupied { box-shadow: none; }
.cell.valid-preview { background: rgba(126,255,190,.46); outline: 2px solid rgba(174,255,216,.92); transform: scale(.94); }
.cell.invalid-preview { background: rgba(255,87,129,.38); outline: 2px solid rgba(255,120,151,.78); }
.cell.line-flash { animation: lineFlash .32s ease-in-out 2; z-index: 3; }
.cell.blast-target { outline: 3px solid #fff0a8; box-shadow: 0 0 18px #ffd947, inset 0 0 10px rgba(255,255,255,.35); }
.cell.burst { animation: burstCell .36s ease forwards; }
.cell.place-pop { animation: placePop .24s cubic-bezier(.2,1.45,.4,1); }

.crystal { position: absolute; inset: 0; border-radius: inherit; background: var(--crystal); box-shadow: inset 2px 2px 0 rgba(255,255,255,.34), inset -3px -4px 7px rgba(31,25,105,.17), 0 3px 8px rgba(20,29,91,.28); overflow: hidden; }
.crystal::before { content: ""; position: absolute; left: 13%; right: 13%; top: 8%; height: 32%; border-radius: 50%; background: linear-gradient(to bottom, rgba(255,255,255,.67), rgba(255,255,255,0)); transform: skewX(-10deg); }
.crystal::after { content: ""; position: absolute; width: 56%; height: 56%; right: -20%; bottom: -28%; transform: rotate(45deg); background: rgba(255,255,255,.12); }
.c0 { --crystal: linear-gradient(145deg, #6fe7ff, #2b82ff); }
.c1 { --crystal: linear-gradient(145deg, #ff90dc, #c94bf2); }
.c2 { --crystal: linear-gradient(145deg, #ffe26b, #ff9c35); }
.c3 { --crystal: linear-gradient(145deg, #87f7ad, #2ccf83); }
.c4 { --crystal: linear-gradient(145deg, #b69cff, #6f57ec); }
.c5 { --crystal: linear-gradient(145deg, #ff9d8e, #ff5f67); }
.board-hint { position: absolute; pointer-events: none; inset: 10px; border-radius: 18px; }

.side-panel { min-width: 0; width: min(100%, 280px); display: flex; flex-direction: column; justify-content: center; gap: clamp(7px, 1.1vmin, 13px); }
.blast-card, .mission-card { border: 1px solid rgba(255,255,255,.93); background: var(--panel); box-shadow: 0 12px 32px rgba(55,60,127,.12); border-radius: clamp(14px, 1.8vmin, 22px); padding: clamp(10px, 1.45vmin, 17px); backdrop-filter: blur(12px); }
.blast-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.blast-heading small, .mission-card small { display: block; color: #8589a7; font-size: clamp(8px, .7vw, 10px); letter-spacing: .12em; }
.blast-heading strong { display: block; margin-top: 2px; font-size: clamp(14px, 1.45vw, 20px); }
#blastPercent { color: #5c58d8; font-weight: 1000; font-size: clamp(15px, 1.45vw, 20px); }
.meter-track { position: relative; height: clamp(12px, 1.7vmin, 19px); background: #e2e6f4; border-radius: 99px; margin: clamp(7px, 1vmin, 13px) 0 clamp(5px, .7vmin, 9px); overflow: hidden; box-shadow: inset 0 2px 5px rgba(53,54,107,.12); }
.meter-fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: inherit; background: linear-gradient(90deg, #56d6ff, #7659ff 55%, #ff5fd2); transition: width .35s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 20px rgba(121,83,255,.45); }
.meter-shine { position: absolute; inset: 2px; border-radius: inherit; background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.55) 48%, transparent 60%); transform: translateX(-140%); animation: shine 2.8s ease-in-out infinite; pointer-events: none; }
#blastHelp { margin: 0; font-size: clamp(9px, .86vw, 12px); line-height: 1.35; color: var(--muted); }
.blast-card.ready { animation: readyPulse 1.5s ease-in-out infinite; }
.blast-chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.blast-choice { border: 1px solid #dddff0; background: #f4f5fb; color: #656a8e; border-radius: 11px; padding: clamp(6px, .8vmin, 9px) 5px; cursor: pointer; font-size: clamp(9px, .8vw, 12px); }
.blast-choice.active { color: white; border-color: transparent; background: linear-gradient(135deg, #625cf4, #a44be5); box-shadow: 0 6px 15px rgba(91,75,216,.25); }
.hidden { display: none !important; }
.mission-card { display: flex; align-items: center; gap: 10px; padding: clamp(9px, 1.15vmin, 14px); }
.mission-icon { width: clamp(34px, 4.4vmin, 42px); aspect-ratio: 1; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(145deg, #ffcf58, #ff8a4c); box-shadow: 0 7px 15px rgba(241,139,67,.25); }
.mission-card p { margin: 2px 0 0; color: var(--muted); font-size: clamp(9px, .8vw, 12px); line-height: 1.25; }

.tray-section { min-height: 0; width: min(860px, 100%); margin: 0 auto; }
.tray-label { display: flex; align-items: baseline; justify-content: space-between; padding: 0 6px clamp(3px, .45vmin, 6px); }
.tray-label span { font-size: clamp(9px, .8vw, 12px); letter-spacing: .13em; color: #626b91; font-weight: 900; }
.tray-label small { color: #9098b4; font-size: clamp(9px, .78vw, 11px); }
.piece-tray { height: clamp(76px, 14.5dvh, 126px); min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(5px, .8vw, 11px); }
.piece-slot { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; border-radius: clamp(12px, 1.5vmin, 20px); background: rgba(255,255,255,.76); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 9px 24px rgba(62,67,135,.09); touch-action: none; overflow: hidden; }
.piece-slot::before { content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(108,103,163,.15); border-radius: 13px; pointer-events: none; }
.piece { display: grid; gap: clamp(2px, .35vmin, 3px); cursor: grab; touch-action: none; padding: clamp(5px, 1vmin, 10px); filter: drop-shadow(0 5px 7px rgba(31,33,93,.19)); transform-origin: center; transition: transform .15s ease, opacity .15s ease; }
.piece:active { cursor: grabbing; }
.piece.used { opacity: 0; transform: scale(.6); pointer-events: none; }
.piece-cell { width: clamp(12px, 2.15vmin, 25px); aspect-ratio: 1; position: relative; border-radius: 6px; }
.piece-cell.empty { visibility: hidden; }
.piece-cell .crystal { border-radius: 6px; }
.drag-ghost { position: fixed; z-index: 999; pointer-events: none; display: grid; gap: var(--gap); padding: 0; opacity: .87; filter: drop-shadow(0 9px 10px rgba(25,28,77,.25)); transform: scale(1.03); }
.drag-ghost.invalid { filter: saturate(.65) drop-shadow(0 8px 9px rgba(120,20,50,.25)); }
.drag-ghost .piece-cell { width: var(--ghost-cell); height: var(--ghost-cell); border-radius: 7px; }

.brand-bar { min-height: 18px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #6e7698; font-size: clamp(8px, .72vw, 10px); letter-spacing: .08em; white-space: nowrap; }
.brand-bar strong { color: #31477e; font-size: 1.04em; letter-spacing: .14em; }
.brand-bar span::before { content: "•"; margin-right: 9px; color: #9ba4bf; }

.fx-layer { position: fixed; inset: 0; z-index: 1200; pointer-events: none; overflow: hidden; }
.particle { position: fixed; width: 8px; height: 8px; border-radius: 3px; background: var(--pcol, #fff); box-shadow: 0 0 10px var(--pcol, #fff); animation: particleFly var(--dur, .65s) ease-out forwards; }
.score-float { position: fixed; z-index: 1300; pointer-events: none; font-weight: 1000; font-size: clamp(17px, 2.3vw, 28px); color: white; text-shadow: 0 2px 0 #655bd3, 0 4px 14px rgba(58,51,142,.35); animation: scoreFloat .85s ease-out forwards; }
.floating-message { position: fixed; left: 50%; top: 42%; z-index: 1400; transform: translate(-50%, -50%) scale(.7); opacity: 0; color: white; font-size: clamp(28px, 5vw, 62px); font-weight: 1000; letter-spacing: -2px; text-align: center; text-shadow: 0 4px 0 #6d58d9, 0 9px 25px rgba(60,49,150,.3); pointer-events: none; }
.floating-message.show { animation: messagePop .88s cubic-bezier(.2,.9,.2,1) forwards; }

.overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: max(10px, var(--safe-top)) max(10px, var(--safe-right)) max(10px, var(--safe-bottom)) max(10px, var(--safe-left)); background: rgba(19,30,75,.48); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .2s ease; overflow: auto; }
.overlay.show { opacity: 1; pointer-events: auto; }
.modal { width: min(520px, 94vw); max-height: 94dvh; overflow: auto; padding: clamp(22px, 3.5vmin, 38px); border-radius: clamp(22px, 3vmin, 32px); background: rgba(255,255,255,.97); box-shadow: 0 28px 76px rgba(13,27,72,.34); text-align: center; border: 1px solid rgba(255,255,255,.96); transform: translateY(12px) scale(.98); transition: transform .22s ease; }
.overlay.show .modal { transform: none; }
.start-modal { width: min(940px, 96vw); height: min(720px, 92dvh); min-height: 440px; padding: 0; display: grid; grid-template-columns: minmax(285px, .9fr) minmax(350px, 1.1fr); overflow: hidden; background: rgba(255,255,255,.98); }
.cover-art-wrap { position: relative; min-width: 0; min-height: 0; background: linear-gradient(#1168d7, #70c8ff); overflow: hidden; display: grid; place-items: center; }
.cover-art { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; pointer-events: none; }
.cover-art-wrap::after { content: ""; position: absolute; inset: 0; box-shadow: inset -20px 0 35px rgba(7,40,112,.13); pointer-events: none; }
.cover-brand { position: absolute; left: 16px; bottom: 12px; color: #fff; font-size: 10px; font-weight: 1000; letter-spacing: .16em; text-shadow: 0 2px 8px rgba(0,36,100,.7); }
.start-content { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 4.5vw, 54px); background: radial-gradient(circle at 85% 10%, rgba(102,220,255,.18), transparent 35%), #fff; }
.eyebrow { margin: 0 0 8px; color: #6d63de; font-size: clamp(9px, .82vw, 11px); font-weight: 1000; letter-spacing: .18em; }
.cover-heading { margin: 0; font-size: clamp(40px, 5vw, 66px); line-height: .82; letter-spacing: -2.5px; color: #1b2d66; text-transform: uppercase; }
.cover-heading span { color: #7358f1; font-size: .58em; letter-spacing: .13em; }
.modal-copy { color: #707a9c; line-height: 1.5; margin: 18px auto; max-width: 430px; font-size: clamp(12px, 1vw, 15px); }
.how-grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 5px 0 20px; }
.how-grid div { background: #f2f6ff; border: 1px solid #e6ebf8; border-radius: 14px; padding: 10px 5px; color: #687291; font-size: 11px; }
.how-grid b { width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center; margin: auto auto 5px; color: white; background: linear-gradient(135deg, #4ed2ff, #745cf0); }
.how-grid span { display: block; }
.primary-btn, .secondary-btn { width: 100%; min-height: 45px; border: 0; padding: 13px 20px; border-radius: 15px; font-weight: 1000; letter-spacing: .05em; cursor: pointer; transition: transform .13s ease, box-shadow .13s ease, filter .13s ease; }
.primary-btn { color: white; background: linear-gradient(135deg, #27cb67, #11a843); box-shadow: 0 9px 22px rgba(27,178,84,.28), inset 0 2px 1px rgba(255,255,255,.3); }
.primary-btn:hover, .secondary-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.secondary-btn { color: #315797; background: #edf5ff; border: 1px solid #d8e6fb; }
.secondary-btn.danger-lite { color: #9c4963; background: #fff1f5; border-color: #f7dce5; }
.portal-note, .modal-brand { margin-top: 12px; color: #9299b2; font-size: 9px; letter-spacing: .08em; }
.modal-brand { font-weight: 1000; color: #66739c; letter-spacing: .16em; }
.modal-actions { display: grid; gap: 8px; }
.pause-symbol, .result-gem { width: 58px; height: 58px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 18px; font-size: 26px; font-weight: 1000; color: #fff; background: linear-gradient(145deg, #50dcff, #4f63ee); box-shadow: 0 10px 24px rgba(58,94,218,.25); }
.result-gem { transform: rotate(45deg); font-size: 34px; background: linear-gradient(145deg, #ff7fc9, #755cf2); }
.compact-modal h2, .result-modal h2 { margin: 4px 0 20px; font-size: clamp(22px, 3.5vw, 36px); color: #233460; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; }
.result-grid div { padding: clamp(9px, 1.2vmin, 13px); background: #f3f6fb; border-radius: 14px; }
.result-grid span { display: block; color: #858da8; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.result-grid strong { display: block; margin-top: 3px; font-size: clamp(19px, 2.5vw, 26px); color: #223460; }

.shake { animation: tinyShake .22s linear; }
.blast-screen { animation: blastScreen .45s ease; }
body.ad-active .game-app { filter: saturate(.96); }

@keyframes placePop { 0%{transform:scale(.65)} 70%{transform:scale(1.09)} 100%{transform:scale(1)} }
@keyframes lineFlash { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.75); transform:scale(.94)} }
@keyframes burstCell { to{ transform:scale(.25) rotate(18deg); opacity:0; filter:brightness(2)} }
@keyframes shine { 0%,58%{transform:translateX(-140%)} 84%,100%{transform:translateX(140%)} }
@keyframes readyPulse { 50%{box-shadow:0 0 0 4px rgba(129,91,255,.11), 0 16px 42px rgba(96,74,218,.19)} }
@keyframes particleFly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity:0; } }
@keyframes scoreFloat { 0%{transform:translate(-50%,0) scale(.75);opacity:0} 16%{opacity:1;transform:translate(-50%,-8px) scale(1.06)} 100%{transform:translate(-50%,-62px) scale(.92);opacity:0} }
@keyframes messagePop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-3deg)} 20%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(2deg)} 55%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-68%) scale(.9)} }
@keyframes tinyShake { 0%,100%{transform:none} 25%{transform:translate(2px,-1px)} 50%{transform:translate(-2px,1px)} 75%{transform:translate(1px,1px)} }
@keyframes blastScreen { 0%{filter:brightness(1)} 35%{filter:brightness(1.28) saturate(1.25)} 100%{filter:brightness(1)} }

/* Portrait and narrow browser windows */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  :root { --board-size: min(96vw, calc(100dvh - 275px), 590px); --gap: clamp(2px, .7vmin, 4px); }
  .game-app { gap: 5px; padding-left: max(6px, var(--safe-left)); padding-right: max(6px, var(--safe-right)); }
  .topbar { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "title controls" "stats stats"; gap: 5px 7px; }
  .title-wrap { grid-area: title; min-width: 0; }
  .game-title { font-size: clamp(16px, 5vw, 24px); overflow: hidden; text-overflow: ellipsis; }
  .game-title span { letter-spacing: .17em; }
  .stats { grid-area: stats; }
  .controls { grid-area: controls; }
  .icon-btn { width: clamp(31px, 8.3vw, 37px); height: clamp(31px, 8.3vw, 37px); font-size: 12px; }
  #restartBtn { display: none; }
  .play-area { display: flex; flex-direction: column; justify-content: center; gap: 5px; overflow: hidden; }
  .board-shell { flex: 0 0 auto; }
  .side-panel { width: min(96vw, 590px); max-width: none; flex: 0 0 auto; }
  .blast-card { padding: 7px 10px; border-radius: 13px; }
  .blast-heading strong { font-size: 13px; }
  .blast-heading small { font-size: 7px; }
  #blastPercent { font-size: 14px; }
  .meter-track { margin: 4px 0 3px; height: 10px; }
  #blastHelp { font-size: 8px; line-height: 1.2; }
  .mission-card { display: none; }
  .blast-chooser { margin-top: 4px; gap: 4px; }
  .blast-choice { padding: 4px; font-size: 8px; }
  .tray-label { padding-bottom: 2px; }
  .tray-label small { display: none; }
  .piece-tray { height: clamp(68px, 12dvh, 100px); gap: 5px; }
  .piece { padding: 5px; gap: 2px; }
  .piece-cell { width: clamp(11px, 4.7vw, 21px); }
  .brand-bar { font-size: 8px; min-height: 15px; }
  .brand-bar span { display: none; }
  .start-modal { width: min(94vw, 520px); height: min(94dvh, 760px); min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(180px, 44%) minmax(0, 56%); }
  .cover-art { object-fit: cover; object-position: center 44%; }
  .cover-art-wrap::after { box-shadow: inset 0 -22px 32px rgba(7,40,112,.18); }
  .cover-brand { left: 11px; bottom: 8px; font-size: 8px; }
  .start-content { padding: clamp(15px, 4vw, 24px); justify-content: center; }
  .cover-heading { font-size: clamp(31px, 10vw, 48px); }
  .modal-copy { margin: 10px auto; font-size: 11px; }
  .how-grid { margin: 2px 0 11px; }
  .how-grid div { padding: 6px 4px; font-size: 9px; }
  .how-grid b { width: 22px; height: 22px; margin-bottom: 3px; font-size: 10px; }
  .primary-btn, .secondary-btn { min-height: 40px; padding: 10px 16px; font-size: 12px; }
  .portal-note { margin-top: 7px; font-size: 8px; }
  .modal { padding: 20px; }
}

/* Very short landscape windows: keep every control inside the viewport. */
@media (orientation: landscape) and (max-height: 540px) {
  :root { --board-size: min(47vw, calc(100dvh - 135px), 365px); --gap: 2px; }
  .game-app { gap: 4px; padding-top: max(4px, var(--safe-top)); padding-bottom: max(3px, var(--safe-bottom)); }
  .topbar { grid-template-columns: minmax(160px,.8fr) minmax(230px,1fr) auto; grid-template-areas: none; gap: 6px; }
  .title-wrap, .stats, .controls { grid-area: auto; }
  #restartBtn { display: inline-grid; place-items: center; }
  .game-title { font-size: clamp(14px, 2.7vw, 21px); }
  .mini-gem { width: 14px; }
  .stat-card { padding: 3px 5px; border-radius: 9px; }
  .stat-card span { font-size: 7px; }
  .stat-card strong { font-size: 13px; }
  .icon-btn { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
  .play-area { display: grid; flex-direction: row; grid-template-columns: auto minmax(150px, 205px); align-items: center; gap: 8px; }
  .side-panel { width: min(100%, 205px); max-width: 205px; }
  .blast-card { padding: 7px 9px; }
  .blast-heading strong { font-size: 12px; }
  .blast-heading small { display: none; }
  #blastPercent { font-size: 13px; }
  .meter-track { height: 9px; margin: 4px 0 3px; }
  #blastHelp { font-size: 8px; }
  .mission-card { display: none; }
  .blast-choice { padding: 4px; font-size: 8px; }
  .tray-label { display: none; }
  .piece-tray { height: 67px; gap: 5px; }
  .piece-slot { border-radius: 10px; }
  .piece { padding: 4px; }
  .piece-cell { width: clamp(10px, 3.7vh, 18px); }
  .brand-bar { min-height: 12px; font-size: 7px; }
  .start-modal { width: min(900px, 94vw); height: min(92dvh, 470px); min-height: 0; grid-template-columns: minmax(220px,.82fr) minmax(300px,1.18fr); grid-template-rows: 1fr; }
  .cover-art { object-fit: cover; object-position: center 42%; }
  .start-content { padding: 18px 24px; }
  .cover-heading { font-size: clamp(29px, 5.8vh, 43px); }
  .modal-copy { margin: 8px auto; font-size: 10px; line-height: 1.3; }
  .how-grid { margin: 2px 0 9px; }
  .how-grid div { padding: 5px 3px; font-size: 8px; }
  .how-grid b { width: 20px; height: 20px; font-size: 9px; margin-bottom: 2px; }
  .primary-btn, .secondary-btn { min-height: 36px; padding: 8px 14px; font-size: 11px; }
  .portal-note { margin-top: 5px; font-size: 7px; }
  .compact-modal, .result-modal { max-height: 92dvh; padding: 16px; }
  .pause-symbol, .result-gem { width: 42px; height: 42px; margin-bottom: 8px; font-size: 20px; border-radius: 13px; }
  .compact-modal h2, .result-modal h2 { margin-bottom: 10px; font-size: 20px; }
  .result-grid { gap: 5px; margin-bottom: 9px; }
  .result-grid div { padding: 6px; }
  .result-grid strong { font-size: 17px; }
}

@media (max-width: 360px) and (orientation: portrait) {
  :root { --board-size: min(96vw, calc(100dvh - 265px)); }
  .game-title { font-size: 15px; }
  .icon-btn { width: 29px; height: 29px; }
  .piece-tray { height: 61px; }
  .brand-bar { min-height: 12px; font-size: 7px; }
}

/* Rewarded ad controls */
.reward-ad-btn {
  width: 100%;
  border: 1px solid rgba(88,108,205,.22);
  border-radius: 13px;
  min-height: 42px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  font: inherit;
  color: #21366f;
  background: linear-gradient(135deg, #fff7ca, #ffe9a2 52%, #fff6d7);
  box-shadow: 0 7px 17px rgba(77,82,144,.12), inset 0 1px 0 rgba(255,255,255,.75);
  transition: transform .13s ease, filter .13s ease, opacity .13s ease;
}
.reward-ad-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.03); }
.reward-ad-btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.reward-ad-btn:disabled { opacity: .45; cursor: default; filter: grayscale(.18); }
.reward-ad-btn.hidden { display: none; }
.reward-ad-badge {
  flex: 0 0 auto;
  min-width: 29px;
  height: 25px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .08em;
  background: linear-gradient(145deg, #ff9d21, #ff5f3d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(236,96,44,.22);
}
.reward-ad-btn > span:last-child { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.08; }
.reward-ad-btn strong { font-size: 10px; letter-spacing: .04em; }
.reward-ad-btn small { margin-top: 3px; font-size: 8px; color: #707898; font-weight: 700; }
.reward-boost { margin-top: 7px; }
.reward-revive {
  color: #fff;
  background: linear-gradient(135deg, #7d58f5, #4d8ef5);
  border-color: rgba(67,84,211,.22);
  box-shadow: 0 9px 20px rgba(80,92,223,.23), inset 0 1px 0 rgba(255,255,255,.28);
}
.reward-revive small { color: rgba(255,255,255,.83); }
.reward-revive.used { background: #e7eaf2; color: #8990a4; box-shadow: none; }
.reward-revive.used small { color: #959caf; }

@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .reward-boost { min-height: 30px; margin-top: 4px; padding: 4px 7px; border-radius: 9px; gap: 6px; }
  .reward-boost .reward-ad-badge { min-width: 23px; height: 20px; border-radius: 6px; font-size: 7px; }
  .reward-boost strong { font-size: 8px; }
  .reward-boost small { font-size: 7px; margin-top: 1px; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .reward-boost { min-height: 29px; margin-top: 4px; padding: 3px 6px; gap: 5px; }
  .reward-boost .reward-ad-badge { min-width: 22px; height: 19px; font-size: 7px; }
  .reward-boost strong { font-size: 8px; }
  .reward-boost small { font-size: 7px; }
  .reward-revive { min-height: 34px; padding: 5px 8px; }
}