/* ===== Кристальный Остров — «пухлый» casual-game UI ===== */
:root{
  --lav:#cfd6f7; --lav2:#b9c3ef; --lav-border:#aab4e8; --lav-shadow:#98a3dd;
  --ink:#2a3576;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;background:#7e8fdd;
  font-family:'Nunito',system-ui,sans-serif;color:#fff;user-select:none;-webkit-user-select:none;touch-action:none;}
#app{position:fixed;inset:0;}
canvas{display:block;}
.hidden{display:none !important;}

/* push-кнопки (общая база) */
.puffy,.tbtn,.ab,.buy,.mini,#action{
  font-family:'Nunito',sans-serif;font-weight:800;color:#fff;border:3px solid rgba(255,255,255,.9);
  cursor:pointer;background:linear-gradient(180deg,var(--c1,#9fb0e8),var(--c2,#7184d8));
  box-shadow:0 5px 0 var(--sh,#5a68b8),0 8px 16px rgba(20,20,60,.28),inset 0 3px 0 rgba(255,255,255,.5);
  text-shadow:0 2px 2px rgba(0,0,0,.2);transition:transform .07s,box-shadow .07s;}
.puffy:active,.tbtn:active,.ab:active,.buy:active,.mini:active,#action:active{
  transform:translateY(4px);box-shadow:0 1px 0 var(--sh,#5a68b8),0 3px 8px rgba(20,20,60,.25),inset 0 3px 0 rgba(255,255,255,.4);}
.p-orange{--c1:#ffd24a;--c2:#ff9e2c;--sh:#d97913;}
.p-pink{--c1:#ff86db;--c2:#e152bd;--sh:#b5279a;}
.p-blue{--c1:#7fd0ff;--c2:#4aa6f0;--sh:#2a7ec8;}
.p-teal{--c1:#6ff0d6;--c2:#2bbf9c;--sh:#1d9079;}
.p-green{--c1:#bdf07a;--c2:#7fcf4a;--sh:#4f9f2f;}
.p-purple{--c1:#c9a3ff;--c2:#9a6cf0;--sh:#6f3fd0;}

.puffy{border-radius:22px;padding:14px 22px;font-size:19px;letter-spacing:.5px;}

/* плашка-заголовок (магента-пилюля) */
.pill-title{font-family:'Nunito';font-weight:900;color:#fff;letter-spacing:1px;display:inline-block;
  background:linear-gradient(180deg,#ff86db,#e152bd);border:3px solid #fff;border-radius:999px;
  padding:9px 30px;font-size:23px;box-shadow:0 5px 0 #b5279a,0 9px 16px rgba(20,20,60,.3),inset 0 3px 0 rgba(255,255,255,.5);
  text-shadow:0 2px 2px rgba(0,0,0,.22);}
.pill-title.big{font-size:30px;}

/* ===== ИКОНКИ (CSS, без эмодзи) ===== */
.ico{width:18px;height:18px;display:inline-block;flex:none;}
.ico.sm{width:13px;height:13px;}
.ico-crystal{background:linear-gradient(180deg,#8af3ff,#33c2e6);clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
.ico-coin{border-radius:50%;background:linear-gradient(180deg,#ffe784,#ffb33c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 1px 1px rgba(0,0,0,.2);}
.ico-pet{border-radius:52% 52% 46% 46%;background:linear-gradient(180deg,#dcabff,#a86cf0);}
.ico-sun{border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff4ad,#ffce4a);}
.ico-storm{border-radius:50%;background:linear-gradient(180deg,#9fb0d8,#5b6ea0);}
.ico-player{border-radius:50%;background:linear-gradient(180deg,#8fe6cf,#2bbf9c);}

/* ===== HUD ===== */
#hud{position:fixed;top:12px;left:12px;display:flex;gap:8px;flex-wrap:wrap;z-index:5;pointer-events:none;max-width:64vw;}
.chip{font-family:'Nunito';font-weight:600;background:linear-gradient(180deg,#fdfdff,#e7ebfb);border:3px solid #fff;
  border-radius:16px;padding:6px 12px;color:#3a4790;display:flex;align-items:center;gap:7px;
  box-shadow:0 4px 0 #b9c2e8,0 6px 12px rgba(20,20,60,.2);font-size:15px;}
.chip b{font-family:'Nunito';font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;}

#side{position:fixed;top:12px;right:12px;z-index:9;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;}
#whoami{pointer-events:auto;font-family:'Nunito';font-weight:600;background:linear-gradient(180deg,#fdfdff,#e7ebfb);border:3px solid #fff;
  border-radius:16px;padding:6px 12px;color:#3a4790;display:flex;align-items:center;gap:8px;font-size:14px;
  box-shadow:0 4px 0 #b9c2e8,0 6px 12px rgba(20,20,60,.2);}
.menu-btn{pointer-events:auto;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:900;color:#fff;letter-spacing:.5px;
  border:3px solid rgba(255,255,255,.9);border-radius:18px;padding:11px 24px;font-size:17px;
  background:linear-gradient(180deg,#ff86db,#e152bd);box-shadow:0 5px 0 #b5279a,0 8px 16px rgba(20,20,60,.28),inset 0 3px 0 rgba(255,255,255,.5);text-shadow:0 2px 2px rgba(0,0,0,.2);transition:transform .07s,box-shadow .07s;}
.menu-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #b5279a,inset 0 3px 0 rgba(255,255,255,.4);}
#online{color:#2bbf9c;font-family:'Nunito';font-weight:900;}
#logout{background:none;border:none;color:#9aa4d0;font-size:12px;text-decoration:underline;cursor:pointer;font-family:'Nunito';font-weight:800;}

/* ===== Тосты ===== */
#toasts{position:fixed;top:74px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:7px;z-index:6;pointer-events:none;}
.toast{font-family:'Nunito';font-weight:600;background:linear-gradient(180deg,#fff,#eef0ff);color:var(--ink);
  border:3px solid #fff;border-radius:16px;padding:9px 18px;font-size:15px;text-align:center;
  box-shadow:0 5px 0 #b9c2e8,0 8px 18px rgba(20,20,60,.3);animation:pop .3s ease;}
@keyframes pop{from{transform:translateY(-12px) scale(.9);opacity:0;}to{transform:none;opacity:1;}}

/* ===== Нижняя зона ===== */
#bottom{position:fixed;left:0;right:0;bottom:14px;z-index:7;display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;}
#abilitybar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:94vw;}
.ab{pointer-events:auto;position:relative;width:58px;height:58px;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:700;}
.ab .dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.8);}
.ab .cd{position:absolute;inset:0;background:rgba(40,30,70,.66);display:flex;align-items:center;justify-content:center;
  font-family:'Nunito';font-weight:900;font-size:18px;}
#toolbar{display:flex;gap:8px;pointer-events:auto;flex-wrap:wrap;justify-content:center;}
.tbtn{border-radius:18px;padding:10px 15px;font-size:15px;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.05;}
.tcost{font-family:'Nunito';font-weight:900;font-size:12px;display:flex;align-items:center;gap:3px;color:#fff;}

/* ===== Подсказка стройки ===== */
#buildHint{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:12px;
  font-family:'Nunito';font-weight:600;background:linear-gradient(180deg,#7fd0ff,#4aa6f0);border:3px solid #fff;
  border-radius:18px;padding:9px 16px;color:#fff;font-size:15px;box-shadow:0 5px 0 #2a7ec8,0 8px 18px rgba(20,20,60,.3);text-shadow:0 2px 2px rgba(0,0,0,.2);}
.mini{border-radius:12px;padding:5px 12px;font-size:13px;--c1:#ff86db;--c2:#e152bd;--sh:#b5279a;}

/* ===== Мобильное управление ===== */
#touch{position:fixed;inset:0;z-index:8;pointer-events:none;display:none;}
@media (pointer:coarse){#touch{display:block;}}
#stick{position:absolute;left:22px;bottom:96px;width:128px;height:128px;border-radius:50%;pointer-events:auto;touch-action:none;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.16),rgba(255,255,255,.05));border:3px solid rgba(255,255,255,.45);}
#knob{position:absolute;left:36px;top:36px;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#bfe9ff,#5aa6f0);border:3px solid #fff;box-shadow:0 5px 0 #2a7ec8,0 8px 14px rgba(0,0,0,.35);}
#action{position:absolute;right:26px;bottom:110px;width:100px;height:100px;border-radius:50%;font-size:19px;pointer-events:auto;}
@media (pointer:coarse){#hud{gap:6px;}#hud .chip{padding:5px 10px;font-size:14px;}}

/* ===== Модалка ===== */
#modal{position:fixed;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(40,40,90,.45);backdrop-filter:blur(3px);}
#modalCard{position:relative;width:min(440px,94vw);max-height:82vh;overflow:auto;padding:34px 18px 20px;
  background:linear-gradient(180deg,var(--lav),var(--lav2));border:5px solid var(--lav-border);border-radius:30px;
  box-shadow:0 12px 0 var(--lav-shadow),0 22px 44px rgba(20,20,60,.4),inset 0 4px 0 rgba(255,255,255,.6);}
#modalCard::-webkit-scrollbar{width:8px;} #modalCard::-webkit-scrollbar-thumb{background:var(--lav-shadow);border-radius:8px;}
#modalTitle{position:absolute;top:-20px;left:50%;transform:translateX(-50%);}
#modalClose{position:absolute;top:8px;right:12px;width:34px;height:34px;border-radius:50%;border:3px solid #fff;cursor:pointer;
  background:linear-gradient(180deg,#ff9bb0,#ec5f7e);color:#fff;font-size:20px;font-weight:900;line-height:1;
  box-shadow:0 4px 0 #c63a58;font-family:'Nunito';}
#modalBody{padding-top:6px;}
.menu-row{display:block;width:100%;margin-bottom:11px;font-size:18px;text-align:center;}
.menu-row:last-child{margin-bottom:0;}

.row{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:18px;margin-bottom:9px;
  background:linear-gradient(180deg,#eef1ff,#dfe4fa);border:3px solid #fff;box-shadow:0 4px 0 #b9c2e8;}
.row .rico{width:38px;height:38px;border-radius:12px;flex:none;border:2px solid rgba(255,255,255,.7);box-shadow:inset 0 2px 0 rgba(255,255,255,.5);}
.row .info{flex:1;min-width:0;}
.row .info b{display:block;font-family:'Nunito';font-weight:700;font-size:15px;color:var(--ink);}
.row .info small{color:#6471ad;font-family:'Nunito';font-weight:700;font-size:12px;}
.row .hpbar{height:7px;border-radius:5px;background:#c3cbed;overflow:hidden;margin-top:5px;border:1px solid rgba(255,255,255,.6);}
.row .hpbar i{display:block;height:100%;background:linear-gradient(90deg,#7fd0ff,#42e8c0);}
.buy{border-radius:14px;padding:9px 13px;font-size:13px;white-space:nowrap;--c1:#bdf07a;--c2:#7fcf4a;--sh:#4f9f2f;}
.buy.gold{--c1:#ffd24a;--c2:#ff9e2c;--sh:#d97913;}
.buy:disabled{filter:grayscale(.6) brightness(.78);box-shadow:0 4px 0 #888;cursor:not-allowed;}
.cost-tag{display:inline-flex;align-items:center;gap:3px;}

/* ===== Экран входа ===== */
#login{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px;
  background:radial-gradient(135% 100% at 50% 0%,#a7c6ff 0%,#7d97ec 42%,#5a63c6 100%);}
.login-card{position:relative;width:min(360px,92vw);padding:46px 26px 26px;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(180deg,var(--lav),var(--lav2));border:5px solid var(--lav-border);border-radius:34px;
  box-shadow:0 13px 0 var(--lav-shadow),0 24px 44px rgba(20,20,60,.4),inset 0 4px 0 rgba(255,255,255,.65);}
.login-card .pill-title{position:absolute;top:-26px;left:50%;transform:translateX(-50%);}
.field-label{font-family:'Nunito';font-weight:700;color:#fff;text-shadow:0 2px 2px rgba(70,80,150,.6);font-size:18px;letter-spacing:1px;margin-top:8px;}
.cz-input{background:#aab6ea;border:3px solid var(--lav-shadow);border-radius:16px;padding:13px 16px;
  font-family:'Nunito';font-weight:800;font-size:18px;color:#22306a;outline:none;box-shadow:inset 0 3px 6px rgba(60,70,130,.35);}
.cz-input:focus{border-color:#7e8fe0;background:#b6c0ee;}
.play-btn{margin-top:16px;width:100%;font-size:24px;letter-spacing:2px;}
#loginErr{color:#d33b63;font-family:'Nunito';font-weight:800;font-size:14px;min-height:18px;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.4);}
.login-title{font-family:'Nunito';font-weight:900;font-size:min(9vw,40px);letter-spacing:1px;color:#fff;
  text-shadow:0 3px 0 #4453a8,0 6px 10px rgba(0,0,0,.25);}