:root{
  --bg1:#071a2e;
  --bg2:#0b2b1c;
  --text:#e9f3ff;
  --muted:#b8c7d9;
  --gold:#ffd56a;
  --red:#ff595e;
  --green:#8ac926;
  --blue:#1982c4;
  --shadow: 0 18px 50px rgba(0,0,0,.42);
  --radius: 22px;
  --stroke: rgba(255,255,255,.14);
  --stroke2: rgba(255,255,255,.10);
  --glass: blur(12px);
  --tap: 50ms;
}
*{box-sizing:border-box}
:where([hidden]){display:none !important;}
html{
  min-height:100%;
  background:
    radial-gradient(1200px 700px at 80% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(1000px 600px at 10% 20%, rgba(255,213,106,.10), transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
  background-repeat:no-repeat;
  background-size: cover;
}
body{
  min-height: 100dvh;
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: transparent;
  overflow-x:hidden;
}

/* WOW layers */
#bgfx{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(700px 520px at 15% 20%, rgba(255,213,106,.08), transparent 60%),
    radial-gradient(820px 560px at 85% 10%, rgba(25,130,196,.08), transparent 62%),
    radial-gradient(900px 620px at 55% 95%, rgba(255,89,94,.07), transparent 65%);
}
#bgfx::before{
  content:"";
  position:absolute;
  inset:-20%;
  background-image: radial-gradient(rgba(233,243,255,.20) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity:.08;
  transform: rotate(10deg);
  animation: drift 28s linear infinite;
}
#bgfx::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(700px 500px at 20% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 700px at 80% 70%, rgba(255,213,106,.06), transparent 65%);
  opacity: .65;
  mix-blend-mode: screen;
  animation: float 18s ease-in-out infinite alternate;
}
@keyframes drift{from{transform: translate3d(0,0,0) rotate(10deg);} to{transform: translate3d(-260px,-260px,0) rotate(10deg);} }
@keyframes float{from{transform: translate3d(0,0,0);} to{transform: translate3d(30px,-18px,0);} }

#snow{position:fixed; inset:0; z-index:1; pointer-events:none;}
#fx{position:fixed; inset:0; z-index:15; pointer-events:none;}
#inputGuard{
  position:fixed;
  inset:0;
  z-index:40;
  pointer-events:none;
  background: transparent;
}
#inputGuard.active{pointer-events:auto;}
#landscapeBlock{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  background:
    radial-gradient(700px 520px at 50% 20%, rgba(255,213,106,.16), transparent 60%),
    rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
}
#landscapeBlock .landscapeCard{
  max-width: 420px;
  width: min(420px, 92vw);
  border-radius: 20px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.45);
  padding:16px 18px;
  box-shadow: var(--shadow);
  color: var(--text);
  display:grid;
  gap:6px;
  justify-items:center;
}
#landscapeBlock .landscapeIcon{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  font-size:24px;
}
#landscapeBlock .landscapeTitle{
  font-weight:900;
  font-size:16px;
}
#landscapeBlock .landscapeText{
  color: var(--muted);
  font-size:13px;
  line-height:1.4;
}
body.landscapeBlocked #landscapeBlock{display:flex;}

#toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 30;
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(12px);
  color: rgba(233,243,255,.92);
  font-weight: 800;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#toast.show{opacity:1; transform: translateX(-50%) translateY(-4px);}

/* Crossword clue tooltip */
#clueTip{
  position: fixed;
  z-index: 26;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  color: rgba(233,243,255,.96);
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#clueTip.show{opacity:1; transform: translateY(0);}
#clueTip b{color: var(--gold)}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background: rgba(7, 26, 46, .45);
  border-bottom: 1px solid var(--stroke2);
  backdrop-filter: var(--glass);
  transition: transform .2s ease, opacity .2s ease;
}
.topbar.scrollHidden{
  transform: translateY(-110%);
  opacity: 0;
}
.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  border-radius:14px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-size:20px;
}
.brandTitle{font-size:18px; font-weight:900; letter-spacing:.2px}
.brandSub{font-size:12px;color:var(--muted);margin-top:1px}
.controls{display:flex; gap:10px}

.shell{
  position:relative;
  z-index:2;
  max-width: 980px;
  margin: 18px auto 12px;
  padding: 0 14px 8px;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
}

.hero{padding:22px}
.hero h1{font-size: 38px; margin: 10px 0 6px; line-height:1.08; font-weight:900}
.lead{color:var(--muted);font-size:16px;line-height:1.5;margin:0 0 14px}
.ribbon{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(255,213,106,.10);
  color: var(--gold);
  font-weight:900;
  letter-spacing:.2px;
}
#screen-welcome{
  text-align:center;
  padding: clamp(22px, 6vw, 36px);
  display:grid;
  justify-items:center;
  gap: 14px;
  position:relative;
  overflow:hidden;
}
#screen-welcome::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,213,106,.16), transparent 55%),
    radial-gradient(circle at 25% 60%, rgba(233,243,255,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
#screen-welcome > *{position:relative; z-index:1;}
#screen-welcome .ribbon{margin-inline:auto;}
#screen-welcome h1{margin: 6px 0 0; font-size: clamp(28px, 5.4vw, 42px); max-width: 22ch;}
#screen-welcome .lead{margin:0; font-size: clamp(15px, 2.6vw, 17px); max-width: 56ch;}
#screen-welcome .startRow{margin-top:6px;}
#screen-welcome .buildStamp{
  margin-top: 6px;
  font-size:10px;
  letter-spacing:.2px;
  color: rgba(233,243,255,.6);
}
#screen-intro{text-align:center;}
#screen-intro .ribbon{margin-inline:auto; width:fit-content;}
.heroGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.heroTile{
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.18);
  border-radius:18px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.tileIcon{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke2);
  font-size:18px;
}
.tileTitle{font-weight:900}
.tileSub{font-size:12px;color:var(--muted)}

.startRow{margin-top:18px;display:flex;justify-content:center}
.smallNote{margin-top:10px;color:var(--muted);font-size:12px;text-align:center}

.hud{margin:16px 0; display:flex; gap:10px; align-items:stretch; flex-wrap:wrap;}
.progress{flex: 1 1 240px; padding:10px 12px; border-radius: 16px; border:1px solid var(--stroke); background: rgba(0,0,0,.22); backdrop-filter: var(--glass);}
.progressLabel{font-size:12px;color:var(--muted);margin-bottom:8px}
.bar{width:100%; height:8px; border-radius:999px; background: rgba(255,255,255,.09); border:1px solid var(--stroke2); overflow:hidden;}
.barFill{height:100%; width:0%; background: linear-gradient(90deg, rgba(255,213,106,.95), rgba(138,201,38,.95)); border-radius:999px; transition: width .35s ease;}
.progressText{margin-top:8px;font-size:13px;color:var(--muted)}

.codePill{flex: 1 1 100%; min-width:0; width:100%; padding:10px 12px; border-radius: 16px; border:1px solid var(--stroke); background: rgba(0,0,0,.22); display:flex; justify-content:space-between; align-items:center; gap:10px; position:relative; overflow:hidden;}
.codePill::after{content:""; position:absolute; inset:-60% -70%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-80%) rotate(18deg); opacity:0; pointer-events:none;}
.codePill.flash::after{opacity:.7; animation: shine 1.1s ease;}
.codeLabel{font-size:12px;color:var(--muted);font-weight:900;letter-spacing:.4px}
.codeValue{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-weight:900; letter-spacing: 4px; font-size: clamp(12px, 2.2vw, 16px); white-space: nowrap;}

.screen{padding:18px; transform: translateZ(0);}
.screen.enter{animation: enter .35s ease;}
@keyframes enter{from{opacity:0; transform: translateY(10px);} to{opacity:1; transform: translateY(0);} }

.screenHeader{padding:2px 2px 10px}
.screenTitle{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.screenTitle .badge{white-space:nowrap;}
.screenTitle h2{margin:0; font-size: 28px; font-weight:900}
#screen-3 .screenTitle,
#screen-protect-fire .screenTitle,
#screen-snowball-fight .screenTitle,
#screen-6-unwrap .screenTitle,
#screen-7-toss .screenTitle,
#screen-5 .screenTitle{
  align-items:center;
}
.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke2); background: rgba(255,255,255,.06); color: var(--gold); font-weight:900; font-size:12px;}
.screenHint{margin:6px 0 0;color:var(--muted);line-height:1.5}

.btn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius: 14px;
  font-weight:900;
  cursor:pointer;
  transition: transform var(--tap) ease, background .2s ease, border-color .2s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{background: rgba(255,255,255,.10)}
.btn:active{transform: translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,213,106,.95), rgba(255,89,94,.85));
  color:#1a1006;
  border-color: rgba(255,255,255,.22);
}
.btn.primary::after{
  content:"";
  position:absolute;
  inset:-60% -70%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-80%) rotate(18deg);
  opacity:0;
  pointer-events:none;
}
@media (hover:hover){
  .btn.primary:hover::after{opacity:.55; animation: shine 1.1s ease;}
}
.btn.primary:active::after{opacity:.45; animation: shine .9s ease;}
@keyframes shine{from{transform: translateX(-85%) rotate(18deg);} to{transform: translateX(85%) rotate(18deg);} }

.btn.ghost{background: rgba(0,0,0,.18); border-color: var(--stroke2)}
.btn.big{padding:12px 16px;border-radius:18px;font-size:16px}
.btnLabel{display:none}
@media (min-width:720px){ .btnLabel{display:inline} }

.statusLine{color:var(--muted);font-size:13px}
.crossStatusLine,
.huntStatusBar{
  margin:10px 0 8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.18);
  font-size:15px;
  width:100%;
}
.gameStatusBar{
  margin:10px 0 8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.18);
  font-size:15px;
  text-align:center;
  color:var(--muted);
  width:100%;
}
.crossStatusLine{
  text-align:center;
}
.quizHintBar{
  margin:10px 0 8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.18);
  text-align:center;
  font-size:15px;
  font-weight:400;
  color:var(--muted);
  width:100%;
}
.huntStatusBar{
  display:grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  column-gap:12px;
  row-gap:4px;
  align-items:start;
}
.huntStatusText{
  color:var(--muted);
  text-align:right;
  justify-self:end;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.huntRoundInfo{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width: 140px;
}
.huntFooter{
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.huntRoundTitle{color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.2px}
.huntRoundValue{font-size:22px; font-weight:1000; line-height:1}
.huntFooterButtons{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  width:100%;
}
.huntFooterButtons .btn{
  flex:1 1 0;
  justify-content:center;
}
.huntNextRow{
  margin:6px 0 8px;
}
.huntNextRow .btn{
  width:100%;
  justify-content:center;
}
@media (max-width: 560px){
  .huntFooter{
    align-items:flex-start;
  }
  .huntFooterButtons{
    width:100%;
    justify-content:flex-start;
  }
  .huntRoundInfo{min-width:0}
  .huntRoundTitle{font-size:11px}
  .huntRoundValue{font-size:18px}
  .huntStatusText{font-size:12px}
}
.ok{color: rgba(138,201,38,.95)}
.warn{color: rgba(255,213,106,.95)}
.bad{color: rgba(255,89,94,.95)}

/* Pairs */
.pairs{margin-top:10px}
.pairsGrid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px;}

/* Pairs: reduce playable card size only (keep other UI unchanged) */
#screen-1 .pairsGrid{
  width: min(100%, 520px);
  margin: 0 auto;
  gap: clamp(6px, 2vw, 12px);
}
@media (pointer: coarse) and (orientation: portrait){
  #screen-1 .pairsGrid{
    width: min(100%, 440px);
  }
}
@media (pointer: coarse) and (orientation: landscape){
  #screen-1 .pairsGrid{
    width: min(100%, 520px, max(140px, calc(100svh - 220px)));
  }
}
.cardBtn{
  aspect-ratio: 1 / 1;
  border-radius: clamp(12px, 4vw, 20px);
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  perspective: 900px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  transition: transform .12s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover:hover){
  .cardBtn:hover{transform: translateY(-2px); box-shadow: 0 18px 42px rgba(0,0,0,.36); border-color: rgba(255,255,255,.18);}
}
.cardBtn:active{transform: translateY(0) scale(.99)}
.cardBtn::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(240px 160px at 20% 15%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(240px 160px at 80% 85%, rgba(255,213,106,.10), transparent 60%);
  opacity: .65;
  pointer-events:none;
}
.cardInner{position:absolute; inset:0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.2,1);}
.cardFace{position:absolute; inset:0; display:grid; place-items:center; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.cardBack{
  border-radius: clamp(12px, 4vw, 20px);
  background:
    radial-gradient(180px 140px at 30% 25%, rgba(255,213,106,.16), transparent 60%),
    radial-gradient(180px 140px at 70% 75%, rgba(138,201,38,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.cardFront{
  transform: rotateY(180deg);
  border-radius: clamp(12px, 4vw, 20px);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.pairBackMark{
  width: 54%;
  height: 54%;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
  font-size: clamp(16px, 5vw, 26px);
  opacity: .95;
}
.pairImg{
  width: 82%;
  height: 82%;
  object-fit: cover;
  border-radius: clamp(10px, 3.6vw, 18px);
  box-shadow: 0 18px 50px rgba(0,0,0,.40);
}

.cardBtn.revealed .cardInner,
.cardBtn.matched .cardInner{transform: rotateY(180deg)}
.cardBtn.revealed{border-color: rgba(255,213,106,.35)}
.cardBtn.matched{border-color: rgba(138,201,38,.35); background: rgba(138,201,38,.10); cursor: default;}
.cardBtn.matched .cardInner{animation: pop .35s ease}
@keyframes pop{0%{transform: rotateY(180deg) scale(1);} 50%{transform: rotateY(180deg) scale(1.04);} 100%{transform: rotateY(180deg) scale(1);} }
.pairsFooter{margin-top:12px; display:flex; align-items:center; justify-content:center; gap:10px;}

/* Crossword */
.crosswrap{display:grid; grid-template-columns: 1fr; gap: 14px; margin-top:10px;}
.crossGrid{width:100%; max-width: 560px; justify-self:center; display:grid; grid-template-columns: repeat(var(--cols, 12), 1fr); gap:7px;}
.cell{aspect-ratio: 1 / 1; border-radius: clamp(4px, 1.6vw, 12px); border:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.50); position:relative; overflow:hidden;}
.cell.block{visibility:hidden; background: transparent; border-color: transparent}
.cell input{
  width:100%;
  height:100%;
  border:0;
  outline:0;
  margin:0;
  padding:0;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  background: transparent;
  color: var(--text);
  text-align:center;
  font-weight:900;
  font-size: clamp(12px, 2.3vw, 16px);
  line-height:1;
  text-transform:uppercase;
}
.cellNum{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size: clamp(8px, 2vw, 11px);
  color: rgba(233,243,255,.75);
  font-weight:900;
  pointer-events:none;
}
.cell.focus{box-shadow: 0 0 0 2px rgba(255,213,106,.25) inset; border-color: rgba(255,213,106,.32);}
.cell.hinted{box-shadow: 0 0 0 2px rgba(255,213,106,.22) inset; border-color: rgba(255,213,106,.35);}
.cell.hinted::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,213,106,.18), transparent 55%);
  pointer-events:none;
  opacity:.7;
}
.cell.correct{
  border-color: rgba(138,201,38,.6);
  box-shadow: 0 0 0 2px rgba(138,201,38,.28) inset;
}
.cell.filled .cellNum{opacity:.25;}

.crossClues{display:flex; flex-wrap:wrap; gap: 12px;}
.clueCol{flex: 1 1 auto; border-radius: 18px; border:1px solid var(--stroke2); background: rgba(0,0,0,.22); padding:12px; min-width: 200px;}
.clueTitle{font-weight:900;color:var(--gold);margin-bottom:6px}
.clueCol .clueList{margin:0;padding:0;list-style:none;color:var(--muted);font-size:13px;line-height:1.45}
.clueCol li{margin:6px 0 6px 0; cursor:pointer; user-select:none; padding:4px 6px; border-radius:10px;}
.clueCol li:hover{color: rgba(233,243,255,.95)}
.clueCol li.active{
  color: rgba(233,243,255,.98);
  background: rgba(255,213,106,.12);
}


/* Secret multi-challenges */
.choices{grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.choiceBtn{
  flex: 1 1 140px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  transition: transform var(--tap) ease, background .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.choiceBtn:hover{background: rgba(255,255,255,.10)}
.choiceBtn:active{transform: translateY(1px)}
.choiceBtn.good{border-color: rgba(138,201,38,.35); background: rgba(138,201,38,.12)}
.choiceBtn.bad{border-color: rgba(255,89,94,.35); background: rgba(255,89,94,.10)}

/* Scene */
.sceneWrap{display:grid; grid-template-columns: 1fr; gap: 14px; margin-top:10px;}
.scene{position:relative; border-radius: 18px; border:1px solid var(--stroke2); background: rgba(0,0,0,.20); overflow:hidden;}
.sceneSvg{width:100%;height:auto;display:block}
.scene{--sceneHudH: 0px;}
.sceneCounter{
  position:absolute;
  left:10px;
  top:10px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,213,106,.25) inset, 0 0 16px rgba(255,213,106,.25);
  color: var(--text);
  font-weight: 1000;
  font-size: clamp(14px, 3.2vw, 18px);
  line-height:1;
}
.sceneCounterIcon{
  width: clamp(14px, 3.2vw, 20px);
  height: clamp(14px, 3.2vw, 20px);
  object-fit:contain;
}
.quizCounter{
  position:static;
  margin-bottom:8px;
  width: fit-content;
}
.quizCounterIcon{
  display:grid;
  place-items:center;
  width: clamp(14px, 3.2vw, 20px);
  height: clamp(14px, 3.2vw, 20px);
  font-size: clamp(12px, 3vw, 16px);
}
.starsLayer{position:absolute; inset:0 0 var(--sceneHudH) 0}
.rotateHint{
  position:fixed;
  left:50%;
  top:12px;
  z-index:60;
  display:none;
  max-width: 92vw;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  font-size:12px;
  line-height:1.25;
  color: rgba(233,243,255,.95);
  pointer-events:none;
  text-align:center;
  transform: translate(-50%, 0);
}
.rotateHint.hintAutoHide{
  animation: hintFadeOut 3.2s ease forwards;
}
.rotateHint.hintHidden{
  opacity:0;
  transform: translate(-50%, -6px);
}
.fullscreenHint{
  position:fixed;
  left:50%;
  bottom:12px;
  z-index:60;
  display:none;
  max-width: min(92vw, 560px);
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  font-size:12px;
  line-height:1.25;
  color: rgba(233,243,255,.95);
  pointer-events:none;
  text-align:center;
  transform: translate(-50%, 0);
}
.fullscreenHint.hintAutoHide{
  animation: hintFadeOut 3.2s ease forwards;
}
.fullscreenHint.hintHidden{
  opacity:0;
  transform: translate(-50%, -6px);
}
@keyframes hintFadeOut{
  0%, 65%{opacity:1; transform: translate(-50%, 0);}
  100%{opacity:0; transform: translate(-50%, -6px);}
}
.crossRotateHint{
  max-width: min(92vw, 520px);
}
.starBtn{position:absolute; width: 36px; height: 36px; border-radius: 999px; border:1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); backdrop-filter: blur(10px); display:grid; place-items:center; font-size:18px; cursor:pointer; opacity: 0.36; transform: rotate(-8deg); transition: opacity .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;}
.starBtn:active{transform: scale(.98) rotate(-2deg)}
.starBtn.found{opacity: 1; background: rgba(255,213,106,.18); border-color: rgba(255,213,106,.35); transform: rotate(0deg); cursor: default; box-shadow:none;}
.starBtn.hint{opacity: 1; transform: scale(1.06) rotate(0deg); box-shadow: 0 0 0 3px rgba(255,213,106,.28), 0 0 22px rgba(255,213,106,.55); animation: hintPulse 1.2s ease-in-out infinite;}
.starsLayer[data-visibility="subtle"] .starBtn{opacity: 0.20; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14);}
.starsLayer[data-visibility="subtle"] .starBtn.found{opacity: 1; background: rgba(255,213,106,.18); border-color: rgba(255,213,106,.35);}
.starsLayer[data-visibility="subtle"] .starBtn.hint{opacity: 1; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28);}
@keyframes hintPulse{0%{box-shadow: 0 0 0 3px rgba(255,213,106,.12), 0 0 8px rgba(255,213,106,.25);}50%{box-shadow: 0 0 0 4px rgba(255,213,106,.35), 0 0 22px rgba(255,213,106,.7);}100%{box-shadow: 0 0 0 3px rgba(255,213,106,.12), 0 0 8px rgba(255,213,106,.25);}}
.sceneHud{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  min-height: var(--sceneHudH);
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.48) 28%, rgba(0,0,0,.70));
  border-top: 1px solid var(--stroke2);
  backdrop-filter: blur(10px);
}
.sceneHudLeft{flex:0 0 auto}
.sceneHudCenter{flex:1 1 auto; min-width: 160px}
.sceneHudRight{flex:0 0 auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
.sceneHud .counter{display:flex; flex-direction:column; gap:2px}
.sceneHud .counterValue{font-size: clamp(22px, 5vw, 30px); font-weight: 1000; line-height:1}
.sceneHud .statusLine{font-size: 12px; line-height:1.25; max-height: 2.6em; overflow:hidden}
.sceneHud .btn{padding:8px 10px; border-radius:12px}
.sceneHud .btn.ghost{background: rgba(0,0,0,.18)}
.counterTitle{color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.2px}
.counterValue{font-size: 32px; font-weight: 900;}

@supports (height: 100svh){
  @media (max-width: 560px), (max-height: 560px){
    #screen-3{padding:12px}
    #screen-3 .screenTitle h2{
      font-size: clamp(18px, 4.4vw, 22px);
      line-height:1.1;
    }
    #screen-3 .screenHint{
      font-size:12px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    #screen-3 .sceneWrap{gap:10px; margin-top:6px}
    #screen-3 .scene{
      height: clamp(200px, calc(100svh - 240px), 560px);
    }
    #screen-3 .screenFooter{margin-top:10px}
  }
  @media (max-width: 560px) and (orientation: portrait){
    #screen-3 .rotateHint{display:block}
    #screen-protect-fire .rotateHint,
    #screen-snowball-fight .rotateHint{display:block}
  }
}

