/* ============================================================================
   game.css — HUD, menus and screens. Moved out of index.html.
   ============================================================================ */
@font-face { font-family: 'Fredoka'; src: url('../assets/fonts/fredoka.woff2') format('woff2'); font-weight: 300 700; }
:root {
  --panel: rgba(34, 26, 22, 0.84);
  --panel-edge: rgba(255, 240, 210, 0.18);
  --cream: #fff6dc;
  --pink: #ff8fb8;
  --yellow: #ffd94a;
  --green: #5fe07a;
  --blue: #4fa0ff;
  --red: #ff5a6a;
  --zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 9 L6 3 L12 9 L18 3 L24 9' fill='none' stroke='rgba(255,255,255,0.045)' stroke-width='2'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd8f0; font-family: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif; color: var(--cream); user-select: none; -webkit-user-select: none; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
canvas#overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud.hidden, .hidden { display: none !important; }
.panel { background: var(--panel) var(--zig); border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 0 0 2px var(--panel-edge); }

/* ---------- top-left resources */
#res { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; pointer-events: auto; }
.pill { display: flex; align-items: center; gap: 6px; padding: 5px 14px 5px 8px; font-size: 20px; font-weight: 600; letter-spacing: 0.5px; }
.pill svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35)); }
.pill .num { min-width: 36px; text-shadow: 0 2px 0 rgba(0,0,0,0.4); }
.pill.bump { animation: bump 0.25s; }
@keyframes bump { 50% { transform: scale(1.12); } }
#clock { font-size: 16px; opacity: 0.85; padding: 6px 12px; }

