:root {
  --bg: #16301f;
  --panel: #fff8e6;
  --ink: #3b2a12;
  --green: #5fbf2a;
  --green-d: #2f7d12;
  --orange: #ff9d1e;
  --orange-d: #b35c00;
  --gold: #ffd84a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); touch-action: none; user-select: none; }
#stage { position: absolute; left: 50%; top: 50%; width: 800px; height: 1600px; transform-origin: 0 0; }
#canvasHost canvas { position: absolute; left: 0; top: 0; width: 800px; height: 1600px; }
#hud, #screen { position: absolute; inset: 0; pointer-events: none; }
#hud > *, #screen > * { pointer-events: auto; }
.hidden { display: none !important; }

button { font-family: inherit; cursor: pointer; border: none; }
.chip { background: rgba(0,0,0,.45); color: #fff; font-weight: 800; font-size: 26px; width: 70px; height: 56px; border-radius: 16px; margin-left: 8px; }

#topbar { position: absolute; left: 0; right: 0; top: 18px; height: 110px; display: flex; align-items: flex-start; justify-content: space-between; padding: 0 20px; }
#waveBox, #wallBox { background: rgba(20,40,10,.62); border-radius: 18px; padding: 10px 16px; color: #fff; font-weight: 800; font-size: 24px; }
#waveBox { width: 250px; font-size: 22px; white-space: nowrap; }
#wallBox { width: 230px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#wallBox .lbl { font-size: 20px; opacity: .85; }
#wallTxt { font-size: 20px; margin-left: auto; }
.bar { width: 100%; height: 16px; background: rgba(0,0,0,.5); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.bar > div { height: 100%; width: 0; background: linear-gradient(#ffe36a, #ffae00); transition: width .2s; }
.bar.hp > div { background: linear-gradient(#7dff5a, #2fa312); }

#lineupBar { position: absolute; left: 20px; top: 136px; display: flex; gap: 8px; }
#lineupBar .li { width: 64px; height: 64px; border-radius: 14px; background: rgba(0,0,0,.35); display: grid; place-items: center; }
#lineupBar img { width: 58px; height: 58px; object-fit: contain; }

#bottom { position: absolute; left: 0; right: 0; bottom: 34px; height: 150px; display: flex; align-items: center; justify-content: center; gap: 22px; }
#energyBox { position: absolute; left: 24px; bottom: 170px; background: rgba(40,25,0,.7); color: var(--gold); font-weight: 900; font-size: 40px; border-radius: 40px; padding: 6px 24px 6px 8px; display: flex; align-items: center; gap: 6px; min-width: 190px; }
#energyIcon { width: 56px; height: 56px; }
.big { width: 300px; height: 128px; border-radius: 28px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 8px 0 rgba(0,0,0,.35); text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.big .t { font-size: 38px; font-weight: 900; }
.big .c { font-size: 30px; font-weight: 800; color: var(--gold); }
.big .c::before { content: "💧 "; }
.big:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.big.green { background: linear-gradient(#7ee03a, var(--green-d)); }
.big.orange { background: linear-gradient(#ffc14d, var(--orange-d)); }
.big.disabled { filter: grayscale(.8) brightness(.8); }

#toast { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 32px; font-weight: 800; padding: 16px 30px; border-radius: 18px; opacity: 0; transition: opacity .25s; pointer-events: none !important; }
#toast.show { opacity: 1; }

/* ---- screens ---- */
.overlay { position: absolute; inset: 0; background: rgba(8,20,8,.72); display: flex; align-items: center; justify-content: center; }
.panel { width: 720px; background: var(--panel); border-radius: 36px; padding: 36px; box-shadow: 0 16px 0 rgba(0,0,0,.3); }
.panel h1 { margin: 0 0 8px; font-size: 64px; text-align: center; color: var(--green-d); letter-spacing: 1px; }
.panel h2 { margin: 0 0 18px; font-size: 40px; text-align: center; }
.panel p.sub { text-align: center; font-size: 24px; margin: 0 0 20px; opacity: .75; }
.levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 26px; }
.lv { height: 104px; border-radius: 22px; background: linear-gradient(#8fe34d, #3c9217); color: #fff; font-size: 38px; font-weight: 900; box-shadow: 0 6px 0 rgba(0,0,0,.25); position: relative; }
.lv small { position: absolute; bottom: 6px; left: 0; right: 0; font-size: 18px; color: var(--gold); }
.lv.locked { background: #b9b2a0; color: #eee; }
.lv.sel { outline: 6px solid var(--orange); }
.plants { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.pc { background: #fff; border-radius: 22px; padding: 8px 6px 10px; text-align: center; border: 5px solid transparent; font-weight: 800; font-size: 19px; line-height: 1.15; }
.pc img { width: 110px; height: 110px; object-fit: contain; display: block; margin: 0 auto 4px; }
.pc.sel { border-color: var(--green); background: #efffe0; }
.pc.locked { opacity: .45; }
.pc .d { font-weight: 600; font-size: 16px; opacity: .7; }
.row { display: flex; gap: 16px; justify-content: center; }
.btn { height: 96px; padding: 0 40px; border-radius: 26px; font-size: 38px; font-weight: 900; color: #fff; background: linear-gradient(#7ee03a, var(--green-d)); box-shadow: 0 7px 0 rgba(0,0,0,.3); }
.btn.gray { background: linear-gradient(#b3ab98, #7b7361); }
.cards { display: flex; flex-direction: column; gap: 16px; }
.card { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: 24px; padding: 16px; border: 5px solid #e8dcc0; text-align: left; font-size: 24px; color: var(--ink); }
.card:hover { border-color: var(--orange); }
.card img { width: 96px; height: 96px; object-fit: contain; flex: none; }
.card b { font-size: 30px; display: block; margin-bottom: 4px; }
.card .q3 { color: #7b3fd6; } .card .q4 { color: #d97a00; } .card .q2 { color: #2d7fd6; }
.card em { font-style: normal; color: #3c9217; font-weight: 900; }
.loading { color: #fff; font-size: 34px; font-weight: 800; text-align: center; }
.loading .bar { width: 520px; height: 26px; margin: 20px auto; }
.result-stars { font-size: 90px; text-align: center; margin: 10px 0 20px; }

.pcw { display: flex; flex-direction: column; gap: 6px; }
.up { height: 44px; border-radius: 14px; background: linear-gradient(#ffd45a, #d98a00); color: #fff; font-weight: 900; font-size: 20px; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.up.no { filter: grayscale(.9) brightness(.9); }

.diffs { margin-bottom: 20px; }
.chip2 { height: 60px; padding: 0 28px; border-radius: 30px; font-size: 26px; font-weight: 800; background: #e8dcc0; color: var(--ink); }
.chip2.on { background: var(--orange); color: #fff; }

.overlay.menubg { background: url(../assets/img/login_bg.jpg) center/cover no-repeat; }
.panel .logo { width: 340px; margin: -10px auto 0; display: block; }
.menubg .panel { background: rgba(255,248,230,.94); }

.langsel { height: 52px; border-radius: 26px; border: 3px solid #e8dcc0; background: #fff; font: inherit; font-size: 24px; font-weight: 700; padding: 0 18px; color: var(--ink); }