:root {
  color-scheme: light;
  --ink:#56341e;
  --accent:#e9772c;
  --accent-dark:#a84d1d;
  --body:#d98a4d;
  --panel:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,241,198,.78));
  --glass-border:rgba(141,87,34,.82);
  --stage-image:none;
  --play-width:410px;
  --play-height:600px;
  --play-top:47px;
}
* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden;background:var(--body) var(--stage-image) center/cover no-repeat;font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif; }
button { font:inherit; }
#viewport { position:relative;width:100%;height:100%;overflow:hidden;touch-action:none; }
#stage { position:absolute;left:50%;top:50%;width:1280px;height:800px;transform:translate(-50%,-50%) scale(var(--stage-scale,1));transform-origin:center;overflow:hidden;border-radius:0;color:var(--ink);background:transparent;box-shadow:none; }
#stage::after { display:none; }
.layout { position:absolute;inset:25px 34px 24px;display:grid;grid-template-columns:260px 560px 260px;justify-content:space-between;align-items:center;z-index:1; }
.side { height:680px;display:flex;flex-direction:column;justify-content:space-between;padding:30px 0 24px; }
.bubble { position:relative;min-height:178px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:50%;background:var(--panel);box-shadow:inset 12px 16px 22px rgba(255,255,255,.5),inset -11px -13px 25px rgba(30,12,4,.11),0 14px 30px rgba(25,12,5,.2);backdrop-filter:blur(9px); }
.bubble::before { content:"";position:absolute;width:58px;height:24px;left:35px;top:30px;border-radius:50%;transform:rotate(-28deg);background:rgba(255,255,255,.58);filter:blur(2px); }
.label { font-weight:1000;letter-spacing:.08em;font-size:23px;color:var(--ink);text-shadow:0 2px rgba(255,255,255,.75); }
#score { font-size:70px;line-height:.92;color:var(--accent);font-weight:1000;text-shadow:0 3px rgba(255,255,255,.82),0 7px 15px rgba(25,12,5,.2); }
.best { margin-top:11px;font-weight:900;opacity:.78; }
.card { padding:18px;border:3px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:26px;background:var(--panel);box-shadow:0 14px 28px rgba(20,10,5,.18),inset 0 2px rgba(255,255,255,.62);backdrop-filter:blur(10px); }
.card-title { text-align:center;font-size:21px;font-weight:1000;letter-spacing:.03em; }
.card-subtitle { margin-top:3px;text-align:center;opacity:.7;font-size:10px;font-weight:1000;letter-spacing:.1em; }
.challenge-stats { display:flex;justify-content:center;gap:7px;margin-top:8px; }
.challenge-stat { padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.48);font-size:10px;font-weight:1000;letter-spacing:.04em; }
.rank-row { margin-top:7px;display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:5px;padding:7px 10px;border-radius:13px;background:rgba(255,255,255,.46);font-size:12px;font-weight:900; }
.rank-name { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.rank-row.now { background:color-mix(in srgb,var(--accent) 22%,#fff);color:var(--accent-dark); }
#next-fruit { width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(20,10,5,.25)); }
.evolution { position:relative;height:270px;margin-top:8px; }
.evo-ring { position:absolute;left:50%;top:50%;width:205px;height:205px;transform:translate(-50%,-50%);border-radius:50%;border:22px solid color-mix(in srgb,var(--accent) 26%,transparent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 20%,transparent),0 0 25px rgba(255,255,255,.3); }
.evo-fruit { position:absolute;width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(20,10,5,.28)); }
.game-column { position:relative;height:751px;display:flex;flex-direction:column;align-items:center; }
#tank-wrap { position:absolute;left:50%;top:var(--play-top);width:497px;height:calc(var(--play-height) + 32px);transform:translateX(-50%); }
#tank { position:absolute;inset:0 14px 8px;overflow:hidden;touch-action:none;cursor:crosshair;border:14px solid transparent;border-top-width:10px;border-radius:23px 23px 32px 32px;background:transparent;box-shadow:none; }
#tank::before { display:none; }
#physics { position:absolute;inset:0;z-index:2; }
#physics canvas { display:block;width:100%!important;height:100%!important; }
#danger { position:absolute;z-index:6;left:12px;right:12px;top:105px;border-top:3px dashed color-mix(in srgb,var(--accent) 65%,#ef4444);pointer-events:none; }
#danger span { position:absolute;left:50%;transform:translate(-50%,-52%);padding:4px 12px;border-radius:999px;background:var(--accent);color:white;font-size:11px;font-weight:1000;letter-spacing:.11em;white-space:nowrap; }
#dropper { position:absolute;z-index:8;left:50%;top:-12px;width:138px;height:105px;transform:translateX(-50%);transition:transform .12s ease;pointer-events:none; }
#dropper.drop { transform:translateX(-50%) scale(1.12,.84); }
#cloud { width:100%;height:100%;filter:drop-shadow(0 8px 9px rgba(20,10,5,.22)); }
#preview { position:absolute;left:50%;bottom:-24px;width:54px;height:54px;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 5px 5px rgba(20,10,5,.22)); }
#guide { position:absolute;z-index:7;left:50%;top:70px;height:calc(var(--play-height) - 85px - var(--floor-visual-inset, 0px));border-left:3px dashed color-mix(in srgb,var(--ink) 32%,transparent);pointer-events:none; }
#glass-base { display:none; }
.controls { position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:max-content;padding:7px 10px 7px 17px;border-radius:999px;color:white;background:color-mix(in srgb,var(--ink) 82%,transparent);font-size:14px;font-weight:900;box-shadow:0 5px 12px rgba(20,10,5,.22); }
.key { display:inline-block;padding:3px 8px;margin:0 4px;border-radius:7px;background:var(--accent);color:white; }
.share-button { margin-left:8px;padding:5px 10px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(255,255,255,.14);color:white;font-size:11px;font-weight:1000;cursor:pointer; }
#toast { position:absolute;z-index:20;left:50%;top:39%;transform:translate(-50%,-50%) scale(.85);opacity:0;color:white;font-size:42px;font-weight:1000;text-shadow:0 4px var(--accent-dark),0 8px 18px rgba(20,10,5,.4);pointer-events:none;transition:.18s ease; }
#toast.show { opacity:1;transform:translate(-50%,-50%) scale(1); }
#game-over { position:absolute;z-index:30;inset:0;display:none;place-items:center;background:rgba(20,10,5,.38);backdrop-filter:blur(6px); }
#game-over.show { display:grid; }
.modal { width:350px;padding:30px;text-align:center;border-radius:30px;border:4px solid var(--accent);background:var(--panel);box-shadow:0 20px 60px rgba(20,10,5,.4); }
.modal h2 { margin:0 0 8px;font-size:42px; }
.modal p { margin:0 0 20px;font-weight:800;opacity:.76; }
.modal-actions { display:flex;justify-content:center;gap:12px; }
.modal button { border:0;padding:13px 22px;border-radius:18px;background:linear-gradient(color-mix(in srgb,var(--accent) 78%,#fff),var(--accent));color:white;font-weight:1000;cursor:pointer;box-shadow:0 6px 0 var(--accent-dark); }
.modal button.secondary { background:linear-gradient(#9abf62,#6c9a3f);box-shadow:0 6px 0 #4f762e; }
#official-link { position:relative;z-index:40;display:block;width:max-content;max-width:260px;margin:0 auto;padding:8px 13px;border-radius:999px;border:2px solid rgba(255,255,255,.68);background:color-mix(in srgb,var(--ink) 80%,transparent);color:white;font-size:12px;font-weight:1000;letter-spacing:.04em;text-align:center;text-decoration:none;box-shadow:0 5px 16px rgba(20,10,5,.28); }
#stage.mobile { width:640px;height:960px;border-radius:0;background-position:center; }
#stage.mobile { --play-width:430px;--play-height:var(--mobile-play-height,520px);--play-top:0px; }
#stage.mobile #tank-wrap { width:438px; }
#stage.mobile .layout { inset:16px;display:block; }
#stage.mobile .side { height:auto;padding:0; }
#stage.mobile .side .bubble { position:absolute;top:0;width:225px;min-height:125px; }
#stage.mobile .side:first-child .bubble { left:var(--mobile-side-inset,20px); }
#stage.mobile .side:last-child .bubble { right:var(--mobile-side-inset,20px); }
#stage.mobile .bubble::before { width:45px;height:18px;left:27px;top:22px; }
#stage.mobile .label { font-size:19px; }
#stage.mobile #score { font-size:52px; }
#stage.mobile .best { margin-top:7px;font-size:12px; }
#stage.mobile #next-fruit { width:68px;height:68px; }
#stage.mobile .side .card { display:none; }
#stage.mobile .game-column { position:absolute;left:56px;top:146px;width:528px;height:751px; }
#stage.mobile .controls { display:none; }
#stage.mobile #official-link { position:absolute;left:50%;bottom:14px;width:260px;margin:0;padding:7px 10px;transform:translateX(-50%); }