:root{
  --red-950:#410000;
  --red-900:#5c0000;
  --red-800:#7a0000;
  --red-700:#9a0000;
  --red-600:#b30000;
  --gold-500:#f7d46b;
  --gold-400:#ffe29a;
  --ink:#1a0b0b;
  --paper:#fff7ea;
  --card:#fff3df;
  --ok:#2e7d32;
  --bad:#c62828;
  --shadow: 0 14px 40px rgba(0,0,0,.26);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  color:var(--paper);
  background:
    radial-gradient(800px 500px at 15% 10%, rgba(255,226,154,.22), transparent 60%),
    radial-gradient(700px 520px at 80% 25%, rgba(247,212,107,.18), transparent 58%),
    radial-gradient(900px 700px at 50% 90%, rgba(255,0,0,.12), transparent 60%),
    linear-gradient(145deg, var(--red-950), var(--red-700) 55%, var(--red-900));
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,226,154,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 60%, rgba(247,212,107,.06) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(255,226,154,.06) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 75%, rgba(247,212,107,.05) 0 2px, transparent 3px);
  background-size: 220px 220px;
  filter: blur(.2px);
  animation: drift 14s linear infinite;
  opacity:.9;
}

@keyframes drift{
  0%{transform: translate3d(0,0,0) rotate(0deg)}
  100%{transform: translate3d(-6%, 8%, 0) rotate(2deg)}
}

.app{
  min-height:100%;
  padding:16px 14px 26px;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:1080px;
  margin:0 auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:5;
  padding:10px 10px 8px;
  border-radius:22px;
  background: rgba(65,0,0,.55);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  border: 1px solid rgba(255,226,154,.22);
}

.titleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brand h1{
  margin:0;
  font-size:18px;
  letter-spacing:.5px;
}

.brand .sub{
  font-size:12px;
  opacity:.85;
}

.controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
  color:var(--ink);
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  transition: transform .12s ease, filter .12s ease;
  user-select:none;
}
.btn:active{transform: translateY(1px) scale(.99)}
.btn.secondary{
  background: rgba(255,255,255,.10);
  color: var(--paper);
  border: 1px solid rgba(255,226,154,.30);
  box-shadow:none;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,226,154,.26);
  background: rgba(0,0,0,.12);
}

.toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  white-space:nowrap;
}
.toggle input{accent-color: var(--gold-500)}
.range{width:120px}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width:640px){
  .grid{grid-template-columns: repeat(2, 1fr);}
}
@media (min-width:980px){
  .grid{grid-template-columns: repeat(3, 1fr);}
}

.card{
  position:relative;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,247,234,.98), rgba(255,243,223,.94));
  color: var(--ink);
  padding:14px 14px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(247,212,107,.55);
  transform-style:preserve-3d;
  transition: transform .18s ease, filter .18s ease;
}
.card:hover{filter: brightness(1.02)}
.card:active{transform: translateY(2px)}
.cardHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.cardTitle{
  font-size:16px;
  font-weight:900;
  line-height:1.25;
}
.cardMeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}
.badge.ok{background: rgba(46,125,50,.12); border-color: rgba(46,125,50,.28); color: var(--ok);}
.badge.bad{background: rgba(198,40,40,.10); border-color: rgba(198,40,40,.28); color: var(--bad);}
.badge.dim{opacity:.7}

.sectionTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 8px 4px 0;
  gap:10px;
}
.sectionTitle h2{
  margin:0;
  font-size:15px;
  letter-spacing:.5px;
}
.sectionTitle .hint{font-size:12px; opacity:.85}

.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding-top:10px;
}
.tab{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,226,154,.30);
  background: rgba(0,0,0,.12);
  color: var(--paper);
  font-weight:800;
  cursor:pointer;
  user-select:none;
}
.tab.active{
  background: linear-gradient(180deg, rgba(255,226,154,.95), rgba(247,212,107,.92));
  color: var(--ink);
  border-color: rgba(247,212,107,.90);
}