/* ---------- top-right commander */
#cmdbox { position: absolute; top: 14px; right: 14px; width: 300px; padding: 10px 12px 10px 10px; display: flex; gap: 10px; pointer-events: auto; }
#cmdbox .portrait { width: 64px; height: 64px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff8e0, #f0c890); flex: none; display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); }
#cmdbox .portrait img { width: 64px; height: 64px; }
#cmdbox .info { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.hearts { display: flex; gap: 1px; flex-wrap: wrap; }
.hearts svg { width: 15px; height: 15px; }
.bar { height: 9px; border-radius: 6px; background: rgba(0,0,0,0.45); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(#ffe880, #f0b020); transition: width 0.15s; }
.bar.low > i { background: linear-gradient(#ff9a9a, #e04040); animation: blink 0.5s infinite alternate; }
@keyframes blink { to { opacity: 0.5; } }
.cmdrow { display: flex; justify-content: space-between; align-items: center; }
.slots { display: flex; gap: 4px; }
.slots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(0,0,0,0.4); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); }
.slots i.on { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.order { background: var(--pink); color: #3a1020; border-radius: 10px; padding: 1px 8px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.key { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--cream); color: #3a2a1a; font-size: 11px; font-weight: 700; box-shadow: 0 2px 0 rgba(0,0,0,0.35); }

/* ---------- bottom bar */
#bottom { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 10px; align-items: flex-end; pointer-events: none; }
#mmwrap { padding: 8px; pointer-events: auto; flex: none; }
#minimap { display: block; width: 256px; height: 192px; border-radius: 12px; image-rendering: auto; cursor: pointer; }
#selbox { flex: 1; min-height: 118px; padding: 12px 16px; pointer-events: auto; display: flex; gap: 14px; align-items: center; max-width: 560px; }
#selbox .portrait { width: 92px; height: 92px; border-radius: 16px; background: radial-gradient(circle at 50% 40%, #fff8e0, #f0c890); flex: none; display: grid; place-items: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15); }
#selbox .portrait img { width: 92px; height: 92px; }
#selbox .name { font-size: 22px; font-weight: 700; color: #fff; }
#selbox .sub { font-size: 14px; opacity: 0.85; }
#selbox .desc { font-size: 13px; opacity: 0.7; margin-top: 4px; }
.hpbar { height: 10px; width: 200px; border-radius: 6px; background: rgba(0,0,0,0.45); overflow: hidden; margin: 6px 0 2px; }
.hpbar > i { display: block; height: 100%; background: linear-gradient(#9cff9c, #30c050); }
.grid { display: flex; flex-wrap: wrap; gap: 5px; }
.mini { width: 40px; height: 40px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff8e0, #e8c090); position: relative; cursor: pointer; }
.mini img { width: 40px; height: 40px; }
.mini > b { position: absolute; left: 4px; right: 4px; bottom: 2px; height: 4px; border-radius: 2px; background: rgba(0,0,0,0.4); overflow: hidden; }
.mini > b > i { display: block; height: 100%; background: #50e070; }
.queue { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.queue .mini { width: 46px; height: 46px; }
.queue .mini img { width: 46px; height: 46px; }
.queue .mini.first::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p, 0%); background: var(--yellow); border-radius: 2px; }

#card { padding: 10px; pointer-events: auto; display: grid; grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(2, 72px); gap: 8px; flex: none; }
.btn { position: relative; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fffaf0 0 52%, #f0d9a8 53% 60%, rgba(40,30,24,0.0) 61%), radial-gradient(circle, rgba(255,255,255,0.10), rgba(0,0,0,0.25)); box-shadow: inset 0 0 0 3px rgba(255,226,160,0.85), 0 4px 10px rgba(0,0,0,0.35); cursor: pointer; display: grid; place-items: center; color: #3a2a1a; transition: transform 0.08s, box-shadow 0.08s; }
.btn:hover { transform: scale(1.07); box-shadow: inset 0 0 0 3px #ffe9a8, 0 0 14px rgba(255,220,120,0.55), 0 4px 10px rgba(0,0,0,0.35); }
.btn:active, .btn.press { transform: scale(0.93); }
.btn.off { filter: grayscale(0.6) brightness(0.85); }
.btn .cdov { position: absolute; inset: 4px; border-radius: 50%; pointer-events: none; background: conic-gradient(rgba(20,14,10,0.62) var(--cd), transparent 0); }
.btn.empty { visibility: hidden; }
.btn img { width: 54px; height: 54px; pointer-events: none; }
.btn .glyph { font-size: 30px; pointer-events: none; }
.btn .key { position: absolute; top: -4px; left: -4px; background: var(--yellow); min-width: 22px; height: 22px; font-size: 13px; border-radius: 11px; }
.btn .cost { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #a8ffb8; background: rgba(34,26,22,0.92); padding: 0 6px; border-radius: 8px; white-space: nowrap; }
.btn .cost .s { color: #ffb0cc; }

#tip { position: absolute; bottom: 196px; right: 12px; width: 280px; padding: 10px 14px; font-size: 14px; pointer-events: none; }
#tip b { font-size: 17px; color: #fff; }
#tip .c { color: var(--green); } #tip .s2 { color: var(--pink); }

/* ---------- dialog box (remake style) */
#dialog { position: absolute; left: 50%; transform: translateX(-50%); bottom: 212px; width: min(640px, 70vw); min-height: 76px; padding: 16px 30px 22px; font-size: 19px; line-height: 1.45; text-align: center; pointer-events: auto; border-radius: 22px; cursor: pointer; }
#dialog .speaker { position: absolute; top: -14px; left: 26px; background: var(--panel); padding: 2px 14px; border-radius: 12px; font-size: 15px; color: #ffe8c8; box-shadow: inset 0 0 0 2px var(--panel-edge); }
#dialog em { color: var(--pink); font-style: normal; }
#dialog strong { color: var(--yellow); font-weight: 600; }
#dialog .more { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 14px; animation: bob 0.6s infinite alternate; opacity: 0.85; }
@keyframes bob { to { transform: translate(-50%, 4px); } }

#toasts { position: absolute; top: 64px; left: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 420px; }
.rally { color: #ff9a9a; } .rally.ready { color: #8cff9c; }
.toast { padding: 6px 16px; font-size: 16px; border-radius: 14px; animation: toastIn 0.25s ease-out; }
.toast.big { font-size: 19px; padding: 8px 20px; color: #ffe0e8; box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 0 0 2px rgba(255,120,140,0.5); }
.toast.good { color: #d8ffd8; }
.toast.fade { opacity: 0; transition: opacity 0.6s; }
@keyframes toastIn { from { transform: translateY(-12px) scale(0.9); opacity: 0; } }

#help { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(820px, 92vw); padding: 26px 34px; font-size: 16px; line-height: 1.6; pointer-events: auto; }
#help h2 { margin: 0 0 10px; color: var(--yellow); font-weight: 600; }
#help .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 30px; }
#help .key { margin-right: 4px; }

/* ---------- title screen */
#title { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: auto;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0) 30%, rgba(30,60,90,0.35) 100%); }
#logo { font-size: clamp(64px, 11vw, 150px); font-weight: 700; color: #fff; letter-spacing: 4px; line-height: 0.95;
  text-shadow: 0 6px 0 #2a6ad0, 0 9px 0 #1a3a80, 0 14px 24px rgba(0,0,0,0.35); -webkit-text-stroke: 3px #1a3a80; paint-order: stroke fill; animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
#logo .egg { display: inline-block; width: 0.62em; height: 0.8em; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; background: radial-gradient(circle at 35% 30%, #fff, #f3eee8 60%, #d8d0d0); vertical-align: -0.05em; position: relative; -webkit-text-stroke: 0; box-shadow: 0 6px 0 #2a6ad0, 0 9px 0 #1a3a80; margin: 0 0.02em; }
#logo .egg::before, #logo .egg::after { content: ''; position: absolute; border-radius: 50%; background: #ff8fb8; }
#logo .egg::before { width: 22%; height: 16%; left: 22%; top: 28%; } #logo .egg::after { width: 18%; height: 14%; right: 22%; top: 52%; }
#subtitle { margin-top: 14px; font-size: clamp(18px, 2.4vw, 30px); color: #fff; text-shadow: 0 3px 0 rgba(20,40,90,0.6); font-weight: 600; letter-spacing: 2px; }
#menu { margin-top: 38px; display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 22px 34px; }
#menu .row { display: flex; gap: 10px; }
.mbtn { font-family: inherit; font-size: 22px; font-weight: 600; padding: 10px 26px; border: 0; border-radius: 16px; cursor: pointer; color: #3a2a1a; background: linear-gradient(#fff8e6, #f2dcae); box-shadow: 0 4px 0 #b8905a; transition: transform 0.06s; }
.mbtn:hover, .mbtn.sel { transform: translateY(-2px); background: linear-gradient(#fffbe8, #ffe08a); }
.mbtn.diff.sel { box-shadow: 0 4px 0 #b8905a, 0 0 0 3px var(--pink); }
.mbtn.go { font-size: 28px; padding: 12px 44px; background: linear-gradient(#bff7a8, #6ad86a); box-shadow: 0 5px 0 #2f8a3a; color: #10381a; }
#titlehint { margin-top: 18px; font-size: 15px; opacity: 0.9; text-shadow: 0 2px 0 rgba(0,0,0,0.4); }

#over { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; background: rgba(20,30,50,0.25); }
#over .panel { padding: 30px 44px; text-align: center; min-width: 420px; }
#over h1 { margin: 0; font-size: 56px; color: #fff; text-shadow: 0 4px 0 #2a6ad0; }
#over.lose h1 { text-shadow: 0 4px 0 #a02040; }
#over .stats { margin: 16px 0 22px; font-size: 18px; line-height: 1.7; }
#pause { position: fixed; inset: 0; display: grid; place-items: center; font-size: 48px; font-weight: 700; color: #fff; text-shadow: 0 4px 0 #2a6ad0; pointer-events: none; background: rgba(0,0,0,0.15); }
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #8fd8f0; color: #fff; font-size: 28px; font-weight: 600; text-shadow: 0 3px 0 #2a6ad0; z-index: 10; }
#loading .dots::after { content: ''; animation: dots 1s steps(4) infinite; }
@keyframes dots { 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }