*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#04304f;font-family:"Segoe UI",system-ui,sans-serif;color:#fff;user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hidden{display:none!important}
#menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(2,30,55,.45),rgba(2,30,55,.68)),url("assets/feeding-original/ui/mainbg.jpg") center/cover no-repeat;backdrop-filter:blur(3px)}
.card{background:rgba(7,60,100,.92);border:2px solid #4fc3f7;border-radius:18px;padding:28px 32px;text-align:center;width:min(92vw,380px);box-shadow:0 10px 40px rgba(0,0,0,.5)}
h1{margin:0;font-size:34px;color:#ffd54f;text-shadow:0 3px 0 #b36b00}
.sub{margin:4px 0 16px;color:#b3e5fc}
#msg{min-height:20px;color:#ff8a80;font-weight:600;margin:0 0 8px}
input{width:100%;padding:12px;font-size:18px;border-radius:10px;border:2px solid #4fc3f7;background:#022c4a;color:#fff;text-align:center;outline:none}
button{margin-top:12px;width:100%;padding:12px;font-size:20px;font-weight:700;border:0;border-radius:10px;background:linear-gradient(#ffb74d,#f57c00);color:#fff;cursor:pointer;box-shadow:0 4px 0 #a64d00}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #a64d00}
.help{font-size:13px;color:#b3e5fc;margin:14px 0 0}
.game-logo{display:block;width:min(75%,250px);height:auto;object-fit:contain;margin:0 auto 2px}
.scene-label{display:block;margin-top:12px;font-size:13px;color:#b3e5fc;text-align:left}
.scene-label select{display:block;width:100%;margin-top:5px;border:2px solid #4fc3f7;border-radius:10px;padding:10px;color:#fff;background:#063854;font:inherit;cursor:pointer}
.sound-toggle{margin-top:8px;padding:7px 12px;background:rgba(8,77,112,.75);box-shadow:none;border:1px solid #4fc3f7;font-size:13px;letter-spacing:.1px}
.sound-toggle:active{box-shadow:none}
.card{max-height:95vh;overflow-y:auto}
@media(max-width:600px){.card{padding:18px 20px}h1{font-size:26px}}
#hud > div{position:fixed;text-shadow:0 2px 4px #000;pointer-events:none}
#score{top:12px;left:14px;font-size:22px}
#bestScore{display:block;font-size:11px;color:#e6f8fc;margin-top:3px;opacity:.85}
#online{bottom:10px;left:14px;font-size:14px;opacity:.85}
#perfHud{bottom:10px;right:14px;font-size:12px;opacity:.7;color:#b8ecff;background:rgba(0,29,49,.45);padding:3px 7px;border-radius:6px}
#lb{top:12px;right:14px;background:rgba(0,40,70,.55);border-radius:10px;padding:8px 14px;min-width:170px}
#lb h4{margin:0 0 4px;font-size:14px;color:#ffd54f}
#lb ol{margin:0;padding-left:20px;font-size:14px}
#lb li{display:flex;justify-content:space-between;gap:10px}
#lb li.me{color:#ffd54f;font-weight:700}

#menu{z-index:8}
#arcadeStats{top:56px;left:14px;min-width:280px;width:min(37vw,355px);background:rgba(2,36,62,.77);border:1px solid rgba(123,221,246,.55);border-radius:12px;padding:11px 14px;backdrop-filter:blur(5px)}
.stage-info,.grow-caption,.status-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stage-info{font-size:15px;color:#fff5c9;font-weight:700}
#stageTimer{font-size:21px;color:#fff;font-variant-numeric:tabular-nums}
.grow-caption{font-size:11px;opacity:.86;margin-top:10px}
.growth-track{height:12px;border-radius:12px;overflow:hidden;background:#032846;border:1px solid #d4e5ff;margin-top:5px}
#growFill{height:100%;width:0%;background:linear-gradient(90deg,#42e2a2,#ffdd57);transition:width .16s linear}
.status-row{margin-top:9px;font-size:13px}
#lifeText{color:#ff7390;font-size:19px;white-space:nowrap}
#comboText{color:#ffe773;font-weight:700}
#powerText{color:#8ef8e2;font-size:12px}
#hud.arcade #lb{display:none}
#hud.arcade #online{opacity:.7}
#notice{position:fixed;top:26%;left:50%;transform:translateX(-50%);font-size:clamp(18px,3vw,30px);font-weight:800;color:#ffea63;text-shadow:0 2px 5px #021a35,0 0 18px #22baff;white-space:nowrap;pointer-events:none}
#stageOverlay{position:fixed;inset:0;background:rgba(0,15,33,.73);z-index:11;display:grid;place-items:center;backdrop-filter:blur(6px)}
.result-card{width:min(91vw,420px);padding:28px;background:linear-gradient(160deg,#095b89,#013352);border:2px solid #80e7fa;border-radius:18px;box-shadow:0 14px 45px #0017;text-align:center}
.result-card h2{color:#ffda66;font-size:28px;margin:4px 0 12px;text-shadow:0 3px 0 #805400}
.result-card p{font-size:15px;line-height:1.5}
.result-card button{display:block}
#resultRestart,#resultMenu{background:linear-gradient(#186785,#06415c);border:1px solid #6cd4e9;box-shadow:none;font-size:15px}
.hud-control{position:fixed;z-index:4;background:rgba(0,67,102,.78);border:1px solid #a0f6ff;box-shadow:0 3px 0 rgba(0,20,38,.75);width:auto;min-width:54px;padding:9px 14px;margin:0;border-radius:11px;cursor:pointer;touch-action:manipulation}
#pauseBtn{top:13px;right:192px;font-size:18px}
#exitOnlineBtn{top:14px;right:210px;font-size:12px;padding:8px 12px;z-index:7}
#dashBtn{bottom:24px;right:22px;font-size:14px}
#suckBtn{bottom:76px;right:22px;font-size:14px}
.hud-control:disabled{opacity:.45;filter:grayscale(.7)}
@media(max-width:600px){
#arcadeStats{top:48px;width:min(65vw,300px);padding:9px 10px;min-width:0}
.stage-info{font-size:12px}
#stageTimer{font-size:15px}
#score{font-size:17px}
#pauseBtn{right:10px;top:10px}
#dashBtn{bottom:18px;right:12px}
#suckBtn{bottom:64px;right:12px}
#online{bottom:6px;font-size:11px}
}

/* Classic PopCap menu sprite controls from the extracted original resources. */
#menu .card{background:rgba(5,45,80,.80);border:1px solid rgba(130,228,245,.56)}
#menu h1{font-size:23px;line-height:1.1}
#menu .sub{font-size:12px}
#menu #play{
  display:block;width:106px;height:106px;min-width:106px;margin:12px auto 0;padding:0;
  background:url("assets/feeding-original/ui/menus/mainnewnormal.png") center/contain no-repeat;
  color:transparent;font-size:0;border:0;box-shadow:none;text-indent:-2000vw;
  border-radius:50%;filter:drop-shadow(0 3px 6px #001a28);
}
#menu #play:hover{background-image:url("assets/feeding-original/ui/menus/mainnewhigh.png")}
#menu #play.timeattack{background-image:url("assets/feeding-original/ui/menus/maintimenormal.png")}
#menu #play.timeattack:hover{background-image:url("assets/feeding-original/ui/menus/maintimehigh.png")}
#menu #play.online{border-radius:10px;width:100%;height:48px;min-width:0;color:white;
  font-size:18px;text-indent:0;background:linear-gradient(#ffbd69,#ef7700)}
#menu #play:disabled{opacity:.5}
#classicActions{display:flex;justify-content:center;align-items:center;gap:14px;margin:2px auto}
#classicActions button{background-repeat:no-repeat;background-size:contain;background-position:center;
  color:transparent;text-indent:-2000vw;font-size:0;box-shadow:none;border:0;padding:0;
  margin:0;width:72px;height:65px;flex:none;border-radius:50%}
#classicOptions{background-image:url("assets/feeding-original/ui/menus/mainoptionsnormal.png")}
#classicOptions:hover{background-image:url("assets/feeding-original/ui/menus/mainoptionshigh.png")}
#highScoresButton{background-image:url("assets/feeding-original/ui/menus/mainhighscorenormal.png")}
#highScoresButton:hover{background-image:url("assets/feeding-original/ui/menus/mainhighscorehigh.png")}
#scoresOverlay{position:fixed;inset:0;z-index:13;display:grid;place-items:center;background:rgba(0,15,40,.77)}
#scoresOverlay .result-card{background:linear-gradient(rgba(4,42,76,.95),rgba(2,20,46,.94)),url("assets/feeding-original/ui/menus/infoframe.jpg") center/cover;border-color:#a4fbff}
#scoresList{padding-left:22px;margin:12px 0;text-align:left;max-height:45vh;overflow-y:auto}
#scoresList li{padding:4px;font-size:14px;list-style:decimal}
#scoresList li span{float:right;font-variant-numeric:tabular-nums;color:#ffe68d}
@media(max-width:600px){
  #menu #play{width:76px;height:76px;min-width:76px}
  #classicActions button{width:57px;height:54px}
  #menu .card{padding:12px 16px}
}

/* Stage text and Continue screen: resources/menus/infoFrame.jpg and XML textSub. */
#stageIntroOverlay{position:fixed;inset:0;z-index:12;display:grid;place-items:center;
  background:rgba(1,20,40,.7);backdrop-filter:blur(4px);padding:12px}
.stage-intro-card{width:min(92vw,590px);max-height:95vh;overflow:auto;
  min-height:min(70vh,430px);padding:44px clamp(30px,6vw,66px) 35px;
  background:linear-gradient(rgba(11,55,77,.18),rgba(9,31,48,.45)),url("assets/feeding-original/ui/menus/infoframe.jpg") center/100% 100% no-repeat;
  color:#f5f6ff;text-shadow:0 2px 4px #001b30;text-align:center}
.stage-intro-card h2{font-size:clamp(20px,3vw,26px);line-height:1.15;margin:0 0 5px;color:#ffedaa}
.stage-intro-card h3{font-size:clamp(14px,2vw,17px);font-style:italic;margin:0 0 15px;color:#b5f7ff}
.stage-intro-card p{font-size:clamp(12px,1.45vw,15px);line-height:1.35;
  white-space:pre-line;text-align:left;margin:9px 0;color:#ecf7ff}
.stage-intro-card #introObjective{text-align:center;color:#ffdf73;font-weight:700}
#introStart{max-width:150px;height:56px;margin:17px auto 0;
  background:url("assets/feeding-original/ui/menus/genericbuttonnormal.png") center/100% 100% no-repeat;
  border:0;border-radius:0;box-shadow:none;font-size:16px;color:#fff;padding:6px}
#introStart:hover{background-image:url("assets/feeding-original/ui/menus/genericbuttonhigh.png")}
@media(max-width:600px){
  .stage-intro-card{min-height:0;max-height:85vh;padding:31px 26px 18px}
  .stage-intro-card h2{font-size:21px}
  .stage-intro-card h3{font-size:15px}
  .stage-intro-card p{font-size:12px;line-height:1.23;margin:6px 0}
  #introStart{margin:10px auto 0;height:45px}
}

.map-select-btn{margin-top:7px;padding:8px 12px;background:linear-gradient(#0d749b,#045174);border:1px solid #76e4ff;box-shadow:none;font-size:13px}
#mapOverlay{position:fixed;inset:0;z-index:14;display:grid;place-items:center;
  background:rgba(0,21,43,.84);padding:12px;backdrop-filter:blur(5px)}
.map-dialog{width:min(96vw,690px);max-height:96vh;overflow:auto;text-align:center;
  padding:10px clamp(8px,2vw,16px) 16px;
  border-radius:12px;border:2px solid #79e8ff;
  background:linear-gradient(#0a476c,#042b4a);box-shadow:0 12px 50px #001a}
.map-dialog h2{margin:3px 0 10px;font-size:22px;color:#ffe8aa;text-shadow:1px 2px #24313d}
#mapPanel{position:relative;aspect-ratio:640/480;width:100%;border-radius:3px;overflow:hidden;
  background:url("assets/feeding-original/ui/menus/mapbg.jpg") center/100% 100% no-repeat}
#mapPoints{position:absolute;inset:0}
#mapPoints button{position:absolute;width:17px;height:17px;min-width:0;margin:0;padding:0;
  transform:translate(-50%,-50%);border-radius:50%;
  border:2px solid #fff1ba;background:radial-gradient(circle at 30% 30%,#ffe59a,#b97418);
  box-shadow:0 2px 6px #002b33,0 0 0 2px #234b66;
  font-size:0;color:transparent;cursor:pointer}
#mapPoints button:hover{width:22px;height:22px;box-shadow:0 0 10px 3px #fff4c3}
#mapPoints button.selected{background:radial-gradient(circle at 30% 30%,#b3fff3,#00a7b7);
  box-shadow:0 0 7px 4px #56ffff}
#mapPoints button:disabled{background:#777;border-color:#4b6168;opacity:.52;cursor:not-allowed}
#mapHint{font-size:13px;color:#b4e9ef;margin:8px 0 0}
#mapClose{max-width:170px;font-size:14px;padding:9px;margin:9px auto 0}
@media(max-width:600px){
  .map-dialog h2{font-size:17px}
  #mapPoints button{width:11px;height:11px;border-width:1px}
  #mapPoints button:hover{width:14px;height:14px}
  #mapHint{font-size:11px}
}
/* Login is always visible, not an accordion. Name is shown only when signed in. */
#accountPanel{margin:12px 0 4px;text-align:left;border:1px solid rgba(135,221,248,.56);border-radius:12px;background:rgba(0,32,58,.58);padding:10px 11px}
#accountSummary{margin:0 0 5px;font-size:15px;color:#c4f4ff;font-weight:700}
#playerNamePanel{margin:10px 0 4px;text-align:left}
#playerNamePanel label{display:block;font-size:13px;color:#c4f4ff;margin-bottom:6px}
#accountPanel #logoutBtn{font-size:13px;margin:7px 0 2px;padding:8px;background:linear-gradient(#186785,#06415c);box-shadow:none;border:1px solid #65d4f4}
#accountPanel .account-fields{padding:0 0 4px}
#accountPanel label{display:block;font-size:12px;margin:8px 0 4px;color:#dcf6fd}
#accountPanel input{font-size:14px;padding:8px;text-align:left}
#accountPanel .account-actions{display:flex;gap:5px;flex-wrap:wrap}
#accountPanel .account-actions button{flex:1;min-width:85px;margin-top:10px;padding:8px 4px;font-size:12px;background:linear-gradient(#0f7096,#075074);box-shadow:none;border:1px solid #65d4f4}
#accountPanel #accountStatus{font-size:12px;color:#c9e9f7;line-height:1.4;margin:8px 0 0}
#survivalMiniMap{position:fixed;right:14px;bottom:35px;width:154px;height:154px;pointer-events:none;z-index:2;opacity:.86;border:1px solid rgba(171,234,252,.48);border-radius:12px;box-shadow:0 3px 15px rgba(0,9,28,.3)}
@media(max-width:600px){#survivalMiniMap{width:98px;height:98px;right:8px;bottom:40px;opacity:.72}}