.modalMask{
  position:fixed;
  inset:0;
  background: radial-gradient(900px 650px at 30% 10%, rgba(255,226,154,.14), transparent 55%), rgba(0,0,0,.62);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px 14px;
  z-index:20;
}
.modalMask.open{display:flex}
.modal{
  width:min(820px, 100%);
  max-height: min(88vh, 760px);
  overflow:auto;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,247,234,.98), rgba(255,243,223,.96));
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
  border: 1px solid rgba(247,212,107,.70);
  transform-origin: 50% 60%;
  animation: popIn .22s ease both;
}
@keyframes popIn{
  from{transform: translateY(14px) scale(.955) rotateX(10deg) rotateY(-7deg); opacity:0}
  to{transform: translateY(0) scale(1) rotateX(0deg) rotateY(0deg); opacity:1}
}
.modalHeader{
  position:sticky;
  top:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  background: rgba(255,243,223,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.modalHeader .mhTitle{
  font-size:16px;
  font-weight:1000;
}
.iconBtn{
  appearance:none;
  border:0;
  background: rgba(0,0,0,.06);
  color: var(--ink);
  width:40px;
  height:40px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:1000;
}
.modalBody{padding:12px 12px 14px}
.prompt{
  font-size:18px;
  font-weight:900;
  line-height:1.35;
  margin: 6px 0 12px;
}
.options{display:flex; flex-direction:column; gap:10px}
.opt{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 14px;
  padding:12px 12px;
  background: rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.08);
  cursor:pointer;
  user-select:none;
}
.opt input{accent-color: var(--red-600)}
.answerRow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}
.input{
  flex: 1 1 220px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.14);
  padding:12px 12px;
  font-size:16px;
  background: rgba(255,255,255,.75);
}
.result{
  margin-top:12px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  font-weight:800;
}
.result.ok{border-color: rgba(46,125,50,.30); background: rgba(46,125,50,.10); color: var(--ok);}
.result.bad{border-color: rgba(198,40,40,.28); background: rgba(198,40,40,.08); color: var(--bad);}

.sparkLayer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:30;
}

.portalLayer{
  position:fixed;
  inset:0;
  z-index:40;
  pointer-events:none;
  opacity:0;
  transform: translateZ(0);
}
.portalLayer.show{opacity:1}
.portalBg{
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(900px 700px at 50% 35%, rgba(255,226,154,.20), transparent 58%),
    conic-gradient(from 0deg at 50% 50%, rgba(255,226,154,.0), rgba(247,212,107,.38), rgba(255,226,154,.08), rgba(179,0,0,.25), rgba(255,226,154,.0));
  filter: blur(0px) saturate(1.1);
  opacity:.0;
  transform: scale(1.06);
}
.portalStars{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,226,154,.0) 0 10px, rgba(255,226,154,.12) 10px 11px, rgba(255,226,154,.0) 11px 22px),
    repeating-linear-gradient(0deg, rgba(255,226,154,.0) 0 12px, rgba(247,212,107,.10) 12px 13px, rgba(255,226,154,.0) 13px 24px);
  mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,1) 0 48%, rgba(0,0,0,0) 70%);
  opacity:0;
  transform: perspective(700px) rotateX(56deg) scale(1.35);
  filter: blur(.4px);
}
.portalGlow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(360px 260px at 50% 46%, rgba(255,226,154,.55), transparent 60%),
    radial-gradient(520px 420px at 50% 46%, rgba(247,212,107,.22), transparent 68%),
    radial-gradient(980px 800px at 50% 50%, rgba(179,0,0,.26), transparent 65%);
  opacity:0;
  filter: blur(0px);
}

.portalDoor{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  background:
    linear-gradient(180deg, rgba(255,226,154,.12), rgba(0,0,0,.08)),
    linear-gradient(145deg, rgba(179,0,0,.98), rgba(92,0,0,.98));
  border: 2px solid rgba(255,226,154,.55);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  filter: saturate(1.12);
}
.portalDoor::before{
  content:"";
  position:absolute;
  inset:18px 14px;
  border-radius: 18px;
  border: 2px solid rgba(255,226,154,.32);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.12);
}
.portalDoor::after{
  content:"福";
  position:absolute;
  left:50%;
  top:42%;
  transform: translate(-50%,-50%) rotate(-8deg);
  width:110px;
  height:110px;
  border-radius: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px;
  font-weight:1000;
  color: rgba(65,0,0,.92);
  background: linear-gradient(180deg, rgba(255,226,154,.92), rgba(247,212,107,.86));
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  border: 1px solid rgba(255,226,154,.85);
  opacity:.92;
}
.portalDoor.left{left:0; transform-origin: 0% 50%;}
.portalDoor.right{right:0; transform-origin: 100% 50%;}

.portalLayer.playIn .portalBg{animation: portalBgIn 1.45s ease both}
.portalLayer.playIn .portalGlow{animation: portalGlowIn 1.45s ease both}
.portalLayer.playIn .portalStars{animation: portalStarsIn 1.45s ease both}
.portalLayer.playIn .portalDoor.left{animation: doorOpenL 1.45s cubic-bezier(.2,.9,.2,1) both}
.portalLayer.playIn .portalDoor.right{animation: doorOpenR 1.45s cubic-bezier(.2,.9,.2,1) both}

.portalLayer.playOut .portalBg{animation: portalBgOut 1.25s ease both}
.portalLayer.playOut .portalGlow{animation: portalGlowOut 1.25s ease both}
.portalLayer.playOut .portalStars{animation: portalStarsOut 1.25s ease both}
.portalLayer.playOut .portalDoor.left{animation: doorCloseL 1.25s cubic-bezier(.2,.9,.2,1) both}
.portalLayer.playOut .portalDoor.right{animation: doorCloseR 1.25s cubic-bezier(.2,.9,.2,1) both}

