:root{
--bg:#050317;
--glass: rgba(15,15,30,.92);
/* Primary neon colours borrowed from the Arcade Overhaul. These are used
    throughout the main menu to create a vibrant gradient effect. */
--neon:#ff00ff;
--cyan:#00ffff;
--gold:#ffd700;
--accent:#ff00c8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:#fff; font-family:ui-monospace, Menlo, Consolas, monospace; display:grid; place-items:center; overflow:hidden}
#wrap{ position:relative; width:min(96vw,1320px); aspect-ratio:16/9; border-radius:20px; overflow:clip; background:#000;
box-shadow:0 0 0 1px rgba(0,255,255,.25) inset, 0 0 50px rgba(0,255,255,.25), 0 0 200px rgba(255,0,200,.25);
}
canvas{width:100%;height:100%;display:block}
canvas.pixel{ image-rendering:pixelated; image-rendering:crisp-edges; }
#hudTop{ position:absolute; inset:8px 8px auto 8px; display:flex; gap:8px; z-index:20 }
.pill{ padding:8px 12px; border-radius:999px; background:rgba(0,0,0,.7); border:1px solid rgba(0,255,255,.35); box-shadow:0 0 18px rgba(0,255,255,.15); font-size:12px; white-space:nowrap }
#hudBtns{ position:absolute; right:8px; top:8px; display:flex; gap:8px; z-index:20 }
button.ui{ all:unset; cursor:pointer; padding:8px 12px; border-radius:12px; background:rgba(15,15,30,.78); border:1px solid rgba(255,0,200,.35); color:#ffe3ff; font-weight:700; font-size:12px; transition:transform .08s ease, background .2s ease }
button.ui:active{ transform:translateY(1px) scale(.98) }
#toasts{ position:absolute; left:50%; top:10%; transform:translateX(-50%); display:grid; gap:8px; pointer-events:none; z-index:40 }
.toast{ padding:10px 14px; background:rgba(20,20,40,.92); border:1px solid rgba(0,255,255,.35); border-radius:12px; text-align:center; white-space:nowrap; animation:tin .18s ease-out }
@keyframes tin{ from{ transform:translateY(-8px); opacity:0 } }
/* Tooltip */
#tooltip{ position:absolute; max-width:280px; padding:8px 10px; border-radius:10px; background:rgba(15,15,30,.95); border:1px solid rgba(255,255,255,.25);
font-size:12px; color:#def; pointer-events:none; transform:translate(12px,12px); display:none; z-index:35 }
/* Docked right panel for Shrine/Build */
#panel{ position:absolute; right:12px; bottom:12px; width:320px; min-height:120px; padding:12px; border-radius:14px; background:var(--glass);
border:1px solid rgba(0,255,255,.35); box-shadow:0 0 24px rgba(0,255,255,.18); display:none; z-index:30 }
#panel h3{ margin:0 0 6px; font-size:14px }
#panel p{ margin:4px 0; font-size:12px; color:#cfe }
#panel .row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
#panel .btn{ cursor:pointer; padding:6px 10px; border-radius:10px; background:rgba(0,0,0,.5); border:1px solid rgba(255,0,200,.35); color:#ffe3ff; font-size:12px }
/* Menus */
.modal{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:50; backdrop-filter:blur(3px) }
.card{ width:min(920px,92%); max-height:86%; overflow:auto; padding:16px; border-radius:16px; background:var(--glass); border:1px solid rgba(255,255,255,.25) }
.card h2{ margin:0 0 12px; }
.grid{ display:grid; gap:12px }
/* Character grid */
.chars{ grid-template-columns: repeat(3, 1fr) }
.char{ position:relative; padding:12px; border-radius:12px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2) }
.char:hover{ transform:translateY(-1px); box-shadow:0 0 20px rgba(255,255,255,.08) }
.char-name{ font-weight:800; font-size:13px; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.char-desc{ font-size:12px; color:#bde; height:36px; overflow:hidden; text-overflow:ellipsis }
.char-stats{ font-size:11px; color:#ccd }
.chip{ display:inline-block; padding:2px 6px; border-radius:99px; background:rgba(255,255,255,.08); margin-right:6px; font-size:11px }
.sel{ position:absolute; right:8px; top:8px; font-size:11px; opacity:.9 }
/* Options rows */
.optrow{ display:flex; gap:12px; align-items:center; font-size:12px; margin:6px 0 }
input[type=range]{ width:160px }
/* Achievements */
.ach{ display:grid; grid-template-columns: 22px 1fr auto; gap:8px; align-items:center; padding:6px; border-bottom:1px dashed rgba(255,255,255,.1) }
/* HUD bottom bar */
#hudBottom{ position:absolute; left:0; right:0; bottom:6px; display:flex; align-items:center; justify-content:space-between; padding:0 10px; pointer-events:none; z-index:25 }
.hearts{ display:flex; gap:4px }
.heart{ width:16px; height:14px; background:linear-gradient(#ff0066,#880033); border:1px solid #ff5a9a; border-radius:3px }
.heart.off{ background:linear-gradient(#330011,#22000b); border-color:#4a0022 }
/* Replace the old hearts with a single health bar. The container (#hearts)
    now holds a single child (.fill) whose width reflects the HP ratio. */
#hearts{
position:relative;
display:block;
width:120px;
height:10px;
border-radius:6px;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.2);
overflow:hidden;
}
#hearts .fill{
position:absolute;
left:0;
top:0;
bottom:0;
background:linear-gradient(90deg, var(--cyan), var(--neon), var(--gold));
width:100%;
transition:width .2s ease-out;
}
.bar{ height:8px; min-width:120px; border-radius:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); overflow:hidden }
.bar>i{ display:block; height:100%; background:linear-gradient(90deg,#00ffd5,#ff00e1) }
.res{ font-size:12px; opacity:.9 }
/* Care Mode styles */
#modalCare .care-bars{ display:flex; flex-direction:column; gap:6px; }
#modalCare .care-bar{ display:flex; align-items:center; font-size:12px; }
#modalCare .care-bar span{ width:60px; }
#modalCare .care-bar .bar{ flex:1; height:8px; border-radius:6px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); margin-left:4px; overflow:hidden; }
#modalCare .care-bar .fill{ display:block; height:100%; width:100%; }

/* Care customization section */
#modalCare .care-customize{ margin-top:8px; padding:8px; border-radius:8px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.2); font-size:12px; }
#modalCare .care-customize .skins{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
#modalCare .care-customize .skin{ width:24px; height:24px; border-radius:4px; background:#222; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid #666; }
#modalCare .care-customize .skin.selected{ border-color:#0af; }
#modalCare #barHunger{ background:linear-gradient(90deg,#ff7a7a,#ff3f3f); }
#modalCare #barHappiness{ background:linear-gradient(90deg,#7aff8a,#35ff5a); }
#modalCare #barHygiene{ background:linear-gradient(90deg,#7ad3ff,#35aaff); }
#modalCare #barXP{ background:linear-gradient(90deg,#ffd966,#ffa500); }
/* Additional bars for care mode */
#modalCare #barEnergy{ background:linear-gradient(90deg,#a0a0ff,#5050ff); }
#modalCare #barBond{ background:linear-gradient(90deg,#ffc0cb,#ff69b4); }
/* Whack‑a‑mole minigame cells */
#modalCare .whackGrid{ display:grid; grid-template-columns:repeat(3,24px); gap:6px; justify-content:center; margin-top:6px; }
#modalCare .whackCell{ width:24px; height:24px; border:1px solid #444; border-radius:4px; background:#222; position:relative; cursor:pointer; }
#modalCare .whackCell.mole::before{ content:''; position:absolute; top:3px; left:3px; right:3px; bottom:3px; background:#6b3a0f; border-radius:50%; }
#modalCare .care-buttons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:8px; margin-top:12px; }
#modalCare .care-buttons button{ all:unset; cursor:pointer; padding:8px 12px; border-radius:10px; background:rgba(0,0,0,.5); border:1px solid rgba(255,0,200,.35); color:#ffe3ff; font-size:12px; text-align:center; user-select:none; }
#modalCare .care-buttons button:disabled{ opacity:.4; cursor:default; }
#modalCare #carePet{ font-size:48px; text-align:center; margin:8px 0; }
#modalCare #careMinigame{ margin-top:12px; }
#modalCare #careMsg{ font-size:12px; color:#bdf; margin-top:6px; text-align:center; }

/* ------------------------------------------------------------------ */
/* Neon Arcade styling for the main menu. These styles apply only to
    the main menu modal by targeting the .menu class added to #modal. */
.modal.menu{
/* Create a vibrant, animated background using layered radial gradients. */
background:
    radial-gradient(800px 800px at 20% 20%, rgba(255,0,255,.25), transparent 60%),
    radial-gradient(800px 800px at 80% 80%, rgba(0,255,255,.25), transparent 60%),
    radial-gradient(1000px 1000px at 50% 50%, rgba(255,215,0,.25), transparent 60%);
animation: menuHue 12s linear infinite;
}
@keyframes menuHue{
0%{ filter:hue-rotate(0deg); }
50%{ filter:hue-rotate(360deg); }
100%{ filter:hue-rotate(0deg); }
}
/* Style the main menu card to resemble the arcade overhaul panel.  Use
    semi‑transparent gradient fills and bright border glows. */
.modal.menu .card{
background:linear-gradient(135deg, rgba(0,255,255,.14), rgba(255,0,255,.12));
border:2px solid rgba(0,255,255,.35);
box-shadow:0 0 28px rgba(0,255,255,.25), 0 0 32px rgba(255,0,255,.15);
}
/* Title in the main menu uses a gradient text effect.  We avoid loading
    external fonts but apply heavy weight and letter spacing to evoke
    the arcade look. */
.modal.menu .card h2{
font-size:52px;
font-weight:900;
margin-bottom:14px;
background:linear-gradient(45deg,var(--neon),var(--cyan),var(--gold));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
background-size:200% 200%;
animation:tGlow 5s ease-in-out infinite;
text-align:center;
text-transform:uppercase;
}
@keyframes tGlow{
0%,100%{ filter:brightness(1); }
50%{ filter:brightness(1.12); }
}
/* Buttons in the main menu are larger pill‑shaped elements with bright
    gradients and soft shadows. */
.modal.menu .card button.ui{
background:linear-gradient(45deg,var(--neon),var(--cyan),var(--gold));
border:none;
color:#fff;
padding:10px 16px;
border-radius:20px;
font-weight:900;
letter-spacing:1.2px;
text-transform:uppercase;
cursor:pointer;
box-shadow:0 6px 18px rgba(255,0,255,.25);
transition:transform .12s ease;
}
.modal.menu .card button.ui:hover{
transform:translateY(-2px) scale(1.02);
}
.modal.menu .card button.ui:active{
transform:translateY(1px) scale(.98);
}

/* ------------------------------------------------------------------ */
/* Care mode minigame UI enhancements */
/* A universal button used for reaction, clicker and train minigames. */
#careMinigame .mini-btn{
all:unset;
display:inline-block;
padding:8px 14px;
margin:8px auto;
border-radius:8px;
background:rgba(0,0,0,.6);
border:1px solid rgba(255,255,255,.25);
color:#fff;
font-size:12px;
text-align:center;
cursor:pointer;
}
#careMinigame .mini-btn:disabled{
opacity:.5;
cursor:default;
}
/* DDR/Guitar‑hero style minigame layout */
.danceGrid{
position:relative;
width:160px;
height:120px;
margin:8px auto;
border:1px solid rgba(255,255,255,.2);
background:rgba(0,0,0,.3);
border-radius:6px;
overflow:hidden;
}
.danceArrow{
position:absolute;
width:32px;
height:32px;
line-height:32px;
font-size:20px;
text-align:center;
color:#fff;
opacity:0.9;
pointer-events:none;
}
.danceArrow.hit{
opacity:0.3;
}
.danceHitRow{
position:relative;
display:flex;
justify-content:space-between;
margin:4px auto;
width:160px;
}
.danceHitRow span{
width:32px;
height:32px;
line-height:32px;
text-align:center;
border:1px solid rgba(255,255,255,.3);
border-radius:4px;
opacity:0.6;
font-size:18px;
}

/* ------------------------------------------------------------------ */
/* Global animated background.  This layer sits behind the canvas and
    provides a continuously shifting neon gradient effect throughout
    gameplay.  It is similar to the main menu backdrop but more subtle.
    The hue‑rotation animation cycles colours smoothly over time. */
#bgAnim {
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:
    radial-gradient(800px 800px at 20% 20%, rgba(255,0,255,.15), transparent 70%),
    radial-gradient(800px 800px at 80% 80%, rgba(0,255,255,.15), transparent 70%),
    radial-gradient(1000px 1000px at 50% 50%, rgba(255,215,0,.15), transparent 70%);
animation:bgHue 20s linear infinite;
}
@keyframes bgHue {
0% { filter:hue-rotate(0deg); }
100% { filter:hue-rotate(360deg); }
}

/* Background brightness pulse used to accentuate ability activations.  The
    pulse temporarily increases the brightness of the animated backdrop then
    fades back to normal. */
@keyframes bgPulse {
0%   { filter: brightness(1); }
50%  { filter: brightness(1.6); }
100% { filter: brightness(1); }
}
#bgAnim.pulse { animation: bgPulse 0.6s ease; }

/* Ensure the main canvas renders above the background layer. */
#cv {
position:relative;
z-index:1;
}