/* Hunt landscape mode: lock scroll and show only play area */
html.huntLandscape, body.huntLandscape{
  overflow:hidden;
  height: 100svh;
}
body.huntLandscape .shell{
  margin:0;
  padding:0;
  max-width:none;
  height: 100svh;
  overflow:hidden;
}
body.landscapeChrome .shell{
  margin:0;
  padding:0;
  max-width:none;
}
body.huntLandscape #screen-3{
  height: 100svh;
  padding:0;
  border-radius:0;
  border:0;
  box-shadow:none;
  background: transparent;
}
body.huntLandscape #screen-3 .screenHeader,
body.huntLandscape #screen-3 .screenFooter,
body.huntLandscape #screen-3 .huntStatusBar{
  display:none;
}
body.huntLandscape #screen-3 .sceneWrap{
  margin-top:0;
  gap:0;
  height: 100svh;
  display:flex;
  justify-content:center;
  align-items:stretch;
}
body.huntLandscape #screen-3 .scene{
  height: 100%;
  width:auto;
  max-width: 100vw;
  aspect-ratio: 3 / 2;
  border-radius:0;
  border:0;
}
body.huntLandscape #screen-3 .rotateHint{display:none;}
body.huntLandscape #screen-3 .fullscreenHint{display:block;}
body.huntLandscape #screen-protect-fire .fullscreenHint{display:block;}
body.huntLandscape #screen-snowball-fight .fullscreenHint{display:block;}

