:root{
    --bg:#0b0c16; --panel:#17192b; --panel2:#222541; --text:#f5f1ff; --muted:#aaa4bc;
    --line:rgba(255,255,255,.12); --accent:#c8b9ff; --danger:#ff8f9d; --ok:#b9e9cb;
  }
  *{box-sizing:border-box}
  body{
    margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:radial-gradient(circle at 50% -15%,rgba(114,88,180,.34),transparent 34rem),linear-gradient(180deg,#0d0f1d,var(--bg));
    display:flex;justify-content:center;padding:16px;overflow-x:hidden;
  }
  body[data-theme="hotel"]{background:radial-gradient(circle at 50% -15%,rgba(114,91,61,.27),transparent 34rem),linear-gradient(180deg,#15120f,#090909)}
  body[data-theme="lighthouse"]{background:radial-gradient(circle at 50% -15%,rgba(66,104,118,.3),transparent 34rem),linear-gradient(180deg,#0c1419,#071014)}
  body[data-theme="carnival"]{background:radial-gradient(circle at 50% -15%,rgba(133,67,105,.28),transparent 34rem),linear-gradient(180deg,#16101a,#0b0810)}
  .app{width:min(820px,100%);position:relative}
  header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:5px 0 12px}
  h1{font-size:clamp(31px,7vw,55px);line-height:.9;margin:0;letter-spacing:-2px} h1 span{color:var(--accent)}
  .tag{color:var(--muted);font-size:13px;margin-top:8px}.roomline{font-size:12px;margin-top:4px;color:#d7d1e7}
  .modePill{border:1px solid var(--line);background:rgba(255,255,255,.05);padding:8px 11px;border-radius:999px;color:var(--muted);font-size:12px;white-space:nowrap}
  .panel{position:relative;background:linear-gradient(180deg,rgba(31,34,59,.97),rgba(18,20,37,.97));border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:14px;box-shadow:0 18px 60px rgba(0,0,0,.36);overflow:hidden}
  .panel::after{content:"";pointer-events:none;position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(255,244,202,.055),transparent 35%);opacity:calc(.15 + var(--haunt,0)*.7);transition:opacity .5s}
  .controls{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr auto auto auto;gap:8px;margin-bottom:10px}
  select,button{color:var(--text);background:#292d4d;border:1px solid rgba(255,255,255,.12);border-radius:13px;min-height:44px;padding:0 12px;font:inherit;font-weight:750}
  button{cursor:pointer}button:hover{filter:brightness(1.08)}button:active{transform:translateY(1px)}select{width:100%;min-width:0}
  button.daily.active{background:#554979;box-shadow:inset 0 0 0 1px var(--accent)}
  .metaRow{position:relative;z-index:2;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .chip{flex:1;min-width:110px;text-align:center;background:rgba(255,255,255,.042);border:1px solid rgba(255,255,255,.075);padding:8px;border-radius:13px}
  .chip b{display:block;font-size:16px}.chip small{color:var(--muted)}
  .grade.easy{color:#c9f0d4}.grade.medium{color:#ffe0a3}.grade.hard{color:#ffb4bd}
  .boardWrap{position:relative;z-index:2;padding:9px;border-radius:19px;background:radial-gradient(circle at 50% 18%,#151329,#090b14 68%);border:1px solid rgba(255,255,255,.075)}
  .board{display:grid;margin:auto;width:min(100%,560px);aspect-ratio:1/1;overflow:hidden;border-radius:13px;border:2px solid rgba(0,0,0,.78);user-select:none;touch-action:none;-webkit-user-select:none}
  .cell{position:relative;display:grid;place-items:center;border-right:1px solid rgba(0,0,0,.42);border-bottom:1px solid rgba(0,0,0,.42);font-weight:900;cursor:pointer;transition:filter .12s,transform .07s,background .25s;box-shadow:inset 0 0 18px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.035)}
  .cell:hover{filter:brightness(1.07)}.cell:active{transform:scale(.965)}.cell.bad{animation:shake .25s linear}.cell.hint{animation:pulse 1s ease 2}
  .cell .ghost{font-size:clamp(18px,6.5vw,37px);filter:drop-shadow(0 0 8px rgba(220,210,255,.5))}
  .board.celebrating{overflow:visible}
  .board.celebrating .cell{overflow:visible}
  .board.celebrating .ghost{
    position:relative;z-index:6;display:inline-block;transform-origin:50% 70%;
    animation:
      ghostBoogie .42s ease-in-out 0s 3 alternate,
      ghostFloatAway 1.9s ease-in forwards calc(.92s + var(--ghostDelay,0s));
    will-change:transform,opacity,filter;
  }
  @keyframes ghostBoogie{
    0%{transform:translateY(0) rotate(-8deg) scale(1);filter:drop-shadow(0 0 8px rgba(220,210,255,.55))}
    25%{transform:translateY(-3px) rotate(8deg) scale(1.06)}
    50%{transform:translateY(0) rotate(-5deg) scale(1)}
    75%{transform:translateY(-4px) rotate(5deg) scale(1.08)}
    100%{transform:translateY(0) rotate(-8deg) scale(1)}
  }
  @keyframes ghostFloatAway{
    0%{opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 0 8px rgba(220,210,255,.55))}
    45%{opacity:1;transform:translateY(-18px) scale(1.06);filter:drop-shadow(0 0 12px rgba(220,210,255,.7))}
    100%{opacity:0;transform:translateY(-92px) scale(.82);filter:drop-shadow(0 0 18px rgba(220,210,255,.15))}
  }
  .cell .mark,#markerPreviewIcon .mark{font-size:clamp(14px,5.1vw,31px);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.cell .hand,#markerPreviewIcon .hand{color:#a91523;font-family:"Arial Unicode MS",sans-serif;text-shadow:0 0 4px #420008;font-size:clamp(20px,6.2vw,35px)}
  .markerPreview{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:13px}.markerPreview>div{min-width:0}.markerPreview p{font-size:11px;margin:3px 0 0;color:var(--muted)}#markerPreviewIcon{display:grid;place-items:center;flex:0 0 44px;height:44px;background:#90a398;border:1px solid #0008;border-radius:8px}
  .patternAssist .cell[data-pattern="0"]{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 7px)!important}
  .patternAssist .cell[data-pattern="1"]{background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 7px)!important}
  .patternAssist .cell[data-pattern="2"]{background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px)!important;background-size:8px 8px!important}
  .patternAssist .cell[data-pattern="3"]{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,transparent 2px 8px)!important}
  .patternAssist .cell[data-pattern="4"]{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 8px)!important}
  .patternAssist .cell[data-pattern="5"]{background-image:linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.05) 75%)!important;background-size:10px 10px!important}
  .patternAssist .cell[data-pattern="6"]{background-image:radial-gradient(circle at 25% 25%,rgba(255,255,255,.08) 0 2px,transparent 2px)!important;background-size:11px 11px!important}
  .patternAssist .cell[data-pattern="7"]{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 1px,transparent 1px 5px)!important}
  .actionRow{position:relative;z-index:2;display:flex;justify-content:center;gap:8px;margin-top:10px;flex-wrap:wrap}.actionRow button{min-width:145px}
  .hintButton{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px!important;padding:6px 14px!important}
  .hintCopy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.08}.hintCopy b{font-size:14px}.hintCopy small{margin-top:4px;color:#cfc8df;font-size:11px;font-weight:650}
  .candleViz{--waxPx:30px;position:relative;width:25px;height:42px;display:inline-block;flex:0 0 25px}
  .candleBody{position:absolute;left:4px;right:4px;bottom:0;height:30px;border-radius:5px 5px 3px 3px;background:rgba(255,255,255,.12);overflow:visible;border:1px solid rgba(255,255,255,.18)}
  .candleWax{position:absolute;left:-1px;right:-1px;bottom:-1px;height:var(--waxPx);min-height:0;border-radius:5px 5px 3px 3px;background:linear-gradient(90deg,#e8d7b2,#fff0ca 48%,#d4bc91);border:1px solid rgba(85,62,40,.28);transition:height .45s cubic-bezier(.2,.8,.2,1)}
  .candleWax::after{content:"";position:absolute;top:1px;left:50%;width:4px;height:6px;border-radius:0 0 5px 5px;background:rgba(180,144,93,.55);transform:translateX(-50%)}
  .candleWick{position:absolute;left:50%;bottom:calc(var(--waxPx) + 2px);width:2px;height:6px;background:#3a2b21;transform:translateX(-50%);transition:bottom .45s cubic-bezier(.2,.8,.2,1)}
  .candleFlame{position:absolute;left:50%;bottom:calc(var(--waxPx) + 7px);width:9px;height:13px;border-radius:55% 45% 58% 42%;background:radial-gradient(circle at 50% 72%,#fff6bd 0 22%,#ffc75a 24% 58%,#e36b35 60% 100%);transform:translateX(-50%) rotate(4deg);filter:drop-shadow(0 0 5px rgba(255,188,76,.8));transition:bottom .45s cubic-bezier(.2,.8,.2,1),opacity .2s}
  .hintButton.out .candleFlame,.hintButton.out .candleWick{opacity:0}.hintButton.refillable{box-shadow:inset 0 0 0 1px rgba(255,210,120,.45)}
  .hintButton.refillFlash .candleViz{animation:candleRegrow .7s ease}.candleStatus{position:relative;z-index:2;text-align:center;color:var(--muted);font-size:11px;margin-top:5px;min-height:15px}
  .rules{position:relative;z-index:2;margin-top:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .rule{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.065);border-radius:11px;padding:9px;color:#d7d1e5;font-size:12px}.rule b{color:white}
  .footerNote{position:relative;z-index:2;color:var(--muted);font-size:12px;text-align:center;margin:11px 2px 0}
  .mansion{position:relative;z-index:2;margin-top:12px;border-top:1px solid rgba(255,255,255,.075);padding-top:11px}.mansionHead{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}.mansionHead b{font-size:13px}.mansionHead span{color:var(--muted);font-size:11px}
  .rooms{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.room{padding:7px 3px;text-align:center;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);font-size:10px;color:var(--muted);min-width:0}.room.done{color:var(--text);background:rgba(120,100,174,.24)}.room.today{box-shadow:inset 0 0 0 1px var(--accent);color:var(--text)}.room .door{display:block;font-size:18px;margin-bottom:2px}
  .hauntLayer,.shadowFigure,.scareMark{pointer-events:none;position:fixed;inset:0;z-index:999;opacity:0}.hauntLayer{background:rgba(224,230,255,.11);mix-blend-mode:screen}.shadowFigure{background:linear-gradient(105deg,transparent 25%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.68) 50%,rgba(0,0,0,.5) 55%,transparent 75%);transform:translateX(-110%)}
  .scareMark{display:grid;place-items:center;font-size:min(30vw,180px);filter:grayscale(1);color:rgba(145,0,20,.26);text-shadow:0 0 18px rgba(120,0,10,.3)}
  body.flicker .hauntLayer{animation:flicker .85s steps(1,end)} body.shadow .shadowFigure{animation:shadowPass 1.6s ease-in-out} body.scare .scareMark{animation:scareFade 1.1s ease-out} body.knock .panel{animation:jolt .31s ease-out}
  @keyframes flicker{0%,100%{opacity:0}8%{opacity:.12}12%{opacity:0}18%{opacity:.3}23%{opacity:.02}28%{opacity:.18}33%{opacity:0}57%{opacity:.11}64%{opacity:0}74%{opacity:.24}80%{opacity:0}}
  @keyframes shadowPass{0%{opacity:0;transform:translateX(-110%)}25%{opacity:.5}75%{opacity:.38}100%{opacity:0;transform:translateX(110%)}}
  @keyframes scareFade{0%{opacity:0;transform:scale(.88)}22%{opacity:.55}100%{opacity:0;transform:scale(1.08)}}
  @keyframes jolt{0%,100%{transform:translateX(0)}30%{transform:translateX(-1px)}55%{transform:translateX(2px)}75%{transform:translateX(-1px)}}
  .cell.dragTouched{filter:brightness(1.13)}
  @keyframes dragPop{50%{transform:scale(.93)}}
  .cell.dragTouched{animation:dragPop .12s ease}
  @keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}} @keyframes pulse{50%{box-shadow:inset 0 0 0 4px var(--accent)}}
  dialog{border:1px solid rgba(255,255,255,.12);border-radius:22px;color:var(--text);background:#181b31;max-width:500px;width:calc(100% - 28px);padding:21px;box-shadow:0 24px 80px rgba(0,0,0,.55)} dialog::backdrop{background:rgba(0,0,0,.64);backdrop-filter:blur(4px)} dialog h2{margin:0 0 8px;font-size:27px}dialog p{color:#c9c3da;line-height:1.48} dialog menu{padding:0;margin:17px 0 0;display:flex;gap:8px;flex-wrap:wrap}dialog menu button{flex:1;min-width:125px}.primary{background:#625590}
  .setting{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:center;margin:10px 0}.setting label{font-size:13px;color:#ddd7e9}.setting input[type="checkbox"]{width:22px;height:22px;justify-self:end}.settingsNote{font-size:11px;color:var(--muted);margin-top:8px}.badges{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.badge{padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);font-size:12px}.shareBox{width:100%;min-height:115px;background:#0f1220;color:#e9e4f6;border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:10px;resize:vertical}
  
  .hidden{display:none!important}
  .homeScreen{
    width:min(760px,100%); margin:0 auto 18px; padding:10px 0 4px;
    color:var(--text);
  }
  .homeTop{
    display:flex; justify-content:space-between; align-items:center; gap:12px; margin:4px 0 12px;
  }
  .homeAvatar{
    width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
    font-size:28px;background:linear-gradient(180deg,rgba(72,132,99,.9),rgba(35,67,49,.95));
    border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 22px rgba(0,0,0,.24);
  }
  .homeIconBtn{
    width:48px;height:48px;border-radius:50%;padding:0;font-size:22px;
    background:rgba(255,255,255,.08);
  }
  .homeCards{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 16px;
  }
  .homeMiniGrid{display:grid;grid-template-rows:1fr 1fr;gap:12px}
  .homeCard{
    border:1px solid rgba(255,255,255,.1); border-radius:24px; text-align:left;
    padding:18px; min-height:152px; color:var(--text);
    box-shadow:0 18px 44px rgba(0,0,0,.26); position:relative; overflow:hidden;
  }
  .homeCard::after{
    content:""; position:absolute; inset:auto -12% -36% auto; width:120px; height:120px;
    border-radius:50%; background:rgba(255,255,255,.06); filter:blur(6px);
  }
  .homeCard small{display:block; font-size:14px; color:rgba(255,255,255,.78); margin-bottom:8px; font-weight:700}
  .homeCard b{display:block; font-size:22px; line-height:1.04}
  .homeCard span{display:block; margin-top:10px; color:rgba(255,255,255,.88); font-size:13px}
  .homeDailyCard{
    background:linear-gradient(180deg,rgba(100,116,210,.95),rgba(82,92,186,.92));
    cursor:pointer;
  }
  .homeWeeklyCard{
    background:linear-gradient(180deg,rgba(216,129,33,.92),rgba(161,81,20,.95));
  }
  .homeRefillCard{
    background:linear-gradient(180deg,rgba(133,92,212,.94),rgba(93,63,162,.95));
  }
  .homeDailyDate{font-size:46px!important; letter-spacing:-1px; margin-top:6px}
  .homeCountdown{
    display:inline-flex!important; align-items:center; gap:8px;
    margin-top:14px; background:rgba(40,34,95,.32); padding:9px 14px; border-radius:999px;
    font-weight:800; width:max-content;
  }
  .homePlayChip{
    display:inline-flex!important; align-items:center; justify-content:center;
    margin-top:16px; min-width:132px; padding:12px 18px; border-radius:999px;
    background:rgba(245,247,255,.92); color:#3f498f!important; font-weight:900; font-size:18px!important;
  }
  .homeLogo{
    text-align:center; margin:16px 0 6px; line-height:.9; letter-spacing:-3px; font-weight:950;
    font-size:clamp(48px,14vw,92px);
  }
  .homeLogo .ghostO{
    display:inline-grid; place-items:center; width:.98em; height:.98em;
    border-radius:45% 45% 36% 36%; background:rgba(182,170,255,.94); color:#141726;
    margin:0 .02em; box-shadow:0 0 18px rgba(175,162,255,.18);
  }
  .homeLogo .accent{color:#e48a22}
  .homeSubtitle{
    text-align:center; color:var(--muted); max-width:560px; margin:8px auto 22px; font-size:14px;
  }
  .homeStartBtn{
    width:min(520px,100%); margin:0 auto; display:block;
    min-height:72px; border-radius:999px; font-size:clamp(24px,6vw,38px);
    background:linear-gradient(180deg,#ee9322,#d97b17); color:white; font-weight:950;
    box-shadow:0 14px 36px rgba(217,123,23,.28);
  }
  .homeQuickRow{
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;
  }
  .homeQuickBtn{
    min-height:54px; border-radius:18px; font-size:16px;
    background:rgba(255,255,255,.07);
  }
  .homeAvatar{
    animation:avatarBob 3.8s ease-in-out infinite;
  }
  .homeHero{
    position:relative;
    padding:10px 0 2px;
  }
  .homeFloatGhost{
    position:absolute;
    right:10%;
    top:-4px;
    font-size:clamp(36px,8vw,62px);
    line-height:1;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.24)) drop-shadow(0 0 18px rgba(196,185,255,.22));
    animation:ghostHover 8s ease-in-out infinite;
    pointer-events:none;
    z-index:2;
  }
  .homeFloatGhost::after{
    content:"";
    position:absolute;
    inset:auto 20% -10px 20%;
    height:10px;
    border-radius:50%;
    background:rgba(0,0,0,.18);
    filter:blur(6px);
    z-index:-1;
    animation:ghostShadow 8s ease-in-out infinite;
  }
  @keyframes avatarBob{
    0%,100%{transform:translateY(0) rotate(0deg)}
    50%{transform:translateY(-5px) rotate(-3deg)}
  }
  @keyframes ghostHover{
    0%{transform:translate(0,0) rotate(-5deg)}
    20%{transform:translate(-10px,-8px) rotate(2deg)}
    45%{transform:translate(12px,-20px) rotate(-2deg)}
    70%{transform:translate(-6px,-10px) rotate(4deg)}
    100%{transform:translate(0,0) rotate(-5deg)}
  }
  @keyframes ghostShadow{
    0%,100%{transform:scale(1); opacity:.24}
    45%{transform:scale(.72); opacity:.12}
    70%{transform:scale(.84); opacity:.16}
  }


  .progressHub{
    margin-top:16px;padding:15px;border-radius:22px;
    background:linear-gradient(180deg,rgba(26,29,52,.94),rgba(17,19,35,.96));
    border:1px solid rgba(255,255,255,.09);
  }
  .rankStrip{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .rankStrip small,.progressLabel{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
  .rankName{font-size:20px;font-weight:950;margin-top:2px}
  .caseCount{color:#d8d2e8;font-size:12px}
  .restoreHead{display:flex;justify-content:space-between;gap:12px;margin-top:13px;font-size:12px}
  .restoreMeter{height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:6px;border:1px solid rgba(255,255,255,.06)}
  .restoreFill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#5da34d,#d77c1f,#7951bd);transition:width .45s ease}
  .deskGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
  .deskBtn{min-height:62px;padding:8px 7px;border-radius:15px;background:rgba(255,255,255,.055);font-size:12px;line-height:1.15}
  .deskBtn b{display:block;font-size:18px;margin-bottom:3px}
  .deskBtn span{display:block;color:var(--muted);font-size:10px;margin-top:3px}
  .progressList{display:grid;gap:8px;margin:10px 0}
  .progressItem{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075);border-radius:13px;padding:10px}
  .progressItemHead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
  .progressItem b{font-size:14px}.progressItem small{color:var(--muted)}
  .miniMeter{height:7px;border-radius:999px;background:rgba(255,255,255,.075);overflow:hidden;margin-top:7px}
  .miniMeter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#5da34d,#d77c1f,#7951bd)}
  .collectionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
  .spiritCard,.relicCard{border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.04);border-radius:14px;padding:10px}
  .spiritCard.locked,.relicCard.locked{opacity:.42;filter:grayscale(1)}
  .spiritIcon,.relicIcon{font-size:27px;display:block;margin-bottom:5px}
  .rarity{font-size:10px!important;text-transform:uppercase;letter-spacing:.08em;font-weight:900}
  .rarity.common{color:#b8d9c0}.rarity.rare{color:#c5b4ff}.rarity.legendary{color:#ffbd65}
  .caseMeta{color:var(--muted);font-size:11px;margin-top:4px;line-height:1.4}
  .rewardBox{margin:12px 0;padding:11px;border-radius:13px;background:rgba(117,91,178,.13);border:1px solid rgba(183,163,255,.16)}
  .rewardLine{margin:4px 0;font-size:13px;color:#e2dced}
  .jerryIntroDialog{width:min(94vw,800px);max-width:800px;max-height:92dvh;overflow:auto;padding:0;background:radial-gradient(ellipse at 20% 40%,#294b3a66,transparent 65%),#10171e;border-color:#8de5ac55}
  .jerryIntroDialog::backdrop{background:#03080de0;backdrop-filter:blur(6px)}
  .jerryIntroLayout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:center}
  .jerryIntroArt{align-self:stretch;display:flex;align-items:flex-end;background:radial-gradient(ellipse at 55% 60%,#82e7a51c,transparent 70%);overflow:hidden}
  .jerryIntroArt img{display:block;width:100%;height:auto;max-height:76dvh;object-fit:contain;filter:drop-shadow(0 0 18px #74efab23)}
  .jerryIntroCopy{padding:30px 28px 30px 8px}
  .jerryEyebrow{display:block;color:#9be9b5;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:800;margin-bottom:12px}
  .jerryIntroCopy h2{font:700 clamp(30px,5vw,43px)/1.05 Georgia,serif;color:#dbffe8;text-shadow:0 0 22px #7bf3a847;margin-bottom:18px}
  .jerryIntroCopy .jerryIntroLead{color:#e9dddb;font-size:18px;line-height:1.4}
  .jerryIntroCopy p,.jerryIntroCopy li{font-size:14px;line-height:1.65;color:#c2cfc9}
  .jerryIntroCopy ul{padding-left:20px;margin:16px 0 22px}.jerryIntroCopy li+li{margin-top:9px}.jerryIntroCopy strong{color:#d8ffe6}
  .jerryIntroCopy .primary{background:linear-gradient(#b5e9c6,#79b892);color:#12261a;border-color:#c4fbd777;min-height:46px;font-weight:800;box-shadow:0 0 22px #79e59e20}
  .jerryNotice{margin:0 0 12px;padding:10px 13px;border:1px solid #b6e4bf38;border-radius:12px;background:linear-gradient(100deg,#23382c99,#20253480);color:#cce4d4;font-size:12px;line-height:1.5}
  .jerryNotice.jerryCaught{border-color:#da969073;background:#42232c80;color:#ffe4dc}
  .jerryCellFace{position:absolute;inset:13%;border-radius:50%;background:#121c18 url('assets/jerry.webp') 70% 3%/330% auto no-repeat;border:2px solid #cdfdd9;box-shadow:0 0 12px #b2fabb90;pointer-events:none;z-index:2}
  .jerryRevealed .mark,.jerryRevealed .hand{visibility:hidden}.jerryWithGhost .jerryCellFace{inset:3% 3% auto auto;width:34%;height:34%}
  @media(max-width:560px){.jerryIntroLayout{grid-template-columns:minmax(0,1fr)}.jerryIntroArt{justify-content:center;max-height:32dvh;background:#172b2280}.jerryIntroArt img{width:auto;height:32dvh;max-width:100%;object-fit:contain}.jerryIntroCopy{padding:20px 23px 23px}.jerryIntroCopy h2{font-size:32px;margin-bottom:12px}.jerryIntroCopy .jerryIntroLead{font-size:16px}.jerryIntroCopy ul{margin:12px 0 17px}}
  .manorClearCard{margin:16px 0;padding:19px 20px 23px;border:1px solid #a7f3c348;border-radius:18px;background:radial-gradient(ellipse at 85% 0,#73e6a31c,transparent 70%),linear-gradient(145deg,#172d2a,#101b25);box-shadow:inset 0 1px 0 #d9ffe812,0 0 28px #70edaa0d}
  .manorClearHeading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
  .manorClearTitle{font-family:Georgia,serif;font-size:clamp(22px,5vw,29px);font-weight:700;line-height:1.15;color:#d6ffe7;text-shadow:0 0 18px #8ff5b65c}
  .manorClearPercent{font-size:clamp(34px,8vw,44px);line-height:1;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:#bdffd7;text-shadow:0 0 20px #80efad70}
  .manorClearPercent>span{font-size:.55em;letter-spacing:0;margin-left:2px}
  .manorGhostTrack{position:relative;height:21px;margin-top:22px;border-radius:999px;background:#080f17;box-shadow:inset 0 0 0 1px #c7ffdf26,inset 0 2px 7px #0008}
  .manorGhostFill{position:relative;width:var(--manor-cleared);height:100%;overflow:hidden;border-radius:inherit;background:linear-gradient(90deg,#398c69,#7de7aa 68%,#d1ffe4);box-shadow:0 0 14px #7befaa70,inset 0 1px 0 #e8fff7a0;animation:manorFillIn 1.3s cubic-bezier(.22,1,.36,1) both}
  .manorGhostFill::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 15%,#effff988 45%,transparent 75%);background-size:220% 100%;animation:manorMist 4.8s ease-in-out infinite}
  .manorGhostMarker{position:absolute;left:clamp(15px,var(--manor-cleared),calc(100% - 15px));top:50%;transform:translate(-50%,-50%);line-height:1;font-size:28px;pointer-events:none;filter:drop-shadow(0 0 7px #9cfdba);animation:manorGhostTravel 1.3s cubic-bezier(.22,1,.36,1) both}
  .manorGhostMarker>span{display:block;animation:manorGhostFloat 3.2s ease-in-out infinite}
  @keyframes manorFillIn{from{width:var(--manor-before)}to{width:var(--manor-cleared)}}
  @keyframes manorGhostTravel{from{left:clamp(15px,var(--manor-before),calc(100% - 15px))}to{left:clamp(15px,var(--manor-cleared),calc(100% - 15px))}}
  @keyframes manorMist{0%,100%{background-position:120% 0;opacity:.2}50%{background-position:-20% 0;opacity:.6}}
  @keyframes manorGhostFloat{0%,100%{transform:translateY(1px) rotate(-5deg)}50%{transform:translateY(-4px) rotate(5deg)}}
  @media(prefers-reduced-motion:reduce){.manorClearCard *,.manorClearCard *::after{animation:none!important}}
  .majorCase{display:inline-block;margin-top:7px;padding:5px 8px;border-radius:999px;background:rgba(221,116,28,.18);border:1px solid rgba(221,116,28,.3);font-size:11px;font-weight:900}

  /* RC4: responsive special collectible reveal */
  .specialGhostDialog{box-sizing:border-box;width:min(94vw,920px);max-width:920px;max-height:92dvh;overflow:auto;padding:clamp(14px,2.5vw,24px)}
  .specialGhostDialog::backdrop{background:radial-gradient(circle at center,rgba(168,120,255,.18),rgba(4,6,16,.84) 62%,rgba(0,0,0,.94))}
  .specialGhostReveal{display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(14px,3vw,28px);align-items:center}
  .specialGhostArtWrap{position:relative;display:flex;justify-content:center;align-items:center;padding:6px;min-height:0}
  .specialGhostHalo{position:absolute;inset:10% 15%;border-radius:50%;background:radial-gradient(circle,rgba(190,255,155,.45),rgba(150,90,255,.14) 45%,rgba(0,0,0,0) 70%);filter:blur(12px);animation:specialPulse 1.8s ease-in-out infinite}
  .specialGhostArt{position:relative;z-index:1;display:block;width:min(100%,430px);height:auto;max-height:68dvh;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}
  .specialGhostText h2{margin:0 0 8px}
  .specialBadge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,218,102,.14);border:1px solid rgba(255,218,102,.28);color:#ffe58a;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:12px}
  .specialGhostName{font-size:clamp(28px,5vw,44px);line-height:1.05;margin:10px 0 6px;color:#f7f1ff}
  .specialGhostLore{color:#d7d9ef;font-size:16px;line-height:1.45}
  .specialGhostArchive{margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
  .specialGhostNote{margin-top:10px;color:#bfc4ee;font-size:14px}
  .specialSection{margin-top:18px}
  .specialCollectionGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
  .specialSpiritCard{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:18px;background:linear-gradient(180deg,rgba(40,44,86,.82),rgba(18,21,43,.94));border:1px solid rgba(255,255,255,.08)}
  .specialSpiritCard.locked{opacity:.62}
  .specialSpiritThumb{width:76px;height:76px;object-fit:contain;border-radius:14px;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.12),rgba(255,255,255,.04) 54%,rgba(255,255,255,.02) 75%)}
  .dangerReset{margin-top:12px;border-color:rgba(255,105,105,.32)!important;color:#ffd2d2!important;background:rgba(110,20,28,.22)!important}
  @keyframes specialPulse{0%,100%{transform:scale(.96);opacity:.74}50%{transform:scale(1.06);opacity:1}}

  @media(max-width:540px){
    .deskGrid{grid-template-columns:1fr 1fr}
    .collectionGrid{grid-template-columns:1fr}

    .specialGhostDialog{width:min(96vw,560px);max-height:94dvh;padding:12px}
    .specialGhostReveal{grid-template-columns:1fr;gap:8px}
    .specialGhostText{text-align:center}
    .specialGhostArtWrap{padding:0}
    .specialGhostArt{width:min(82vw,330px);max-height:46dvh}
    .specialGhostText h2{font-size:20px;margin-bottom:4px}
    .specialGhostName{font-size:30px;margin:6px 0 4px}
    .specialGhostLore{font-size:14px;line-height:1.35}
    .specialGhostArchive{margin-top:8px;padding:9px 10px}
    .specialGhostNote{margin-top:7px;font-size:12px}
  }


  .resumeCard,.challengeCard,.bossCard{margin:12px 0 0;padding:13px 15px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(58,66,110,.42),rgba(30,33,58,.72));display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .bossCard{border-color:rgba(255,215,90,.35);background:linear-gradient(180deg,rgba(109,67,165,.34),rgba(52,29,75,.82))}
  .resumeCard b,.challengeCard b,.bossCard b{display:block;font-size:15px}.resumeCard small,.challengeCard small,.bossCard small{display:block;color:var(--muted);margin-top:4px}.resumeCard button,.challengeCard button,.bossCard button{min-width:130px}
  .homeUtilityRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.homeUtilityRow button{min-height:48px;background:rgba(255,255,255,.055)}
  .miniMansion{position:relative;margin:12px auto 2px;width:min(410px,100%);padding:26px 16px 15px;background:linear-gradient(180deg,#292335,#171723);border:1px solid rgba(255,255,255,.08);border-radius:20px 20px 12px 12px;overflow:hidden}
  .miniMansion::before{content:"";position:absolute;left:11%;right:11%;top:5px;height:37px;background:#342c42;clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.92}
  .miniMansion::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(112deg,transparent 0 23px,rgba(255,255,255,.018) 24px 25px);pointer-events:none}
  .mansionWindows{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
  .mansionWindow{min-height:38px;border:2px solid rgba(0,0,0,.52);border-radius:8px 8px 4px 4px;background:rgba(16,15,25,.92);display:grid;place-items:center;font-size:14px;transition:background .35s,box-shadow .35s,filter .35s;filter:brightness(.72)}
  .mansionWindow.lit{filter:brightness(1);background:rgba(226,155,56,.20);box-shadow:inset 0 0 14px rgba(255,184,69,.22)}.mansionWindow.restored{background:rgba(111,173,91,.22);box-shadow:inset 0 0 16px rgba(133,220,112,.26)}
  .mansionDoor{grid-column:2/4;min-height:43px;border-radius:9px 9px 3px 3px;background:#16121d;border:2px solid rgba(0,0,0,.55);display:grid;place-items:center}
  .challengeBanner{position:relative;z-index:2;margin:0 0 10px;padding:10px 12px;border-radius:13px;background:rgba(217,123,23,.12);border:1px solid rgba(221,116,28,.28);font-size:12px}
  .tutorialCoach{position:relative;z-index:4;margin:0 0 10px;padding:11px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(84,68,130,.96),rgba(52,44,88,.96));border:1px solid rgba(209,193,255,.24);display:flex;gap:12px;align-items:center;justify-content:space-between}
  .tutorialCoach b{display:block;margin-bottom:3px}.tutorialCoach small{color:#ded6ef;line-height:1.35}.tutorialTarget{box-shadow:inset 0 0 0 4px #ffe39a,0 0 16px rgba(255,216,111,.55)!important;z-index:4}
  .feedbackForm{display:grid;gap:10px}.feedbackForm label{font-size:12px;color:#ddd7e9;font-weight:750}
  .feedbackForm textarea,.feedbackForm input,.feedbackForm select{width:100%;margin-top:5px;background:#0f1220;color:#eee8f8;border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:10px;font:inherit;font-size:16px}
  .feedbackForm textarea{min-height:110px;resize:vertical}.installNote{color:var(--muted);font-size:12px;line-height:1.5}.homeBackBtn{font-size:18px;padding:0 12px}
  @media(max-width:540px){.homeUtilityRow{grid-template-columns:1fr}.resumeCard button,.challengeCard button,.bossCard button{width:100%}.tutorialCoach{align-items:flex-start;flex-direction:column}}


  .launchBadges{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:12px auto 2px;max-width:620px}
  .launchBadges span{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:#d9d2e7;font-size:11px;font-weight:800}
  .siteFooter{margin:18px auto 0;padding:14px 4px 4px;text-align:center;color:var(--muted);font-size:11px;line-height:1.6}
  .siteFooter nav{display:flex;justify-content:center;gap:13px;flex-wrap:wrap;margin-bottom:5px}
  .siteFooter a{color:#d9d0f5;text-decoration:none}.siteFooter a:hover{text-decoration:underline}
  .consentBanner{position:fixed;z-index:9999;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(700px,calc(100% - 24px));padding:13px 14px;border-radius:16px;background:#17192b;border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 70px rgba(0,0,0,.55);display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
  .consentBanner p{margin:0;flex:1 1 330px;color:#ddd7e9;font-size:12px;line-height:1.45}.consentBanner .consentActions{display:flex;gap:7px;flex-wrap:wrap}.consentBanner a{color:#d8ccff}
  .consentBanner button{min-height:38px;font-size:12px}.consentBanner button.secondary{background:rgba(255,255,255,.06)}

  .loading{opacity:.65;pointer-events:none}
  @keyframes candleRegrow{0%{filter:brightness(1)}35%{filter:brightness(1.7) drop-shadow(0 0 8px rgba(255,203,100,.75));transform:scale(1.1)}100%{filter:brightness(1);transform:scale(1)}}
  @media(max-width:680px){.controls{grid-template-columns:1fr 1fr auto}.controls button:nth-of-type(1){grid-column:auto}.controls #settingsBtn{grid-column:auto}.rules{grid-template-columns:repeat(2,1fr)}.rooms{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:500px){body{padding:9px}.panel{padding:10px;border-radius:18px}.controls{grid-template-columns:1fr 1fr}.controls button{width:100%}.rules{grid-template-columns:1fr 1fr}.modePill{display:none}.cell .ghost{font-size:clamp(17px,7.4vw,31px)}.cell .mark,.cell .hand{font-size:clamp(14px,6.4vw,28px)}}

  /* RC5.23: mobile collectible dialogs keep the action button reachable */
  .specialGhostDialog[open]{display:flex;flex-direction:column;overflow:hidden}
  .specialGhostDialog #specialGhostBody{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
  .specialGhostDialog > menu{flex:0 0 auto;margin:10px -2px -2px;padding:10px 2px 2px;background:linear-gradient(180deg,rgba(24,27,49,0),#181b31 24%);position:relative;z-index:8}
  .specialGhostDialog > menu button{min-height:48px}
  @media(max-width:540px){
    .specialGhostDialog{max-height:94dvh}
    .specialGhostDialog #specialGhostBody{padding-bottom:4px}
    .specialGhostArt{width:min(78vw,300px);max-height:38dvh}
    .specialGhostDialog > menu{margin-top:7px;padding-top:8px}
  }

  @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

  @media (max-height:560px) and (orientation:landscape){
    .specialGhostDialog{width:min(96vw,900px);max-height:96dvh;padding:10px 14px}
    .specialGhostReveal{grid-template-columns:minmax(210px,38%) 1fr;gap:12px}
    .specialGhostArt{width:min(100%,300px);max-height:72dvh}
    .specialGhostText{text-align:left}
    .specialGhostText h2{font-size:18px}
    .specialGhostName{font-size:28px}
    .specialGhostLore{font-size:13px}
    .specialGhostArchive{font-size:12px;margin-top:7px;padding:8px 10px}
    .specialGhostNote{font-size:11px;margin-top:6px}
  }


  /* RC5: Golden Ghost encounter system */
  .cell.goldenGhostCell{position:relative;overflow:visible}
  .cell.goldenGhostCell::after{content:"";position:absolute;inset:10%;border-radius:50%;pointer-events:none;box-shadow:0 0 10px rgba(255,222,95,.95),0 0 22px rgba(255,193,50,.72),0 0 34px rgba(255,149,0,.42);animation:goldGhostPulse 1.25s ease-in-out infinite}
  .goldenGhostMark{filter:drop-shadow(0 0 7px rgba(255,220,80,.95)) drop-shadow(0 0 15px rgba(255,160,0,.65))}
  .goldenBanner{margin:10px 0;padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(110,77,12,.36),rgba(63,42,5,.28));border:1px solid rgba(255,215,90,.35);color:#ffe99a}
  .goldenBanner b{color:#fff3b8}
  @keyframes goldGhostPulse{0%,100%{transform:scale(.93);opacity:.72}50%{transform:scale(1.08);opacity:1}}

  /* RC5.8: Halloween collectible reveal event */
  .specialGhostDialog.halloweenReveal{
    overflow:hidden;
    border-color:rgba(255,166,55,.5);
    box-shadow:0 0 0 1px rgba(143,72,210,.24),0 0 34px rgba(255,126,27,.22);
  }
  .specialGhostDialog.halloweenReveal::backdrop{
    background:
      radial-gradient(circle at 50% 40%,rgba(255,137,31,.16),transparent 32%),
      radial-gradient(circle at 35% 68%,rgba(137,73,210,.22),transparent 40%),
      rgba(3,4,12,.9);
    animation:halloweenBackdropPulse 1.2s ease-out 1;
  }
  .halloweenReveal .specialGhostHalo{
    background:radial-gradient(circle,rgba(255,190,72,.62),rgba(143,76,214,.28) 44%,rgba(0,0,0,0) 72%);
    filter:blur(10px);
    animation:halloweenHalo 1.45s ease-in-out infinite;
  }
  .halloweenReveal .specialGhostArt{
    animation:halloweenCardArrival .8s cubic-bezier(.18,.89,.32,1.28) both;
    filter:drop-shadow(0 10px 24px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(255,159,50,.26));
    border-radius:18px;
  }
  .halloweenReveal .specialBadge{
    background:linear-gradient(90deg,rgba(255,130,24,.2),rgba(128,62,190,.22));
    border-color:rgba(255,177,68,.48);
    color:#ffe09a;
    animation:halloweenBadgePop .65s ease-out both;
  }
  .halloweenReveal .specialGhostName{
    text-shadow:0 0 18px rgba(255,151,48,.32);
  }
  .halloweenBurst{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:20;
  }
  .halloweenBurst span{
    position:absolute;
    left:50%;
    top:48%;
    font-size:clamp(18px,3vw,30px);
    opacity:0;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));
    animation:halloweenParticle var(--dur,1.6s) ease-out var(--delay,0s) forwards;
  }
  @keyframes halloweenBackdropPulse{
    0%{filter:brightness(.55)}
    22%{filter:brightness(1.35)}
    46%{filter:brightness(.7)}
    100%{filter:brightness(1)}
  }
  @keyframes halloweenHalo{
    0%,100%{transform:scale(.92);opacity:.7}
    50%{transform:scale(1.07);opacity:1}
  }
  @keyframes halloweenCardArrival{
    0%{transform:scale(.72) rotate(-2deg);opacity:0}
    62%{transform:scale(1.035) rotate(.5deg);opacity:1}
    100%{transform:scale(1) rotate(0);opacity:1}
  }
  @keyframes halloweenBadgePop{
    0%{transform:translateY(-8px) scale(.92);opacity:0}
    100%{transform:translateY(0) scale(1);opacity:1}
  }
  @keyframes halloweenParticle{
    0%{transform:translate(-50%,-50%) scale(.35) rotate(0deg);opacity:0}
    14%{opacity:1}
    100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.08) rotate(var(--rot));opacity:0}
  }


  .boardRow{display:contents}
  .homeModeHint{text-align:center;color:var(--muted);font-size:12px;margin:7px 0 13px}
  .homeQuickBtn b{display:block}.homeQuickBtn small{display:block;font-size:10px;line-height:1.5;font-weight:400;color:#c6c0d5;margin-top:4px}.homeQuickBtn{padding:10px 12px}
  .manorDetailsBtn{margin:9px 0 4px;background:transparent;font-size:12px;color:#d0e1c4;border-color:#c8daba33}
  .controls.fixedPuzzle{grid-template-columns:minmax(0,1fr) repeat(3,auto)}
  .fixedPuzzleInfo{display:flex;align-items:center;color:#dbd4ea;font-size:13px;line-height:1.4;padding:0 8px;min-width:0}
  .cell:focus-visible{outline:2px solid #fff;outline-offset:-4px;z-index:1}
  .keyboardHelp{font-size:11px;line-height:1.5;color:var(--muted);margin:8px 0 0;text-align:center}
  .markerTip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 4px;margin-top:7px;padding-top:3px;border-top:1px solid #bdd7bc26;color:#c9ddc7;font-size:12px;line-height:1.5;text-align:center}
  .markerTip button{min-height:44px;padding:0 4px;background:transparent;border:0;border-radius:6px;color:#d8f0c7;font-size:inherit;text-decoration:underline;text-underline-offset:3px}
  .markerTip button:focus-visible{outline:2px solid #d8f0c7;outline-offset:2px}
  .srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  body[data-effects="off"] *,body[data-effects="off"] *::before,body[data-effects="off"] *::after{animation:none!important;transition:none!important}
  body[data-effects="off"]::before,body[data-effects="off"]::after{animation:none!important}