@keyframes portalBgIn{
  0%{opacity:0; transform: scale(1.14) rotate(0deg); filter: blur(8px) saturate(1.2)}
  55%{opacity:.85; transform: scale(1.02) rotate(18deg); filter: blur(1px) saturate(1.25)}
  100%{opacity:.0; transform: scale(1.0) rotate(28deg); filter: blur(0px) saturate(1.15)}
}
@keyframes portalGlowIn{
  0%{opacity:0; transform: scale(1.18); filter: blur(18px)}
  45%{opacity:1; transform: scale(1.02); filter: blur(6px)}
  100%{opacity:0; transform: scale(.98); filter: blur(14px)}
}
@keyframes portalStarsIn{
  0%{opacity:0; transform: perspective(700px) rotateX(60deg) scale(1.5) translateY(12%)}
  50%{opacity:.65}
  100%{opacity:0; transform: perspective(700px) rotateX(58deg) scale(1.35) translateY(-6%)}
}
@keyframes doorOpenL{
  0%{transform: translateX(0) rotateY(0deg)}
  55%{transform: translateX(-18%) rotateY(28deg)}
  100%{transform: translateX(-110%) rotateY(40deg)}
}
@keyframes doorOpenR{
  0%{transform: translateX(0) rotateY(0deg)}
  55%{transform: translateX(18%) rotateY(-28deg)}
  100%{transform: translateX(110%) rotateY(-40deg)}
}

@keyframes portalBgOut{
  0%{opacity:0; transform: scale(1.0) rotate(28deg); filter: blur(0px) saturate(1.15)}
  40%{opacity:.9; transform: scale(1.05) rotate(12deg); filter: blur(1px) saturate(1.25)}
  100%{opacity:0; transform: scale(1.22) rotate(0deg); filter: blur(10px) saturate(1.3)}
}
@keyframes portalGlowOut{
  0%{opacity:0; transform: scale(.98); filter: blur(14px)}
  35%{opacity:1; transform: scale(1.05); filter: blur(7px)}
  100%{opacity:0; transform: scale(1.22); filter: blur(20px)}
}
@keyframes portalStarsOut{
  0%{opacity:0; transform: perspective(700px) rotateX(58deg) scale(1.35) translateY(-6%)}
  45%{opacity:.6}
  100%{opacity:0; transform: perspective(700px) rotateX(62deg) scale(1.65) translateY(18%)}
}
@keyframes doorCloseL{
  0%{transform: translateX(-110%) rotateY(40deg)}
  55%{transform: translateX(-18%) rotateY(18deg)}
  100%{transform: translateX(0) rotateY(0deg)}
}
@keyframes doorCloseR{
  0%{transform: translateX(110%) rotateY(-40deg)}
  55%{transform: translateX(18%) rotateY(-18deg)}
  100%{transform: translateX(0) rotateY(0deg)}
}

.lantern{
  position:fixed;
  width:90px;
  height:140px;
  border-radius: 22px 22px 30px 30px;
  background: linear-gradient(180deg, rgba(255,70,70,.92), rgba(160,0,0,.94));
  border: 2px solid rgba(255,226,154,.45);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  top: -24px;
  z-index:1;
  filter: saturate(1.08);
  transform-origin: 50% 0%;
  animation: sway 3.2s ease-in-out infinite;
  opacity:.85;
}
.lantern::before{
  content:"";
  position:absolute;
  left:50%;
  top:-18px;
  width:10px;
  height:22px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,226,154,.95), rgba(247,212,107,.85));
}
.lantern::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-14px;
  width:44px;
  height:16px;
  transform: translateX(-50%);
  border-radius: 10px;
  background: rgba(255,226,154,.75);
}
.lantern.left{left:10px}
.lantern.right{right:10px; animation-delay:-1.2s}
@keyframes sway{
  0%,100%{transform: rotate(-3deg)}
  50%{transform: rotate(3deg)}
}

.fontScale-1{font-size:16px}
.fontScale-2{font-size:18px}
.fontScale-3{font-size:20px}

.muted{opacity:.8}
.nowrap{white-space:nowrap}

.gameBox{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  padding:12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bigTarget{
  height:180px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:52px;
  background: rgba(0,0,0,.04);
  border: 1px dashed rgba(0,0,0,.18);
  user-select:none;
}
.gridSmall{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.tile{
  height:66px;
  border-radius: 16px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  cursor:pointer;
  user-select:none;
}
.tile.revealed{background: rgba(247,212,107,.24); border-color: rgba(247,212,107,.60)}
.tile.matched{background: rgba(46,125,50,.12); border-color: rgba(46,125,50,.32)}

.chooserRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.bucket{
  height:120px;
  border-radius: 18px;
  border: 2px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:1000;
  cursor:pointer;
  user-select:none;
}
.bucket.red{border-color: rgba(179,0,0,.40)}
.bucket.green{border-color: rgba(46,125,50,.35)}