body.huntLandscape #screen-protect-fire,
body.huntLandscape #screen-snowball-fight{
  height: 100svh;
  padding:0;
  border-radius:0;
  border:0;
  box-shadow:none;
  background: transparent;
}
body.huntLandscape #screen-protect-fire .screenHeader,
body.huntLandscape #screen-snowball-fight .screenHeader,
body.huntLandscape #screen-protect-fire .screenFooter,
body.huntLandscape #screen-snowball-fight .screenFooter{
  display:none;
}
body.huntLandscape #screen-protect-fire .gameContainer,
body.huntLandscape #screen-snowball-fight .gameContainer{
  margin-top:0;
  gap:0;
  height: 100%;
}
body.huntLandscape #screen-protect-fire .gameStatus,
body.huntLandscape #screen-snowball-fight .gameStatus,
body.huntLandscape #screen-protect-fire .gameStatusBar,
body.huntLandscape #screen-snowball-fight .gameStatusBar{
  display:none;
}
body.huntLandscape #screen-protect-fire .embedFrame,
body.huntLandscape #screen-snowball-fight .embedFrame{
  height: 100%;
  border:0;
  border-radius:0;
}
body.huntLandscape #screen-protect-fire .rotateHint,
body.huntLandscape #screen-snowball-fight .rotateHint{
  display:none;
}

