/* ==========================================================================
   game.css — Sürü Akını: tuval, menü, HUD, pencereler
   ========================================================================== */

body { background: #3a9d3f; background-image: none; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }

.hud { position: absolute; z-index: 5; left: 0; right: 0; top: 0; padding: calc(10px + var(--safe-t)) 12px 0; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.hud > * { pointer-events: auto; }

.star-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 99px; border: 3px solid #17274d;
    background: rgba(255, 255, 255, 0.92); color: #17274d; font-weight: 900; font-size: 18px; box-shadow: 0 3px 0 rgba(23, 39, 77, 0.35);
}
.star-chip b { min-width: 24px; }
.starico { width: 22px; height: 22px; background: #ffd21f; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.plus { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #17274d; background: linear-gradient(180deg, #5eea6e, #16a34a); color: #fff; font-weight: 900; font-size: 18px; line-height: 1; padding: 0 0 2px; cursor: pointer; }
.round-btn { background: rgba(255, 255, 255, 0.92); border: 3px solid #17274d; box-shadow: 0 3px 0 rgba(23, 39, 77, 0.35); color: #17274d; }
.round-btn svg { fill: #17274d; }

/* ---------- Menü ---------- */
.menu { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: var(--safe-t); pointer-events: none; }
.menu > * { pointer-events: auto; }
.menu-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.logo { text-align: center; margin-top: 4vh; transform: rotate(-3deg); pointer-events: none; }
.logo span { display: block; font-weight: 900; font-style: italic; color: #ffe135; -webkit-text-stroke: 7px #17274d; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(23, 39, 77, 0.35); }
.logo .l1 { font-size: clamp(52px, 17vw, 76px); line-height: 0.95; }
.logo .l2 { font-size: clamp(30px, 10vw, 44px); color: #fff; line-height: 1; }
.menu-bottom { margin-top: auto; padding: 0 14px calc(14px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.best { padding: 5px 16px; border-radius: 99px; background: rgba(23, 39, 77, 0.75); color: #fff; font-weight: 800; font-size: 14px; border: 2px solid rgba(255, 255, 255, 0.6); }
.best b { color: #ffe135; font-size: 18px; margin-left: 6px; }
.play {
    width: min(78%, 300px); height: 74px; border: 4px solid #17274d; border-radius: 40px; cursor: pointer; font-size: 38px; font-weight: 900; font-style: italic; letter-spacing: 0.06em; color: #fff;
    background: linear-gradient(180deg, #ffb52e, #f2531f); text-shadow: 0 3px 0 rgba(23, 39, 77, 0.45);
    box-shadow: 0 7px 0 #17274d, 0 12px 20px rgba(0, 0, 0, 0.3), inset 0 4px 0 rgba(255, 255, 255, 0.4); animation: playPulse 1.5s ease-in-out infinite;
}
.play:active { transform: translateY(4px); box-shadow: 0 3px 0 #17274d; }
@keyframes playPulse { 50% { transform: scale(1.05); } }
.menu-row { display: flex; gap: 10px; width: 100%; max-width: 380px; }
.mbtn { position: relative; flex: 1; height: 62px; border-radius: 16px; border: 3px solid #17274d; background: rgba(255, 255, 255, 0.92); color: #17274d; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; box-shadow: 0 4px 0 rgba(23, 39, 77, 0.4); }
.mbtn span { font-size: 24px; line-height: 1; }
.mbtn small { font-size: 10px; font-weight: 900; }
.mbtn:active { transform: translateY(3px); box-shadow: none; }
.dot { position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #ef4444; border: 2.5px solid #fff; color: #fff; font-style: normal; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.foot { font-size: 10px; color: rgba(255, 255, 255, 0.85); text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

/* ---------- Pencereler ---------- */
.modal-card { background: linear-gradient(180deg, #3a8cf0, #1f58c8); border: 4px solid #17274d; max-width: 360px; box-shadow: 0 8px 0 rgba(23, 39, 77, 0.5), 0 20px 40px rgba(0, 0, 0, 0.4); }
.modal-card.wide { max-width: 380px; }
.modal-card h2 { color: #fff; -webkit-text-stroke: 5px #17274d; paint-order: stroke fill; font-style: italic; }
.modal-card h2 small { -webkit-text-stroke: 0; color: #d6e8ff; font-style: normal; }
.modal-card .lead { color: #fff; }
.pillbar { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(23, 39, 77, 0.45); margin-bottom: 10px; }
.pillbar button { flex: 1; border: 0; border-radius: 11px; padding: 8px 4px; background: transparent; color: #d6e8ff; font-weight: 900; font-size: 12.5px; cursor: pointer; }
.pillbar button.on { background: linear-gradient(180deg, #ffd23a, #f59300); color: #3a2200; }
.list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; margin: 4px -4px; padding: 2px 4px; }
.row-item { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 14px; background: rgba(255, 255, 255, 0.92); color: #17274d; border: 3px solid #17274d; text-align: left; }
.row-item .thumb { flex: none; width: 50px; height: 50px; border-radius: 12px; background: #dcecff; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.row-item .info { flex: 1; min-width: 0; }
.row-item .info b { display: block; font-size: 14px; }
.row-item .info small { display: block; font-size: 11px; color: #4a5f8f; font-weight: 700; }
.btn-buy { flex: none; min-width: 78px; padding: 8px 10px; border-radius: 12px; font-size: 13px; }
.btn.poor { filter: grayscale(0.7) brightness(0.85); }
.tag { display: inline-block; padding: 2px 6px; border-radius: 6px; background: #ef4444; color: #fff; font-size: 9.5px; font-weight: 900; margin-left: 6px; }
.progress { height: 8px; border-radius: 99px; background: rgba(23, 39, 77, 0.25); overflow: hidden; margin: 4px 0; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #4ade80, #16a34a); }
.chip { background: rgba(255, 255, 255, 0.9); color: #17274d; border: 2px solid #17274d; }
.chip.good { background: #b8f5c8; }
.fine { color: #d6e8ff; font-size: 11px; text-align: center; margin: 8px 0 0; }
.center { text-align: center; }
.big-num { font-size: 56px; font-weight: 900; color: #fff; -webkit-text-stroke: 8px #17274d; paint-order: stroke fill; text-align: center; line-height: 1.05; }
.res-row { display: flex; justify-content: center; gap: 10px; margin: 8px 0; }
.res-row .chip { font-size: 14px; padding: 6px 12px; font-weight: 900; }
.newbest { text-align: center; font-size: 22px; font-weight: 900; font-style: italic; color: #ffe135; -webkit-text-stroke: 5px #17274d; paint-order: stroke fill; animation: nb 0.8s ease-in-out infinite alternate; }
@keyframes nb { to { transform: scale(1.08) rotate(-2deg); } }
.day-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.day { padding: 6px 2px; border-radius: 10px; background: rgba(255, 255, 255, 0.85); color: #17274d; border: 2.5px solid #17274d; font-size: 10.5px; font-weight: 900; text-align: center; }
.day.today { background: #ffe96b; }
.day.past { opacity: 0.5; }
.day b { display: block; font-size: 14px; }

/* Şablonlar */
.preview { position: relative; display: flex; justify-content: center; align-items: center; height: 150px; border-radius: 16px; border: 3px solid #17274d; overflow: hidden; margin-bottom: 8px; background: #8cc8ff; }
.preview canvas { max-width: 100%; max-height: 100%; }
.cell-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 30vh; overflow-y: auto; padding: 4px; }
.cell { position: relative; border-radius: 12px; border: 3px solid #17274d; background: rgba(255, 255, 255, 0.92); padding: 4px 2px 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #17274d; min-height: 74px; }
.cell small { font-size: 9.5px; font-weight: 900; text-align: center; }
.cell.sel { background: #ffe96b; box-shadow: 0 0 0 3px #fff; }
.cell.locked .thumb { filter: grayscale(0.8) brightness(0.75); }
.cell .lock { position: absolute; right: 2px; bottom: 14px; font-style: normal; font-size: 13px; }
.cell .tick { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #16a34a; border: 2px solid #fff; color: #fff; font-style: normal; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.skin-name { text-align: center; color: #fff; font-weight: 900; font-size: 17px; -webkit-text-stroke: 4px #17274d; paint-order: stroke fill; margin: 2px 0 6px; }

/* ---------- Sürü Akını ek stiller ---------- */
.level-chip { position: absolute; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); padding: 6px 16px; border-radius: 99px; border: 3px solid #1d2a44; background: rgba(255, 255, 255, 0.92); color: #1d2a44; font-weight: 900; font-size: 15px; letter-spacing: 0.04em; box-shadow: 0 3px 0 rgba(29, 42, 68, 0.35); pointer-events: none; white-space: nowrap; }
.logo span { -webkit-text-stroke: 7px #1d2a44; }
.logo .l1 { color: #ffe135; }
.logo .l2 { color: #fff; }
.play { background: linear-gradient(180deg, #7dec52, #2fa83a); border-color: #1d2a44; box-shadow: 0 7px 0 #1d2a44, 0 12px 20px rgba(0, 0, 0, 0.3), inset 0 4px 0 rgba(255, 255, 255, 0.4); }
.play:active { box-shadow: 0 3px 0 #1d2a44; }
.mbtn { height: 58px; }
.mbtn small { font-size: 9.5px; }
.menu-row { gap: 7px; }
.starrow { display: flex; justify-content: center; gap: 6px; margin: 2px 0 4px; }
.starrow span { font-size: 40px; line-height: 1; color: rgba(255, 255, 255, 0.28); -webkit-text-stroke: 3px #1d2a44; paint-order: stroke fill; }
.starrow span.on { color: #ffd21f; animation: starpop 0.5s ease-out both; }
.starrow span.on:nth-child(2) { animation-delay: 0.12s; }
.starrow span.on:nth-child(3) { animation-delay: 0.24s; }
@keyframes starpop { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.25) rotate(8deg); } to { transform: scale(1) rotate(0); opacity: 1; } }
.lv { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: #1d2a44; color: #fff; font-size: 10px; font-weight: 900; }

.res-row { flex-wrap: wrap; }
.res-row .chip.good { font-size: 12px; padding: 5px 10px; }