:root{
  --bg:#102c3a;--bg-deep:#071a24;--panel:#f9f4df;--panel-2:#fffaf0;
  --ink:#17313c;--muted:#627984;--mint:#77d6b6;--mint-deep:#2d9b7c;
  --sky:#69b9e8;--sun:#ffd15a;--coral:#ff6f61;--violet:#805ad5;
  --line:#163743;--shadow:0 12px 0 rgba(6,31,42,.42),0 22px 42px rgba(0,0,0,.22);
  --radius-xl:30px;--radius-lg:22px;--radius-md:16px;--safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
html,body{overflow:hidden;background:var(--bg-deep);color:var(--panel)}
body{min-height:100dvh;touch-action:manipulation;overscroll-behavior:none}
.app-shell{position:relative;width:100%;height:100dvh;max-height:100dvh;overflow:hidden;background:
 radial-gradient(circle at 18% 18%,rgba(105,185,232,.24),transparent 28%),
 radial-gradient(circle at 78% 78%,rgba(119,214,182,.19),transparent 34%),
 linear-gradient(155deg,var(--bg) 0%,#0d2531 68%,#071a24 100%)}
.app-shell::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:
 linear-gradient(30deg,transparent 46%,rgba(255,255,255,.08) 47%,rgba(255,255,255,.08) 49%,transparent 50%),
 linear-gradient(-30deg,transparent 46%,rgba(255,255,255,.05) 47%,rgba(255,255,255,.05) 49%,transparent 50%);background-size:90px 90px}
.ambient{position:absolute;border-radius:44% 56% 62% 38%;filter:blur(1px);opacity:.18;pointer-events:none;border:10px solid rgba(255,255,255,.22)}
.ambient-a{width:280px;height:220px;left:-110px;bottom:-70px;transform:rotate(24deg)}
.ambient-b{width:240px;height:260px;right:-90px;top:80px;transform:rotate(-18deg)}
.topbar{position:relative;z-index:10;height:calc(74px + var(--safe-top));padding:calc(12px + var(--safe-top)) clamp(14px,3vw,34px) 10px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;max-width:1180px;margin:0 auto}
.brand-lockup{display:flex;justify-content:center;min-width:0}.brand-lockup img{height:48px;width:auto}
.topbar-actions{display:flex;gap:10px}.icon-button{width:46px;height:46px;border-radius:15px;background:var(--panel);color:var(--ink);border:3px solid var(--line);box-shadow:0 5px 0 #071a24;display:grid;place-items:center;font-weight:1000;font-size:1.35rem;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
.icon-button:hover{filter:brightness(1.04);transform:translateY(-1px)}.icon-button:active{transform:translateY(4px);box-shadow:0 1px 0 #071a24}.icon-button[disabled]{opacity:.5;cursor:not-allowed}
.icon-button .toolbar-icon{display:block;width:23px;height:23px;object-fit:contain;pointer-events:none;user-select:none}.icon-button#global-home .toolbar-icon{width:22px;height:22px}.icon-button#global-audio{position:relative}.icon-button#global-audio.is-muted .toolbar-icon{opacity:.42}.icon-button#global-audio.is-muted::after{content:"";position:absolute;width:28px;height:3px;border-radius:999px;background:var(--coral);box-shadow:0 0 0 1px var(--panel);transform:rotate(-45deg);pointer-events:none}
.screen-root{position:relative;z-index:2;height:calc(100dvh - 74px - var(--safe-top));overflow:hidden;display:grid;place-items:center;padding:12px clamp(12px,2vw,26px) calc(16px + var(--safe-bottom))}
.screen{width:min(100%,1120px);height:100%;min-height:0;animation:screen-in .34s cubic-bezier(.2,.8,.2,1)}
@keyframes screen-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.loading-panel{width:min(420px,92vw);padding:30px;text-align:center}.loading-panel img{width:150px;margin:0 auto 18px}.loading-panel h1{font-size:clamp(1.25rem,4vw,1.8rem)}.loading-bar{margin:20px auto 0;width:220px;height:14px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}.loading-bar span{display:block;width:55%;height:100%;border-radius:inherit;background:var(--sun);animation:loading 1.1s ease-in-out infinite alternate}@keyframes loading{to{transform:translateX(80%)}}
.panel{background:var(--panel);color:var(--ink);border:4px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow)}
.card{background:var(--panel-2);color:var(--ink);border:3px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 6px 0 rgba(7,26,36,.65)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:1000;font-size:.78rem;color:var(--mint-deep)}
.muted{color:var(--muted)}
.home-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:22px;align-items:stretch;height:100%}
.hero-panel{position:relative;overflow:hidden;padding:clamp(22px,4vw,54px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(180px,.9fr);align-items:center;gap:12px;background:
 radial-gradient(circle at 75% 25%,rgba(255,209,90,.33),transparent 32%),
 linear-gradient(140deg,#f9f4df,#e8f8ef)}
.hero-panel::after{content:"";position:absolute;width:180px;height:180px;border:32px solid rgba(45,155,124,.13);border-radius:50%;right:-40px;bottom:-58px}
.hero-copy{position:relative;z-index:2}.hero-copy h1{font-size:clamp(2rem,6vw,4.5rem);line-height:.94;letter-spacing:-.05em;margin:8px 0 14px}.hero-copy p{font-size:clamp(.98rem,2vw,1.15rem);line-height:1.55;max-width:500px}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;border:2px solid var(--line);background:#fff;font-weight:900;font-size:.8rem}.hero-mascot{position:relative;z-index:1;display:grid;place-items:center}.hero-mascot img{width:min(100%,310px);filter:drop-shadow(0 18px 0 rgba(23,49,60,.12))}.mascot-bubble{position:absolute;top:3%;right:0;background:#fff;border:3px solid var(--line);color:var(--ink);padding:10px 14px;border-radius:18px;font-weight:1000;transform:rotate(4deg);box-shadow:0 5px 0 rgba(7,26,36,.22)}
.button-stack{display:grid;gap:12px;margin-top:22px}.primary-button,.secondary-button,.soft-button{min-height:56px;border:3px solid var(--line);border-radius:18px;font-weight:1000;color:var(--ink);cursor:pointer;padding:12px 18px;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;text-align:center}.primary-button{background:var(--sun);box-shadow:0 7px 0 #bb8420}.secondary-button{background:var(--mint);box-shadow:0 7px 0 #25795f}.soft-button{background:#fff;box-shadow:0 5px 0 #b8c8ca}.primary-button:hover,.secondary-button:hover,.soft-button:hover{filter:brightness(1.03);transform:translateY(-1px)}.primary-button:active,.secondary-button:active,.soft-button:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(7,26,36,.5)}.primary-button[disabled],.secondary-button[disabled],.soft-button[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.side-column{display:grid;grid-template-rows:auto 1fr;gap:18px;min-height:0}.quick-card{padding:20px}.quick-card h2{font-size:1.25rem;margin-bottom:12px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-grid button{min-height:82px;flex-direction:column;font-size:.92rem}.quick-icon{font-size:1.6rem}
.stats-card{padding:20px;display:grid;align-content:start;gap:14px;overflow:auto}.stats-header{display:flex;align-items:center;justify-content:space-between}.stats-header h2{font-size:1.25rem}.progress-ring{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mint-deep) var(--progress,0%),#dce7df 0);position:relative}.progress-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--panel-2)}.progress-ring span{position:relative;font-weight:1000}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-item{padding:13px 8px;text-align:center;border:2px dashed #a7bbb9;border-radius:15px;background:#fff}.stat-item strong{display:block;font-size:1.35rem}.stat-item span{font-size:.74rem;font-weight:900;color:var(--muted);text-transform:uppercase}.daily-strip{border-radius:18px;padding:14px;background:linear-gradient(135deg,#dff5ec,#fff1bd);border:2px solid var(--line)}.daily-strip strong{display:block;margin-bottom:4px}
.level-screen{display:grid;grid-template-rows:auto 1fr;gap:14px}.screen-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:0 4px}.screen-heading h1{font-size:clamp(1.7rem,4vw,2.7rem)}.screen-heading p{margin-top:5px;color:#c2d6dc}.level-summary{display:flex;gap:8px;flex-wrap:wrap}.level-summary .pill{background:rgba(255,255,255,.95)}
.level-grid-wrap{min-height:0;overflow:auto;padding:4px 6px 18px;scrollbar-width:thin;scrollbar-color:var(--mint) transparent}.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.level-card{position:relative;min-height:140px;padding:16px 12px;display:grid;align-content:space-between;text-align:left;cursor:pointer;transition:transform .15s ease,filter .15s ease}.level-card:hover:not([disabled]){transform:translateY(-3px) rotate(-.3deg);filter:brightness(1.02)}.level-card[disabled]{filter:saturate(.2);opacity:.55;cursor:not-allowed}.level-number{font-size:2rem;font-weight:1000;line-height:1}.level-title{font-weight:1000;font-size:.88rem;margin-top:5px}.level-meta{font-size:.72rem;font-weight:900;color:var(--muted);margin-top:4px}.stars{display:flex;gap:2px;color:#c9d2d0;font-size:1.12rem}.stars .earned{color:#f0b600;text-shadow:0 1px 0 #8c5f00}.level-lock{position:absolute;top:12px;right:12px;font-size:1.1rem}.theme-basic{background:#fffaf0}.theme-rock{background:#ecf5ef}.theme-timed{background:#fff1e8}.theme-grid{background:#e9f7fb}.theme-master{background:#fff0c7}
.game-screen{display:grid;grid-template-columns:minmax(220px,.68fr) minmax(320px,1.32fr) minmax(220px,.68fr);gap:18px;align-items:stretch;height:100%;min-height:0}.game-side{display:grid;align-content:start;gap:14px;min-height:0}.hud-card{padding:17px}.hud-card h2{font-size:1.05rem}.hud-value{font-size:2rem;font-weight:1000;line-height:1.1;margin-top:4px}.turn-card{padding:17px;text-align:center}.turn-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:2px solid var(--line);border-radius:999px;background:#fff;font-weight:1000;margin-top:10px}.mini-symbol{width:24px;height:24px}.mission-list{display:grid;gap:8px;margin-top:12px}.mission-row{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;font-weight:900;padding-bottom:8px;border-bottom:1px dashed #b7c5c4}.mission-row:last-child{border-bottom:0;padding-bottom:0}
.mascot-card{padding:18px;text-align:center;background:linear-gradient(145deg,#e5f8ef,#fff6cf)}.mascot-card img{width:120px;margin:0 auto}.mascot-card p{margin-top:10px;font-weight:900;line-height:1.35}.control-stack{display:grid;gap:10px}.control-stack button{min-height:52px}.control-stack .soft-button{justify-content:flex-start}
.board-panel{padding:clamp(14px,2vw,24px);display:grid;grid-template-rows:auto 1fr auto;min-height:0;background:linear-gradient(155deg,#fffaf0,#eef9f2)}.board-topline{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.board-topline strong{font-size:1rem}.board-status{padding:7px 11px;background:#fff;border:2px solid var(--line);border-radius:999px;font-weight:1000;font-size:.8rem}.board-wrap{min-height:0;display:grid;place-items:center}.board{width:min(100%,min(62vh,580px));aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--board-size),minmax(0,1fr));grid-template-rows:repeat(var(--board-size),minmax(0,1fr));gap:clamp(7px,1.3vw,13px);padding:clamp(6px,1vw,10px)}.cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;background:#fff;border:clamp(3px,.55vw,5px) solid var(--line);border-radius:clamp(15px,2.4vw,25px);box-shadow:0 clamp(5px,1vw,9px) 0 #9fb9b3;cursor:pointer;overflow:hidden;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}.cell:hover:not([disabled]){transform:translateY(-2px);filter:brightness(1.03)}.cell:active:not([disabled]){transform:translateY(5px);box-shadow:0 2px 0 #9fb9b3}.cell[disabled]{cursor:default}.cell img.mark{width:68%;height:68%;animation:mark-pop .28s cubic-bezier(.2,1.5,.3,1)}@keyframes mark-pop{from{opacity:0;transform:scale(.2) rotate(-10deg)}to{opacity:1;transform:none}}.cell.blocked{background:#dfe9dc;box-shadow:0 7px 0 #91a48e}.cell.blocked img{width:72%;height:72%;opacity:.9}.cell.hint{animation:hint-cell .8s ease-in-out infinite alternate}@keyframes hint-cell{to{box-shadow:0 7px 0 #9fb9b3,0 0 0 7px rgba(105,185,232,.45)}}.cell.win{animation:win-cell .55s ease-in-out infinite alternate;background:#fff1a8}@keyframes win-cell{to{transform:translateY(-5px) rotate(1deg)}}
.board-footer{display:flex;justify-content:center;align-items:center;gap:8px;min-height:34px;margin-top:8px;font-size:.84rem;font-weight:900;color:var(--muted)}.board-footer .dot{width:9px;height:9px;border-radius:50%;background:var(--mint-deep)}
.timer-danger{color:#bd2b2b!important;animation:timer-shake .35s linear infinite alternate}@keyframes timer-shake{to{transform:translateX(2px)}}
.modal-root:empty{display:none}.modal-root{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:18px;background:rgba(4,18,25,.72);backdrop-filter:blur(8px)}.modal-card{width:min(520px,94vw);max-height:min(780px,90dvh);overflow:auto;padding:24px;animation:modal-in .24s cubic-bezier(.2,1.3,.3,1)}@keyframes modal-in{from{opacity:0;transform:scale(.88) translateY(18px)}to{opacity:1;transform:none}}.modal-header{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:16px}.modal-header h2{font-size:1.7rem}.modal-close{width:42px;height:42px}.modal-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}.modal-actions .full{grid-column:1/-1}.settings-list{display:grid;gap:12px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px;border:2px solid #b8c9c5;border-radius:16px;background:#fff}.setting-row strong{display:block}.setting-row small{display:block;color:var(--muted);margin-top:3px}.toggle{width:58px;height:34px;border-radius:999px;background:#b7c4c4;border:3px solid var(--line);padding:3px;cursor:pointer}.toggle span{display:block;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--line);transition:transform .18s ease}.toggle[aria-pressed="true"]{background:var(--mint)}.toggle[aria-pressed="true"] span{transform:translateX(24px)}.how-list{display:grid;gap:12px}.how-step{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;padding:12px;border-radius:16px;background:#fff;border:2px solid #b9cbc7}.how-step span{width:38px;height:38px;border-radius:12px;background:var(--sun);border:2px solid var(--line);display:grid;place-items:center;font-weight:1000}.result-hero{text-align:center}.result-hero img{width:130px;margin:0 auto 10px}.result-hero h2{font-size:2rem}.result-stars{display:flex;justify-content:center;gap:8px;font-size:2.7rem;margin:12px 0}.result-stars span{color:#d7dfdd;filter:grayscale(1)}.result-stars .earned{color:#f1b800;filter:none;animation:star-pop .45s cubic-bezier(.2,1.5,.3,1) backwards}.result-stars .earned:nth-child(2){animation-delay:.12s}.result-stars .earned:nth-child(3){animation-delay:.24s}@keyframes star-pop{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:none}}.result-score{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.result-score div{background:#fff;border:2px solid #b8c9c5;border-radius:15px;padding:10px;text-align:center}.result-score strong{display:block;font-size:1.3rem}.result-score span{font-size:.72rem;text-transform:uppercase;font-weight:900;color:var(--muted)}
.toast-root{position:fixed;z-index:70;left:50%;bottom:calc(18px + var(--safe-bottom));transform:translateX(-50%);pointer-events:none;display:grid;gap:8px;width:min(92vw,420px)}.toast{background:#fff;color:var(--ink);border:3px solid var(--line);border-radius:15px;padding:12px 16px;box-shadow:0 7px 0 rgba(7,26,36,.58);font-weight:1000;text-align:center;animation:toast-in .24s ease,toast-out .25s ease 2.55s forwards}@keyframes toast-in{from{opacity:0;transform:translateY(20px)}}@keyframes toast-out{to{opacity:0;transform:translateY(14px)}}
.confetti-layer{position:fixed;z-index:55;inset:0;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:-20px;width:12px;height:18px;border-radius:4px;background:var(--c);animation:confetti-fall var(--t) linear forwards}@keyframes confetti-fall{to{transform:translate(var(--x),110dvh) rotate(850deg)}}
.noscript{padding:20px;background:#7b1e1e;color:#fff;font-weight:800}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.reduced-motion *,.reduced-motion *::before,.reduced-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}

/* =========================================================
   final responsive stability and lightweight visual overrides
   ========================================================= */
.screen {
  width: min(100%, var(--max-content-width, 1120px));
}

.home-layout {
  overflow-x: hidden;
  overflow-y: auto;
  align-items: start;
  align-content: start;
  padding: 2px 4px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--mint) transparent;
}

.hero-panel {
  align-self: start;
  overflow: visible;
  min-height: 0;
}

.hero-panel::after {
  display: none;
}

.hero-mascot img,
.mascot-card img,
.result-hero img,
.loading-panel img {
  object-fit: contain;
  object-position: center;
}

.hero-mascot img {
  max-height: 430px;
  filter: drop-shadow(0 10px 0 rgba(23, 49, 60, 0.1));
}

.mascot-card {
  background: #eef7f3;
}

.mascot-card img {
  width: 100px;
  max-height: 130px;
}

.quick-icon-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.control-stack {
  padding: 12px;
}

.board-panel {
  background: #f6f8ed;
}

.board {
  max-height: 100%;
}

/* Marks and state feedback remain stable instead of replaying on every HUD update. */
.cell img.mark {
  animation: none !important;
}


.cell.hint {
  animation: none !important;
  outline: 6px solid rgba(105, 185, 232, 0.42);
  outline-offset: -6px;
}

.cell.win {
  animation: none !important;
  transform: none !important;
  background: #dff5ec;
  box-shadow: 0 clamp(5px, 1vw, 9px) 0 #6fae98;
}

.timer-danger {
  animation: none !important;
  color: #bd2b2b !important;
}

.result-stars .earned {
  animation: none !important;
}

.modal-copy,
.result-message {
  line-height: 1.55;
  margin-top: 6px;
}

.modal-root {
  backdrop-filter: none;
  background: rgba(4, 18, 25, 0.76);
}

.modal-card {
  animation-duration: 0.16s;
}

.confetti {
  width: 9px;
  height: 13px;
}

.topbar[aria-hidden="true"],
.screen-root[aria-hidden="true"] {
  pointer-events: none;
}