/* Secret + Final */
.secret{margin-top:10px; display:grid; grid-template-columns: 1fr; gap: 14px;}
.secretBox{border-radius: 18px; border:1px solid var(--stroke2); background: rgba(0,0,0,.22); padding:12px;}
.secretLabel{color:var(--muted);font-size:12px;font-weight:900}
.secretWord{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; letter-spacing: 6px; font-weight: 900; font-size: 24px; margin-top:8px; margin-bottom:8px;}
.secretMini{margin-top:10px;color:var(--muted);font-size:13px}
.secretInput{
  border-radius: 18px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.22);
  padding:12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items:start;
}
.anagramTask{grid-column:1 / -1;}
.quizQuestion{
  margin-top: 0;
  font-weight: 900;
  font-size: clamp(15px, 3.2vw, 20px);
  line-height: 1.3;
  text-align:center;
  min-width:0;
  overflow-wrap: anywhere;
}
.quizRow{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:10px;
  width:100%;
  --quiz-counter-w: 0px;
  margin-top: clamp(8px, 2.2vw, 12px);
}
.quizCounter{margin-bottom:0;}
.quizCounterSpacer{
  display:block;
  width: var(--quiz-counter-w, 0px);
}
.quizOptions{
  margin-top: clamp(8px, 2.4vw, 12px);
  display:grid;
  gap: clamp(8px, 2vw, 12px);
}
#quizOpts .btn{
  width:100%;
  justify-content:center;
  text-align:center;
  white-space:normal;
  line-height:1.2;
  font-size: clamp(12px, 2.4vw, 15px);
  word-break: break-word;
}
.fieldLabel{font-size:12px;color:var(--muted);font-weight:900}
.field{width:100%; padding:12px 12px; border-radius: 14px; border:1px solid var(--stroke2); background: rgba(255,255,255,.06); color: var(--text); outline: none; font-size: 16px;}
.field:focus{border-color: rgba(255,213,106,.35); box-shadow: 0 0 0 2px rgba(255,213,106,.15);}
.bigField{font-size: 18px; letter-spacing: 6px; text-transform: uppercase; font-weight: 900;}
#finalSecondWord{text-align:center;}
.finalWrap{margin-top:10px; display:grid; grid-template-columns: 1fr; gap: 16px;}
.finalCard{
  border-radius: 18px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.22);
  padding:14px;
  display:grid;
  gap:12px;
}
.finalCodeValue{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 1000;
  letter-spacing: clamp(2px, 1vw, 6px);
  font-size: clamp(14px, 4.2vw, 24px);
  text-align:center;
  padding: 12px 12px;
  border-radius: 18px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.06);
  overflow-x: auto;
  white-space: nowrap;
}
.finalHint{color:var(--muted); font-size:13px; line-height:1.4; margin-top:-6px;}
.endingTitle{font-size: 24px; font-weight: 900; margin:0;}
.endingRiddle{margin:0; color: var(--muted); line-height: 1.5;}
.endingResult{
  margin-top:0;
  padding:12px;
  border-radius: 18px;
  border:1px solid rgba(138,201,38,.25);
  background: rgba(138,201,38,.12);
  line-height:1.45;
  display:grid;
  gap:12px;
}
.finalWrap #endingRevealBtn{
  justify-self:center;
  width: fit-content;
  max-width: 100%;
  padding:10px 14px;
  border-radius:16px;
  font-size:14px;
  text-align:center;
  white-space:normal;
}
.presentPhoto{
  margin-top:0;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  width: min(100%, clamp(220px, 70vw, 360px));
  max-width: 100%;
  color: rgba(233,243,255,.78);
  font-weight:900;
  display:block;
  object-fit: cover;
  margin-inline:auto;
  height:auto;
}
.presentPhoto.placeholder{
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 10px, rgba(0,0,0,.18) 10px 20px);
}
.finalClueText{margin:0;}

