/* FraudHunter visual v3: Case Files + Red Flag Rush */
:root{--fh-aqua:#20e7ff;--fh-magenta:#ff3fc8;--fh-violet:#9b72ff;--fh-mint:#54f59d;--fh-coral:#ff557f}
#screen-level{background:radial-gradient(circle at 12% 12%,rgba(32,231,255,.16),transparent 29%),radial-gradient(circle at 88% 30%,rgba(255,63,200,.16),transparent 30%),linear-gradient(180deg,#111a39,#0b1022)}
#screen-level .level-header,#screen-arcade .arcade-header{background:linear-gradient(105deg,rgba(22,42,86,.96),rgba(67,20,83,.91));border-bottom-color:rgba(142,209,255,.28)}
#screen-level .bubble{border-color:rgba(32,231,255,.48);background:linear-gradient(145deg,rgba(36,54,93,.98),rgba(17,24,53,.98));box-shadow:0 20px 40px -24px rgba(32,231,255,.8),inset 0 1px rgba(255,255,255,.08)}
#screen-level .ans-btn{border-radius:16px;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
#screen-level .ans-btn.scam{border-color:rgba(255,89,159,.48)}
#screen-level .ans-btn.legit{border-color:rgba(84,245,157,.48)}
#screen-level .ans-btn:hover{transform:translateY(-3px);filter:brightness(1.12)}
#screen-level .ans-btn.scam::after{content:'🚩';position:absolute;right:13px;top:50%;transform:translateY(-50%);filter:drop-shadow(0 0 8px rgba(255,63,200,.65))}
#screen-level .ans-btn.legit::after{content:'✓';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:20px;color:#8fffc3;text-shadow:0 0 10px rgba(84,245,157,.8)}
#screen-level .feedback-panel.show{border-radius:16px;box-shadow:inset 0 1px rgba(255,255,255,.08),0 16px 35px -25px #050a1c}
#screen-level .feedback-panel.correct{background:linear-gradient(135deg,rgba(15,91,76,.95),rgba(20,43,70,.96))}
#screen-level .feedback-panel.wrong{background:linear-gradient(135deg,rgba(104,29,65,.95),rgba(43,23,59,.96))}
#screen-arcade{background:radial-gradient(circle at 10% 15%,rgba(32,231,255,.18),transparent 26%),radial-gradient(circle at 90% 30%,rgba(255,63,200,.17),transparent 29%),linear-gradient(180deg,#090d24,#151035 65%,#090d20)}
#screen-arcade .arcade-hud span{padding:5px 8px;border:1px solid rgba(149,192,255,.22);border-radius:10px;background:rgba(7,13,31,.48)}
#screen-arcade .arcade-howto{margin:10px 14px 8px;padding:9px 11px;border-radius:13px;background:linear-gradient(90deg,rgba(32,231,255,.08),rgba(255,63,200,.08));border:1px solid rgba(137,166,255,.16);color:#c9d8f2}
#screen-arcade .msg-card{border-radius:15px!important;border-color:rgba(154,189,255,.30)!important;color:#eaf4ff;box-shadow:0 18px 34px -21px rgba(92,131,255,.8),inset 0 1px rgba(255,255,255,.08)!important}
#screen-arcade .msg-card::before{content:'';position:absolute;inset:0 0 auto;height:2px;border-radius:inherit;background:linear-gradient(90deg,var(--fh-aqua),var(--fh-violet),var(--fh-magenta));opacity:.82}
#screen-arcade .msg-card .tag::before{content:'◈ ';color:#80f4ff}
#screen-arcade .cta{background:linear-gradient(105deg,#18cde5,#8062ee 54%,#ed4ec5);border:0;box-shadow:0 12px 28px -13px rgba(128,98,238,.92)}
@media (prefers-reduced-motion:reduce){#screen-level .ans-btn{transition:none}}

/* Panther Stack / Tetris: a warmer arcade cabinet with playful neon blocks. */
.puzzle-screen{
  background:
    radial-gradient(circle at 10% 8%,rgba(255,226,92,.42),transparent 21%),
    radial-gradient(circle at 91% 16%,rgba(255,104,187,.30),transparent 25%),
    radial-gradient(circle at 82% 87%,rgba(85,241,190,.28),transparent 24%),
    linear-gradient(145deg,#fff4c9 0%,#e3fbff 43%,#e9dcff 100%) !important;
  color:#17345f;
}
.puzzle-screen .puzzle-header{padding-top:16px;}
.puzzle-brand-title{color:#6b3db8 !important;text-shadow:0 2px 0 rgba(255,255,255,.7);}
.puzzle-brand-tag{color:#127f9a !important;}
.puzzle-screen .back-btn{color:#6b3db8 !important;background:rgba(255,255,255,.68);border-radius:12px;box-shadow:0 5px 12px -8px #6443a8;}
.puzzle-hud-row{gap:6px;}
.pz-card{
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(242,249,255,.78)) !important;
  border-color:rgba(104,69,190,.18) !important;
  box-shadow:0 7px 16px -12px rgba(72,61,145,.65) !important;
}
.pz-card:nth-child(2n) .pz-pill{background:linear-gradient(135deg,#ff6fab,#9b72ff 58%,#4bded2) !important;}
.pz-card:nth-child(3n) .pz-pill{background:linear-gradient(135deg,#ffba40,#ff6c91 58%,#a369ff) !important;}
.pz-card b{color:#30377e !important;}
.puzzle-mission-bar{height:8px !important;background:rgba(91,81,178,.14) !important;}
.puzzle-mission-fill{background:linear-gradient(90deg,#2de8d0,#41b6ff,#a778ff,#ff70b0) !important;box-shadow:0 0 12px rgba(75,222,210,.7);}
.puzzle-board-wrap{
  border-radius:22px !important;
  background-image:linear-gradient(140deg,#ffdf58,#ff69a9 26%,#9d70ff 55%,#2de5d1 83%,#ffdf58) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.76),0 16px 30px -16px rgba(115,75,201,.68),0 0 30px rgba(255,111,184,.32) !important;
}
.puzzle-grid{background:linear-gradient(145deg,rgba(30,48,101,.92),rgba(15,21,61,.98)) !important;box-shadow:inset 0 0 22px rgba(58,244,239,.16);}
.t-cell{background:linear-gradient(145deg,rgba(134,165,220,.24),rgba(65,78,147,.22)) !important;box-shadow:inset 0 1px rgba(255,255,255,.10) !important;}
.t-cell.filled{border-radius:28% !important;box-shadow:0 3px 7px rgba(9,14,56,.48),inset 0 2px rgba(255,255,255,.62),inset -2px -3px rgba(20,36,103,.22) !important;}
.t-cell.filled.tc-good{background:radial-gradient(circle at 28% 24%,#fff 0 7%,#72f5ff 20%,#32a9ff 54%,#5752d8 100%) !important;}
.t-cell.filled.tc-goodYellow{background:radial-gradient(circle at 28% 24%,#fff 0 7%,#fff59b 20%,#ffc83c 55%,#ef6f58 100%) !important;}
.t-cell.filled.tc-goodGreen{background:radial-gradient(circle at 28% 24%,#fff 0 7%,#a9ffd1 20%,#38e6a5 55%,#149bb4 100%) !important;}
.t-cell.filled.tc-scammer{background:radial-gradient(circle at 28% 24%,#fff4f7 0 7%,#ff9d90 20%,#ff528c 54%,#9d3dd2 100%) !important;}
.t-cell.active-piece{animation:fhBlockGlow 1s ease-in-out infinite;}
@keyframes fhBlockGlow{50%{filter:brightness(1.17) saturate(1.22);transform:translateY(-1px)}}
.puzzle-controls .pz-btn{border:0 !important;background:linear-gradient(145deg,#fff,#e7edff) !important;color:#6b3db8 !important;box-shadow:0 7px 14px -9px rgba(71,58,159,.75) !important;}
.puzzle-controls .pz-btn:nth-child(odd){background:linear-gradient(145deg,#ffe1f0,#e7e0ff) !important;color:#c63f8c !important;}
.puzzle-controls .pz-btn:active{transform:scale(.92) rotate(-2deg);}
.puzzle-startcard,.puzzle-endcard{background:linear-gradient(145deg,rgba(54,37,113,.93),rgba(19,67,111,.93)) !important;border:1px solid rgba(255,255,255,.25);box-shadow:inset 0 1px rgba(255,255,255,.16);}
.puzzle-startcard .cta,.puzzle-endcard .cta{background:linear-gradient(105deg,#ff78b0,#9d70ff 54%,#32dbc8) !important;border:0 !important;box-shadow:0 12px 22px -12px rgba(255,111,184,.9);}
@media (prefers-reduced-motion:reduce){.t-cell.active-piece{animation:none}}

/* Neon Chase: make every pickup and scam feel like a collectible arcade sticker. */
.runner-screen{
  background:radial-gradient(circle at 10% 12%,rgba(41,238,255,.18),transparent 27%),radial-gradient(circle at 92% 15%,rgba(255,92,190,.18),transparent 28%),linear-gradient(180deg,#10153d,#201151 57%,#0b1737) !important;
}
.runner-header{background:linear-gradient(105deg,rgba(20,44,91,.94),rgba(94,24,106,.9));border-bottom-color:rgba(91,235,255,.31) !important;}
.runner-hud>span{padding:5px 8px;border-radius:11px;background:rgba(5,12,40,.42);border:1px solid rgba(151,203,255,.21);box-shadow:inset 0 1px rgba(255,255,255,.07);}
.runner-howto{margin:10px 14px !important;padding:9px 11px;border-radius:14px;color:#d8e6ff !important;background:linear-gradient(90deg,rgba(52,239,255,.1),rgba(255,96,193,.1));border:1px solid rgba(153,169,255,.2);}
.runner-track{
  margin:0 12px 14px !important;border-radius:22px !important;border:2px solid rgba(87,231,255,.36) !important;
  background:linear-gradient(180deg,rgba(44,24,114,.72),rgba(7,22,60,.95)),repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 2px,transparent 2px 44px) !important;
  box-shadow:inset 0 0 32px rgba(53,231,255,.13),0 14px 30px -20px rgba(86,56,225,.95),0 0 22px rgba(255,72,181,.18);
}
.runner-lane-line{width:2px !important;background:linear-gradient(180deg,transparent,rgba(129,238,255,.47),transparent) !important;}
.runner-goal-bar{height:7px !important;top:10px !important;background:rgba(255,255,255,.14) !important;box-shadow:inset 0 1px 4px rgba(0,0,0,.45);}
.runner-goal-fill{background:linear-gradient(90deg,#2ce8ff,#68f2b5,#ffe260,#ff73bd) !important;box-shadow:0 0 12px rgba(44,232,255,.8);}
.runner-player{filter:drop-shadow(0 0 10px rgba(52,240,255,.72)) drop-shadow(0 8px 12px rgba(0,0,0,.52)) !important;}
.runner-obstacle.fh-runner-sticker{
  width:52px !important;height:52px !important;border-radius:18px !important;overflow:visible;
  font-size:0 !important;animation:fhRunnerBob .8s ease-in-out infinite alternate;
}
.runner-obstacle.fh-runner-sticker::before{content:'';position:absolute;inset:3px;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.35),transparent 36%);pointer-events:none;}
.runner-obstacle.fh-runner-sticker .fh-runner-icon{font-size:25px;line-height:1;filter:drop-shadow(0 2px 1px rgba(20,15,74,.35));z-index:1;}
.runner-obstacle.fh-runner-sticker .fh-runner-label{position:absolute;bottom:-10px;padding:2px 5px;border-radius:999px;font:800 7px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#fff;z-index:2;}
.runner-obstacle.o-scam{background:linear-gradient(145deg,#ff5ea8,#a448e6) !important;border-color:#ffc5e2 !important;box-shadow:0 0 0 2px rgba(255,90,178,.24),0 0 19px rgba(255,61,174,.86) !important;}
.runner-obstacle.o-scam .fh-runner-label{background:#d82a75;box-shadow:0 3px 7px rgba(57,5,52,.45);}
.runner-obstacle.o-coin{background:linear-gradient(145deg,#fff07a,#ffa83f) !important;border-color:#fff7b2 !important;box-shadow:0 0 0 2px rgba(255,211,71,.24),0 0 19px rgba(255,188,42,.84) !important;}
.runner-obstacle.o-coin .fh-runner-label{background:#d37817;box-shadow:0 3px 7px rgba(70,33,3,.4);}
.runner-obstacle.o-shield{background:linear-gradient(145deg,#61ffd3,#38a8f6) !important;border-color:#c8fff0 !important;box-shadow:0 0 0 2px rgba(85,255,201,.24),0 0 19px rgba(42,232,196,.84) !important;}
.runner-obstacle.o-shield .fh-runner-label{background:#088b91;box-shadow:0 3px 7px rgba(0,50,65,.4);}
@keyframes fhRunnerBob{to{transform:translateX(-50%) translateY(-4px) rotate(3deg)}}
.runner-startcard,.runner-endcard{background:linear-gradient(145deg,rgba(32,24,88,.94),rgba(12,66,106,.94)) !important;}
.runner-startcard .cta,.runner-endcard .cta{background:linear-gradient(105deg,#2ce8ff,#9b72ff 53%,#ff69b5) !important;border:0 !important;box-shadow:0 12px 24px -12px rgba(70,211,255,.85);}
@media (prefers-reduced-motion:reduce){.runner-obstacle.fh-runner-sticker{animation:none}}

/* Decision screen: brighter, easier-to-scan message bubble and answer cards. */
#screen-level .case-area{
  padding:20px 18px 14px;
}
#screen-level .case-kicker{
  width:max-content;
  max-width:100%;
  padding:7px 11px 7px 7px;
  border:1px solid rgba(130,226,255,.30);
  border-radius:999px;
  background:linear-gradient(90deg,rgba(38,226,255,.17),rgba(159,105,255,.17),rgba(255,95,190,.13));
  box-shadow:0 8px 18px -14px rgba(45,221,255,.92);
}
#screen-level .bubble{
  isolation:isolate;
  min-height:118px;
  padding:18px 18px 20px;
  border:2px solid rgba(109,231,255,.72);
  border-radius:24px 24px 24px 7px;
  background:
    radial-gradient(circle at 92% 14%,rgba(255,225,108,.33),transparent 16%),
    radial-gradient(circle at 6% 95%,rgba(255,85,181,.28),transparent 28%),
    linear-gradient(135deg,#315eb4 0%,#523da2 48%,#9b3c9e 100%);
  color:#fff;
  box-shadow:0 18px 34px -17px rgba(0,0,0,.78),0 0 0 4px rgba(85,215,255,.09),0 0 30px rgba(128,86,255,.35),inset 0 1px rgba(255,255,255,.26);
}
#screen-level .bubble::before{
  content:'💬';
  position:absolute;
  z-index:-1;
  right:13px;
  bottom:6px;
  font-size:49px;
  opacity:.16;
  transform:rotate(-12deg);
}
#screen-level .bubble .sender{
  width:fit-content;
  margin-bottom:10px;
  padding:6px 10px 6px 8px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:999px;
  background:rgba(8,20,70,.34);
  color:#f5fbff;
  font-size:11px;
  letter-spacing:.02em;
  box-shadow:inset 0 1px rgba(255,255,255,.16);
}
#screen-level .sender::before{
  width:9px;height:9px;flex-basis:9px;
  background:linear-gradient(135deg,#fff17a,#ff78c9);
  box-shadow:0 0 12px rgba(255,235,111,.92);
}
#screen-level #case-message{
  position:relative;
  z-index:1;
  display:block;
  color:#fff;
  font-weight:600;
  letter-spacing:.005em;
  text-shadow:0 1px 2px rgba(24,17,72,.42);
}
#screen-level .question{
  margin:16px 0 12px;
  color:#fff7ca;
  font-size:20px;
  text-shadow:0 2px 10px rgba(255,188,72,.25);
}
#screen-level .question::after{color:#b7d8ff;}
#screen-level .answer-row{
  gap:12px;
}
#screen-level .ans-btn{
  min-height:100px;
  padding:17px 30px 15px 12px;
  border:2px solid transparent;
  border-radius:22px;
  color:#fff;
  font-size:15px;
  line-height:1.18;
  text-align:left;
  text-shadow:0 1px 2px rgba(19,16,56,.35);
  box-shadow:0 14px 24px -16px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.34),inset 0 -16px 25px rgba(16,11,73,.16);
}
#screen-level .ans-btn.scam{
  border-color:#ffbfdc;
  background:radial-gradient(circle at 17% 12%,rgba(255,255,255,.34),transparent 20%),linear-gradient(145deg,#ff6f9f,#e63e92 54%,#9e3fd1);
}
#screen-level .ans-btn.legit{
  border-color:#bfffe2;
  background:radial-gradient(circle at 17% 12%,rgba(255,255,255,.36),transparent 20%),linear-gradient(145deg,#48e5bc,#27b9cb 52%,#4775df);
}
#screen-level .ans-btn::after{
  right:11px;
  width:35px;height:35px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.44);
  border-radius:50%;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px rgba(255,255,255,.38),0 4px 9px rgba(33,10,66,.24);
}
#screen-level .ans-btn.scam::after{content:'🚩';right:11px;}
#screen-level .ans-btn.legit::after{content:'✓';right:11px;color:#fff;font-size:21px;}
#screen-level .ans-btn:hover,#screen-level .ans-btn:focus-visible{
  transform:translateY(-5px) scale(1.025);
  filter:saturate(1.18) brightness(1.07);
}
#screen-level .ans-btn.scam:hover{box-shadow:0 18px 32px -14px rgba(255,65,166,.86),0 0 0 4px rgba(255,104,188,.17),inset 0 1px rgba(255,255,255,.36);}
#screen-level .ans-btn.legit:hover{box-shadow:0 18px 32px -14px rgba(42,233,194,.86),0 0 0 4px rgba(73,243,201,.17),inset 0 1px rgba(255,255,255,.36);}
@media (max-width:360px){#screen-level .ans-btn{min-height:88px;font-size:13px;padding-left:9px;}.answer-row{gap:8px!important;}}
@media (prefers-reduced-motion:reduce){#screen-level .ans-btn:hover,#screen-level .ans-btn:focus-visible{transform:none;}}

/* Game map: turn the dark path into a bright, readable adventure board. */
#screen-map{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 13% 23%,rgba(29,239,255,.26),transparent 25%),
    radial-gradient(circle at 89% 35%,rgba(255,74,185,.22),transparent 25%),
    linear-gradient(180deg,rgba(11,31,77,.35),rgba(8,13,45,.82));
}
#screen-map::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,15,47,.25),transparent 27%,transparent 72%,rgba(20,7,53,.26));
  z-index:0;
}
#screen-map .hud,#screen-map .map-header,#screen-map .cat-strip,#screen-map .path-wrap,#screen-map .tabbar{position:relative;z-index:1;}
#screen-map .map-header{
  margin:8px 12px 0;
  padding:13px 14px 10px !important;
  border:1px solid rgba(123,223,255,.28);
  border-radius:18px;
  background:linear-gradient(105deg,rgba(25,74,135,.79),rgba(101,42,134,.68));
  box-shadow:0 12px 25px -20px #000,inset 0 1px rgba(255,255,255,.17);
}
#screen-map .map-header h2{color:#fff4ad;text-shadow:0 0 16px rgba(255,213,89,.38);}
#screen-map .map-header p{color:#d7ebff;}
#screen-map .cat-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  overflow:visible;
  padding:10px 13px 7px;
}
#screen-map .cat-pill{
  min-width:0;
  overflow:hidden;
  padding:7px 6px;
  border-radius:999px;
  text-align:center;
  text-overflow:ellipsis;
  background:rgba(16,29,76,.72);
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 7px 13px -12px #000;
}
@media (max-width:370px){#screen-map .cat-pill{font-size:9.5px;padding:7px 4px;}}
#screen-map .path-wrap{
  margin:0 9px 8px;
  padding:18px 23px 30px;
  border:1px solid rgba(123,184,255,.24);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(13,28,73,.50),rgba(9,12,45,.64));
  box-shadow:inset 0 0 38px rgba(58,187,255,.10),0 15px 30px -25px #000;
}
#screen-map .path-wrap::before{
  content:'';
  position:absolute;
  z-index:0;
  left:50%;top:36px;bottom:33px;
  width:4px;
  transform:translateX(-50%);
  border-radius:10px;
  background:repeating-linear-gradient(180deg,#55e9ff 0 10px,rgba(125,110,255,.35) 10px 20px);
  box-shadow:0 0 13px rgba(54,232,255,.68);
  opacity:.76;
}
#screen-map .node-col{gap:31px;padding-top:5px;}
#screen-map .node-item{min-width:91px;min-height:109px;display:flex;flex-direction:column;align-items:center;}
#screen-map .node-item.n-left{margin-left:2px;}
#screen-map .node-item.n-right{margin-right:2px;}
#screen-map .node{
  width:78px;
  height:78px;
  font-size:27px;
  border:2px solid rgba(255,255,255,.52);
  filter:drop-shadow(0 9px 8px rgba(0,0,0,.40));
  box-shadow:inset 0 2px rgba(255,255,255,.38),inset 0 -10px 16px rgba(22,18,85,.17);
  transition:transform .18s ease,filter .18s ease;
}
#screen-map .node::before{
  content:'';
  position:absolute;
  inset:6px 13px auto;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.31);
  filter:blur(2px);
}
#screen-map .node:hover:not(.locked),#screen-map .node:focus-visible:not(.locked){transform:translateY(-6px) scale(1.08);filter:drop-shadow(0 0 14px rgba(255,255,255,.42)) drop-shadow(0 12px 9px rgba(0,0,0,.42));}
#screen-map .node.current{border-color:#e7ffff;background:linear-gradient(145deg,#52f7ff,#18c6ee 46%,#3777e7)!important;box-shadow:0 0 0 5px rgba(75,240,255,.18),0 0 27px rgba(55,227,255,.80),inset 0 2px rgba(255,255,255,.50);}
#screen-map .node.arcade{background:linear-gradient(145deg,#bc8cff,#7a4bff 54%,#5542cb)!important;}
#screen-map .node.chase{background:linear-gradient(145deg,#ff80d0,#ff3fa5 51%,#d2208c)!important;}
#screen-map .node.puzzle{background:linear-gradient(145deg,#ffe66f,#ffb433 48%,#f37725)!important;}
#screen-map .node.mahjong{background:linear-gradient(145deg,#5cf7ee,#19d5e7 48%,#347ee5)!important;}
#screen-map .node.pantherstrike{background:linear-gradient(145deg,#4ff7ff,#16cceb 48%,#406ee4)!important;}
#screen-map .node.locked{border-color:rgba(157,185,255,.26);background:linear-gradient(145deg,#263b78,#152451)!important;color:#dce9ff;filter:grayscale(.25) drop-shadow(0 8px 8px rgba(0,0,0,.35));}
#screen-map .node-label{
  top:85px;
  max-width:120px;
  padding:5px 8px;
  border:1px solid rgba(157,209,255,.23);
  border-radius:999px;
  background:rgba(8,18,55,.77);
  color:#edf6ff;
  font-size:10.5px;
  line-height:1;
  text-align:center;
  box-shadow:0 7px 13px -11px #000,inset 0 1px rgba(255,255,255,.10);
}
#screen-map .node-item:has(.node.current) .node-label{border-color:rgba(113,244,255,.66);background:linear-gradient(90deg,rgba(31,174,220,.80),rgba(91,83,220,.82));color:#fff;box-shadow:0 0 15px rgba(51,224,255,.37);}
#screen-map .node-item:has(.node.locked) .node-label{color:#aec2e8;background:rgba(17,27,70,.64);}
#screen-map .tabbar{border-top-color:rgba(108,207,255,.27);background:linear-gradient(100deg,rgba(8,24,63,.96),rgba(41,16,78,.96));}
#screen-map .tab.active{color:#fff498;text-shadow:0 0 12px rgba(255,226,92,.55);}
@media (prefers-reduced-motion:reduce){#screen-map .node:hover:not(.locked),#screen-map .node:focus-visible:not(.locked){transform:none;}}

/* Phone layout: every game choice stays visible without scrolling the map. */
@media (max-width:600px){
  .phone{
    width:100%;
    height:100dvh;
    min-height:100dvh;
    border-radius:0;
  }
  .screen,#screen-runner.active{min-height:0;}
  #screen-map .path-wrap{margin:0 9px 7px;padding:12px 14px 14px;overflow:visible;}
  #screen-map .path-wrap::before{display:none;}
  #screen-map .node-col{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(4,minmax(0,1fr));
    gap:13px 18px;
    width:100%;
    height:100%;
    padding-top:0;
    align-items:center;
  }
  #screen-map .node-item,#screen-map .node-item.n-left,#screen-map .node-item.n-right{
    min-width:0;
    min-height:0;
    height:100%;
    margin:0;
    align-self:auto;
  }
  #screen-map .node{width:56px;height:56px;font-size:21px;border-width:1.5px;}
  #screen-map .node::before{inset:5px 10px auto;height:8px;}
  #screen-map .node-label{top:61px;max-width:132px;padding:4px 7px;font-size:9.5px;}
  #screen-map .node-item .node-label{cursor:pointer;touch-action:manipulation;}
  #screen-runner .runner-quick-exit{
    position:absolute;
    top:12px;
    left:12px;
    z-index:10;
    min-height:38px;
    padding:8px 12px;
    border:1px solid rgba(123,240,255,.72);
    border-radius:999px;
    background:rgba(8,22,58,.94);
    color:#efffff;
    font-weight:800;
    font-size:12px;
    box-shadow:0 5px 16px rgba(0,0,0,.38);
    touch-action:manipulation;
  }
  #screen-map .map-header{margin-top:5px;padding:9px 12px 8px!important;}
  #screen-map .map-header h2{font-size:18px;}
  #screen-map .map-header p{font-size:11px;}
  #screen-map .cat-strip{gap:5px;padding:7px 11px 5px;}
  #screen-map .cat-pill{padding:5px 4px;font-size:9px;}
  #screen-map .game-dock{overflow:hidden;gap:0;padding:0 2px;}
  #screen-map .game-dock .game-dock-tab{flex:1 1 0;min-width:0;padding:7px 1px 8px;font-size:7px;}
  #screen-map .game-dock .game-dock-tab .ic{font-size:15px;line-height:16px;}
}

/* Play Store-style welcome: one clear hero, richer color, and a confident first action. */
#screen-welcome.welcome{position:relative;isolation:isolate;padding:24px 22px 18px;gap:0;overflow:hidden;background:radial-gradient(circle at 14% 13%,rgba(0,232,255,.23),transparent 28%),radial-gradient(circle at 88% 78%,rgba(255,47,168,.24),transparent 32%),linear-gradient(155deg,#081a4e 0%,#17115b 48%,#300d62 100%)}
#screen-welcome.welcome::before{content:'LEARN  ·  PLAY  ·  OUTSMART';position:absolute;top:25px;left:50%;transform:translateX(-50%);z-index:-1;color:#b5fbff;font-size:9px;font-weight:1000;letter-spacing:.2em;white-space:nowrap;opacity:.82}
#screen-welcome .mascot-ring{width:202px;height:202px;margin:25px auto 16px;border-color:rgba(105,249,255,.78);background:radial-gradient(circle at 45% 34%,rgba(255,255,255,.35),rgba(35,236,255,.20) 38%,rgba(255,46,196,.23) 68%,transparent 71%);box-shadow:0 0 0 9px rgba(51,223,255,.08),0 0 42px rgba(17,222,255,.31),inset 0 0 26px rgba(255,255,255,.17)}
#screen-welcome .mascot-ring img{width:188px;height:188px;border:3px solid rgba(255,255,255,.62);box-shadow:0 9px 26px #05072788}
#screen-welcome h1{font-size:39px;line-height:.95;margin:0 0 9px;background:linear-gradient(100deg,#fff8a8,#ff7fd1 49%,#7dfaff);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 8px #08022a99)}
#screen-welcome .sub{max-width:280px;margin:0 auto 18px;color:#e8fbff;font-size:15px;line-height:1.35}
#screen-welcome .chip-row{max-width:330px;gap:7px;margin:0 auto 21px}
#screen-welcome .chip{padding:7px 9px;background:rgba(8,15,58,.52);backdrop-filter:blur(7px);font-size:10.5px;box-shadow:inset 0 1px rgba(255,255,255,.18),0 6px 12px #0003}
#screen-welcome .cta{max-width:315px;padding:16px 18px;border:2px solid rgba(255,255,255,.76);border-radius:18px;background:linear-gradient(100deg,#38eaff,#5a80ff 45%,#ff4fac);color:#fff;letter-spacing:.02em;box-shadow:0 11px 28px rgba(23,198,255,.37),inset 0 1px rgba(255,255,255,.45)}
#screen-welcome #btn-fullscreen{display:none}
#screen-welcome .fine{margin-top:14px;color:#c2d9ff;font-size:10px;letter-spacing:.04em}

/* A full game dock: compact, thumb-friendly and horizontally swipable on phones. */
.game-dock{display:flex!important;flex:0 0 auto!important;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 5px;gap:1px;-webkit-overflow-scrolling:touch}
.game-dock::-webkit-scrollbar{display:none}
.game-dock .game-dock-tab{flex:0 0 57px;min-width:57px;padding:9px 2px 10px;font-size:8px;white-space:nowrap}
.game-dock .game-dock-tab .ic{font-size:18px;line-height:18px}

/* Expert Hunter is a visible aspiration, not another game bubble. */
#screen-map .expert-hunter-btn{display:flex;align-items:center;gap:9px;border:1px solid rgba(255,235,109,.88);border-radius:16px;padding:8px 12px;background:linear-gradient(105deg,#4d247e,#a22d94 52%,#e58a25);color:#fff8b0;box-shadow:0 5px 16px rgba(255,181,44,.28),inset 0 1px rgba(255,255,255,.32);font-family:inherit;text-align:left}
#screen-map .expert-hunter-btn .expert-cup{font-size:27px;line-height:1;filter:drop-shadow(0 2px 4px #3e195e)}
#screen-map .expert-hunter-btn b{display:block;font-size:15px;line-height:1;color:#fff6a3}
#screen-map .expert-hunter-btn small{display:block;margin-top:2px;color:#fff;font-size:9px;font-weight:800;letter-spacing:.03em}
#screen-map .expert-hunter-btn:active{transform:scale(.97)}

/* Golden Panther Hunter: an in-game prestige prize with no cash cost. */
.golden-hunter-banner{display:flex;align-items:center;gap:11px;margin:14px 14px 9px;padding:11px 14px;border:1px solid #ffe66f;border-radius:18px;background:linear-gradient(105deg,#7d4414,#da8f21 45%,#6a237e);color:#fff8ba;box-shadow:0 8px 22px rgba(255,178,31,.28),inset 0 1px rgba(255,255,255,.36)}
.golden-cup{font-size:34px;filter:drop-shadow(0 3px 4px #512103)}
.golden-hunter-banner b{display:block;font-size:16px;letter-spacing:.02em}.golden-hunter-banner small{display:block;margin-top:2px;color:#fff;font-size:10px;font-weight:700}
#screen-lb .lb-row.golden-winner{border:1px solid #ffe66f;background:linear-gradient(100deg,rgba(255,194,45,.27),rgba(255,73,175,.15));box-shadow:0 0 17px rgba(255,215,91,.22)}
.golden-tag{display:inline-block;margin-left:5px;padding:2px 5px;border-radius:99px;background:#ffe469;color:#5b2614;font-size:7px;font-style:normal;font-weight:1000;vertical-align:middle}

/* Scam Hunter Mahjong: jewel-box board and clearer playable tiles. */
#sh-mahjong-root{
  --gold:#ffe27a; --ink:#f5f4ff; --ink-dim:#b9c6ea;
  background:
    radial-gradient(circle at 12% 10%,rgba(37,240,255,.20),transparent 25%),
    radial-gradient(circle at 88% 12%,rgba(255,78,187,.18),transparent 25%),
    radial-gradient(circle at 50% 92%,rgba(123,88,255,.20),transparent 32%),
    linear-gradient(160deg,#11193e,#170f36 52%,#07172e) !important;
}
#sh-mahjong-root #header h1{font-size:30px;color:#fff0a3;text-shadow:0 0 7px rgba(255,226,122,.75),0 0 25px rgba(86,234,255,.26);}
#sh-mahjong-root #header::after{content:'MATCH • PROTECT • LEVEL UP';display:block;margin-top:4px;color:#81f1ff;font:700 9px 'JetBrains Mono',monospace;letter-spacing:.14em;}
#sh-mahjong-root #hud{gap:10px;margin-bottom:10px;}

/* Desktop web presentation: keep the phone layout on small screens, but use the
   available browser width on the website so the game is not trapped in a
   narrow mobile strip. The mobile rules above remain unchanged. */
@media (min-width:601px){
  body{min-width:0;}
  body{padding:0;}
  .phone{
    width:100vw;
    max-width:none;
    min-height:100vh;
    height:100vh;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:
      linear-gradient(180deg,rgba(2,8,35,.28),rgba(2,7,30,.46)),
      url("weee.png") center/cover no-repeat;
  }
  #screen-map{
    background:
      linear-gradient(180deg,rgba(3,8,35,.30),rgba(3,7,30,.42)),
      url("weee.png") center/cover no-repeat;
  }
  .screen{min-height:0;}
  #screen-map .path-wrap{
    flex:1 1 auto;
    min-height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #screen-map .path-wrap::before{display:none;}
  #screen-map .node-col{
    width:min(900px,100%);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:minmax(122px,1fr);
    gap:22px 42px;
    align-items:center;
    padding:18px 30px 28px;
  }
  #screen-map .node-item,
  #screen-map .node-item.n-left,
  #screen-map .node-item.n-right{
    min-width:0;
    min-height:122px;
    width:100%;
    margin:0;
    align-self:center;
    justify-self:center;
  }
  #screen-map .node{width:82px;height:82px;font-size:29px;border:1px solid rgba(117,239,255,.28)!important;filter:drop-shadow(0 7px 8px rgba(0,0,0,.42));}
  #screen-map .node-label{top:89px;font-size:12px;}
  #screen-map .node.ninja .ninja-map-panther{width:74%;height:74%;}
  #screen-map .game-dock{overflow-x:visible;justify-content:space-evenly;gap:4px;padding:0 10px;}
  #screen-map .game-dock .game-dock-tab{flex:1 1 0;min-width:0;font-size:10px;}
}
#sh-mahjong-root #hud span{padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(166,201,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.08);}
#sh-mahjong-root #controls{gap:7px;flex-wrap:wrap;justify-content:center;}
#sh-mahjong-root button{border:1px solid rgba(159,216,255,.36);border-radius:12px;background:linear-gradient(135deg,#285eaa,#6741b1 60%,#a343bb);box-shadow:0 8px 15px -10px rgba(40,179,255,.8);transition:transform .16s ease,filter .16s ease;}
#sh-mahjong-root button:hover{transform:translateY(-2px);filter:brightness(1.16);}
#sh-mahjong-root #board-wrap{border:2px solid rgba(130,224,255,.28);border-radius:20px;background:radial-gradient(circle at 50% 0%,rgba(108,82,238,.32),transparent 48%),rgba(5,11,36,.68);box-shadow:inset 0 0 48px rgba(30,238,255,.11),0 18px 38px -24px rgba(0,0,0,.95),0 0 30px rgba(139,90,246,.22);}
#sh-mahjong-root .tile:not(.covered){filter:drop-shadow(0 5px 7px rgba(0,0,0,.43));}
#sh-mahjong-root .tile:not(.covered)::before{background:linear-gradient(155deg,#6f80c0 0%,#374879 40%,#101632 100%);}
#sh-mahjong-root .tile:not(.covered):hover{transform:translateY(-4px) scale(1.045);filter:drop-shadow(0 0 9px rgba(91,239,255,.66)) drop-shadow(0 7px 7px rgba(0,0,0,.55));}
#sh-mahjong-root .tile:not(.covered) img{outline-color:rgba(154,240,255,.63);box-shadow:inset 0 3px 4px rgba(255,255,255,.55),inset 0 -5px 7px rgba(0,0,0,.35),0 0 0 1px rgba(115,88,255,.28),0 5px 9px rgba(0,0,0,.56);}
#sh-mahjong-root .tile.covered{filter:brightness(.34) saturate(.4) !important;}
#sh-mahjong-root .tile.selected{transform:translateY(-8px) scale(1.09);filter:drop-shadow(0 0 8px #fff4a0) drop-shadow(0 0 20px rgba(255,108,194,.84)) !important;}
#sh-mahjong-root .level-select-intro{padding:9px 13px;border-radius:14px;background:rgba(17,29,68,.56);border:1px solid rgba(129,222,255,.19);color:#dbe8ff;}
#sh-mahjong-root #level-grid{gap:11px;}
#sh-mahjong-root .level-card{position:relative;overflow:hidden;border-color:rgba(133,221,255,.35);background:linear-gradient(145deg,rgba(49,73,142,.58),rgba(94,38,125,.38));box-shadow:0 12px 22px -19px rgba(50,221,255,.9);transition:transform .18s ease,filter .18s ease;}
#sh-mahjong-root .level-card::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.12) 48%,transparent 66%);transform:translateX(-120%);transition:transform .55s ease;}
#sh-mahjong-root .level-card:hover{transform:translateY(-4px) scale(1.025);}
#sh-mahjong-root .level-card:hover::before{transform:translateX(120%);}
#sh-mahjong-root .level-card .level-num{color:#fff08a;text-shadow:0 0 14px rgba(255,225,102,.65);}
#sh-mahjong-root .level-card.locked{background:rgba(255,255,255,.035);}
#sh-mahjong-root #win-overlay,#sh-mahjong-root #stuck-overlay{background:radial-gradient(circle at 50% 32%,rgba(111,76,220,.56),rgba(5,8,23,.94) 62%);}
#sh-mahjong-root #win-overlay h2,#sh-mahjong-root #stuck-overlay h2{text-shadow:0 0 20px rgba(255,220,100,.63);}
#sh-mahjong-root #win-overlay>button{background:linear-gradient(105deg,#35e9df,#5c8cff 52%,#f65fbb);border:0;box-shadow:0 12px 25px -12px rgba(92,140,255,.92);}
@media (prefers-reduced-motion:reduce){#sh-mahjong-root button,#sh-mahjong-root .level-card{transition:none}}

/* Web preview only: present the game as a full-page experience, not as a phone. */
html,body{padding:0!important;margin:0!important;}
.phone{
  width:100vw!important;
  max-width:none!important;
  min-height:100vh!important;
  height:100vh!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Web preview fixes: keep controls visible and give the games room on desktop. */
#screen-runner .runner-quick-exit{
  position:absolute!important; top:16px!important; left:16px!important; z-index:9999!important;
  display:block!important; min-height:38px; padding:9px 15px!important;
  border:1px solid rgba(123,240,255,.85)!important; border-radius:999px!important;
  background:rgba(8,22,58,.96)!important; color:#efffff!important;
  font-weight:800; font-size:13px; box-shadow:0 5px 18px rgba(0,0,0,.45);
}
#screen-runner .runner-player{
  z-index:20!important; width:clamp(84px,10vw,132px)!important;
  height:clamp(84px,10vw,132px)!important; object-fit:contain!important;
  opacity:1!important; visibility:visible!important; mix-blend-mode:normal!important;
}
#screen-ninja .ninja-panther{
  z-index:20!important; opacity:1!important; visibility:visible!important;
  mix-blend-mode:normal!important;
}
#screen-ninja .ninja-half{display:none!important;}
#screen-ninja .ninja-stage{min-height:clamp(520px,70vh,820px)!important;}
#screen-ninja .ninja-stage{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#screen-ninja .ninja-head,
#screen-ninja .ninja-help{
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
}
#screen-ninja .ninja-panther{
  bottom:30px!important;
  left:50%!important;
  width:132px!important;
  height:190px!important;
}
#screen-ninja .ninja-item{
  margin-top:-420px!important;
}
#screen-ninja .ninja-menu{z-index:30!important;}
#screen-ninja .ninja-logo{font-size:0!important;}
#screen-ninja .ninja-logo span{font-size:24px!important;}
#screen-pantherstrike,.ps-screen,.ps-embedded{
  width:100%!important; max-width:none!important; min-height:100vh!important;
  border-radius:0!important;
}
#app.ps-open{
  width:100vw!important; max-width:none!important; height:100vh!important;
  left:0!important; transform:none!important; border-radius:0!important;
}
#app.ps-open #psExitHost{left:auto!important;right:16px!important;top:auto!important;bottom:64px!important;}
#app.ps-open #arena{background-size:cover!important;background-repeat:no-repeat!important;background-position:center center!important;}
#app.ps-open #panther{width:68px!important;height:58px!important;object-fit:contain!important;image-rendering:auto!important;}
#app.ps-open #arena.hide-launcher #launcher{display:block!important;}