.screenFooter{margin-top:14px; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:nowrap;}
.screenFooter .hintText{color:var(--muted); font-size:13px; margin-right:auto;}
.screenFooter .btn{
  flex:1 1 0;
  justify-content:center;
}
.gameContainer{
  display:grid;
  gap:14px;
  margin-top:10px;
  position:relative;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  justify-items:stretch;
}
#screen-7-toss .crossStatusLine{margin-bottom:0;}
#screen-7-toss .screenFooter{margin-top:0;}
.portraitRotateBlock{
  display:none;
  width:100%;
  height:auto;
  aspect-ratio: 3 / 2;
  max-height: min(70vh, 640px);
  max-width:100%;
  box-sizing:border-box;
  border:1px solid var(--stroke2);
  border-radius:18px;
  background: rgba(0,0,0,.22);
  place-items:center;
  padding:16px;
  text-align:center;
}
.portraitRotateCard{
  max-width: 420px;
  width: min(420px, 92%);
  max-width:100%;
  border-radius: 20px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.45);
  padding:16px 18px;
  box-shadow: var(--shadow);
  color: var(--text);
  display:grid;
  gap:6px;
  justify-items:center;
}
.portraitRotateIcon{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  font-size:24px;
}
.portraitRotateTitle{
  font-weight:900;
  font-size:16px;
}
.portraitRotateText{
  color: var(--muted);
  font-size:13px;
  line-height:1.4;
}
body.protectFirePortrait #screen-protect-fire .portraitRotateBlock{display:grid;}
body.protectFirePortrait #screen-protect-fire .embedFrame,
body.protectFirePortrait #screen-protect-fire .gameStatus{display:none;}
body.protectFirePortrait #screen-protect-fire .rotateHint{display:none;}
body.snowballPortrait #screen-snowball-fight .portraitRotateBlock{display:grid;}
body.snowballPortrait #screen-snowball-fight .embedFrame,
body.snowballPortrait #screen-snowball-fight .gameStatus{display:none;}
body.snowballPortrait #screen-snowball-fight .rotateHint{display:none;}
.gamePanel{
  border:1px solid var(--stroke2);
  border-radius:18px;
  padding:14px;
  background: rgba(0,0,0,.2);
  display:grid;
  gap:12px;
}
.gameActions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.gameStatus{
  text-align:center;
  font-weight:800;
  color: var(--gold);
}
.gameNote{color:var(--muted); font-size:13px; text-align:center; line-height:1.45;}
.gameHUD{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.gameControls{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.embedFrame{
  width:100%;
  height:auto;
  aspect-ratio: 3 / 2;
  max-height: min(70vh, 640px);
  max-width:100%;
  border:1px solid var(--stroke2);
  border-radius:18px;
  background: rgba(0,0,0,.22);
}
.gameResult{
  position:fixed;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform: translateX(-50%);
  z-index:25;
  display:grid; place-items:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  padding:16px;
}
.gameResult[hidden]{display:none;}
.resultCard{
  max-width:420px;
  width:min(420px, 92vw);
  max-height: min(80svh, 80vh);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  border-radius:18px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.5);
  padding:16px;
  text-align:center;
  box-shadow: var(--shadow);
}
.globeWrap{display:grid; gap:12px; justify-items:center;}
.globeFrame{
  width: min(100%, 454px);
  aspect-ratio: 682 / 819; /* show the middle 60% of 682×1365 assets */
  max-height: min(50vh, 542px);
  position: relative;
  margin-bottom:6px;
  border-radius: 22px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.20);
  overflow:hidden;
  box-shadow: var(--shadow);
  cursor: grab;
  touch-action: none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.globeFrame:active{cursor: grabbing;}
.globeImg{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 50% 42%;
  pointer-events:none;
  -webkit-user-drag:none;
  user-drag:none;
}

@supports (height: 100svh){
  .globeFrame{ max-height: min(50svh, 542px); }
}
.unwrapGrid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 12px);
  max-width:520px;
  width: min(100%, 520px);
  margin:10px auto;
}
.unwrapBox{
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.05);
  border-radius:14px;
  padding: clamp(10px, 2.2vw, 16px) 6px;
  min-height: clamp(54px, 10vw, 70px);
  display:grid;
  place-items:center;
  font-size: clamp(20px, 4vw, 28px);
  cursor:pointer;
}
.unwrapBox.opened{background: rgba(255,255,255,.12); border-color: rgba(255,213,106,.4);}
.unwrapBox .unwrapGift{display:none;}
.unwrapBox.opened .unwrapGift{display:block;}
.unwrapBox.opened .unwrapLid{display:none;}
.footer{margin-top:16px; padding:14px; text-align:center; color: rgba(233,243,255,.70); font-size: 12px;}

@media (min-width: 860px){
  .sceneWrap{grid-template-columns: 1fr}
  .crosswrap{grid-template-columns: 560px 1fr}
  .crossGrid{justify-self:start}
  .screenHeader{text-align:center;}
  .screenTitle{justify-content:center;}
}
@media (max-width: 560px){
  .heroGrid{grid-template-columns: 1fr}
  .hero h1{font-size:34px}
  .pairsGrid{grid-template-columns: repeat(4,1fr)}
  .globeFrame{
    width: min(100%, 378px);
    border-radius: 18px;
    max-height: min(45vh, 468px);
  }
  .crossRotateHint{
    display:block;
    max-width: 92vw;
    text-align:center;
  }
  #screen-2 .screenHint{margin-bottom:6px;}
  #screen-2 .crossGrid{gap:6px;}
  #screen-2 .cell input{font-size: clamp(11px, 3.2vw, 14px);}
  #screen-protect-fire .screenTitle h2{
    font-size: clamp(14px, 4.2vw, 18px);
    line-height:1.1;
  }
  #screen-snowball-fight .screenTitle h2{
    font-size: clamp(14px, 4.2vw, 18px);
    line-height:1.1;
  }
  #screen-6-unwrap .screenTitle h2{
    font-size: clamp(13px, 4vw, 17px);
    line-height:1.1;
  }
  #screen-7-toss .screenTitle h2{
    font-size: clamp(13px, 4vw, 17px);
    line-height:1.1;
  }
  #screen-5 .screenTitle h2{
    font-size: clamp(13px, 4vw, 17px);
    line-height:1.1;
  }
  .screenFooter .btn{
    padding:8px 8px;
    font-size:12px;
  }
  .quizRow{
    gap:6px;
    grid-template-columns: 1fr;
    justify-items:center;
  }
  .quizCounterSpacer{display:none;}
  .quizQuestion{
    justify-self:center;
    text-align:center;
  }
}
@media (pointer: coarse) and (orientation: portrait){
  .unwrapGrid{
    max-width:440px;
    width: min(100%, 440px);
    gap: clamp(4px, 2vw, 8px);
  }
  .unwrapBox{
    padding: clamp(8px, 2vw, 12px) 4px;
    min-height: clamp(46px, 9vw, 60px);
    font-size: clamp(18px, 4.5vw, 24px);
  }
}
@media (max-width: 560px) and (orientation: portrait){
  #screen-2 .crossGrid{gap:2px;}
  #screen-2 .cell input{
    font-size:16px;
    transform: scale(0.82);
    transform-origin:center;
  }
}
@supports (height: 100svh){
  @media (max-width: 560px){
    .globeFrame{ max-height: min(45svh, 468px); }
  }
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  #bgfx::before, #bgfx::after{animation:none !important;}
}

/* Intro tasks integrated into hero tiles (stable) */
.heroTile.taskTile{
  width:100%;
  cursor:pointer;
  position:relative;
  color: var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px 14px;
  gap:10px;
  min-height:auto;
  user-select:none;
  touch-action:manipulation;
}
.heroTile.taskTile:hover{cursor:pointer;}
#brandHome{cursor:pointer;}
.heroTile.taskTile .tileIcon{font-size:22px; margin:0 auto;}
.heroTile.taskTile .tileBody{width:100%; text-align:center;}
.heroTile.taskTile .tileTitleRow{display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:8px; width:100%;}
.heroTile.taskTile .tileTitle{grid-column:2; justify-self:center; font-weight:1000; font-size:clamp(14px, 2.2vw, 17px); text-align:center; text-shadow: 0 2px 10px rgba(0,0,0,.35); color: var(--text);}
.heroTile.taskTile .tileCheck{grid-column:3; justify-self:end;}
.heroTile.taskTile .tileSub{color: var(--muted); font-size:13px; line-height:1.3; text-align:center;}
.heroTile.taskTile .tileCheck{
  width:22px; height:22px;
  border-radius:999px;
  display:inline-grid; place-items:center;
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  border:1px solid rgba(138,201,38,.45);
  background: rgba(138,201,38,.18);
  color: rgba(233,243,255,.95);
  font-weight: 1000;
  opacity:0;
  visibility:hidden;
  transform: scale(.92);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  flex:0 0 auto;
}
.heroTile.taskTile.done{border-color: rgba(138,201,38,.28); background: rgba(138,201,38,.08);}
.heroTile.taskTile.done .tileCheck{opacity:1; visibility:visible; transform: scale(1);}
.heroTile.taskTile.pulse{
  animation: pulseGlow 1.1s ease 2;
  border-color: rgba(255,213,106,.35);
  box-shadow: 0 0 0 2px rgba(255,213,106,.14) inset;
}
@keyframes pulseGlow{
  0%{transform: translateY(0) scale(1);}
  45%{transform: translateY(-2px) scale(1.01);}
  100%{transform: translateY(0) scale(1);}
}
.taskTile *{pointer-events:none}

@media (max-width: 560px){
  .heroTile.taskTile{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    gap:12px;
  }
  .heroTile.taskTile .tileIcon{
    margin:0;
    flex:0 0 auto;
  }
  .heroTile.taskTile .tileBody,
  .heroTile.taskTile .tileSub{
    text-align:left;
  }
  .heroTile.taskTile .tileTitleRow{
    display:block;
  }
  .heroTile.taskTile .tileTitle{
    justify-self:start;
    text-align:left;
  }
}


/* Mobile-friendly controls */
button, .btn, a.btn{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn{
  min-height: 48px;
}
.heroTile, .taskTile{
  min-height: 86px;
}
.heroTile.taskTile{
  min-height:auto;
}



/* Crossword layout (no mobile popup/zoom) */
.crossLaunch{display:none; margin:12px 0 8px; justify-content:center;}
#crossShell{display:block;}
#crossShell .crossShellTop{display:none;}