:root{
  color-scheme: dark;
  --bg0:#070a10;
  --bg1:#0b1220;
  --card: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --text:#e9f0ff;
  --muted: rgba(233,240,255,.72);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --r: 18px;
}

*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; display:flex; justify-content:center;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(80,160,255,.18), transparent 60%),
    radial-gradient(700px 400px at 80% 30%, rgba(120,255,170,.14), transparent 55%),
    radial-gradient(800px 600px at 50% 100%, rgba(255,180,80,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
}
.wrap{width:min(860px,100%); padding:18px 14px 28px;}
.top{display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px;}
.title h1{margin:0; font-size:18px;}
.sub{font-size:13px; color:var(--muted); max-width:560px; line-height:1.35;}
.tabs{
  display:flex; gap:10px; align-items:center;
  background: var(--card); border:1px solid var(--stroke);
  border-radius: 999px; padding:6px; box-shadow:var(--shadow);
}
.tab{
  border:0; background:transparent; color:var(--muted);
  padding:9px 12px; border-radius:999px; cursor:pointer;
  font-weight:800; font-size:13px; transition:.15s ease;
  user-select:none;
}
.tab:hover{background:rgba(255,255,255,.07); color:var(--text);}
.tab.active{background:rgba(255,255,255,.13); color:var(--text); border:1px solid rgba(255,255,255,.16);}

.card{background:var(--card); border:1px solid var(--stroke); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden;}
.cardHead{
  padding:14px; display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
}
.badgeRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.badge{
  display:inline-flex; gap:8px; align-items:center; padding:8px 10px;
  border-radius:999px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10); color:var(--muted); font-size:12px;
}
.badge strong{color:var(--text); font-weight:900;}
.btnRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.btn{
  border:0; border-radius:14px; padding:11px 14px; font-weight:900;
  cursor:pointer; background:rgba(255,255,255,.90); color:#0b1220;
  transition:.12s ease; user-select:none; min-width:160px;
}
.btn.secondary{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); color:var(--text); min-width:140px;}
.btn:hover{transform: translateY(-1px);}
.btn:active{transform: scale(.99);}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none;}

.content{padding:14px; display:grid; grid-template-columns: 1.2fr .8fr; gap:14px;}
@media (max-width:760px){.content{grid-template-columns:1fr;} .btn{width:100%;}}
.stage{
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
  min-height: 340px;
  position: relative;
  overflow:hidden;
}
.panel{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
}
.panel h2{margin:0 0 8px; font-size:14px;}
.panel p{margin:0 0 10px; font-size:13px; color:var(--muted); line-height:1.45;}

.narrative{margin:0 0 10px; font-size:14px; color:var(--muted); line-height:1.45; white-space:pre-line;}
.bigLine{margin:10px 0 0; font-size:16px; font-weight:900;}
.statusBox{
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-weight: 800;
  white-space: pre-line;
}
.statusBox.ok{background: rgba(120,255,170,.18); border-color: rgba(120,255,170,.25);}
.statusBox.bad{background: rgba(255,120,140,.18); border-color: rgba(255,120,140,.25);}
.statusBox.warn{background: rgba(255,220,120,.18); border-color: rgba(255,220,120,.25);}

.meter{
  margin-top: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.meter > div{height:100%; width:0%; background: rgba(255,255,255,.78); border-radius:999px;}

.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:10px;}
.tile{
  border-radius:16px; padding:16px 0; text-align:center; font-size:28px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  cursor:pointer; user-select:none; transition:.12s ease;
}
.tile:hover{transform: translateY(-1px); background: rgba(255,255,255,.08);}
.tile:active{transform: scale(.98);}
.tile.disabled{opacity:.55; cursor:not-allowed; transform:none;}

/* =========================
   Water scene (Fishing)
   ========================= */
.waterScene{
  position: relative;
  height: 190px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(240px 140px at 30% 20%, rgba(80,160,255,.28), transparent 60%),
    radial-gradient(260px 160px at 70% 30%, rgba(120,255,170,.10), transparent 65%),
    linear-gradient(180deg, rgba(30,90,140,.55), rgba(10,25,45,.78));
  box-shadow:
    inset 0 -50px 90px rgba(0,0,0,.35),
    inset 0  20px 50px rgba(255,255,255,.04);
}

.waterScene::before{
  /* движущиеся “волны” бликами */
  content:"";
  position:absolute;
  inset:-30% -40%;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 7px,
      transparent 7px,
      transparent 28px
    );
  opacity:.18;
  filter: blur(1px);
  animation: waterDrift 7s linear infinite;
  pointer-events:none;
}
@keyframes waterDrift{
  0%   { transform: translate(-2%, -2%) rotate(0deg); }
  100% { transform: translate( 2%,  2%) rotate(2deg); }
}

.waterScene::after{
  /* мягкая дымка/мерцание */
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(260px 170px at 60% 10%, rgba(255,255,255,.13), transparent 70%),
    radial-gradient(320px 220px at 20% 45%, rgba(255,255,255,.08), transparent 65%);
  mix-blend-mode: screen;
  opacity:.55;
  pointer-events:none;
}

/* =========================
   Поплавок (ожидание + поклёвка)
   ========================= */

/* Поплавок */
.bobber{
  position:absolute;
  left: 54%;
  top: 58%;
  width: 22px;
  height: 62px;
  transform: translate(-50%, -50%);
  z-index: 2;

  /* ожидание: плавный дрейф влево-вправо + лёгкое покачивание */
  animation: bobFloat 1.3s ease-in-out infinite;

  will-change: transform;
}

/* части поплавка */
.bobber .cap{
  width: 22px;
  height: 18px;
  border-radius: 12px 12px 10px 10px;
  background: linear-gradient(180deg, rgba(255,90,120,.95), rgba(220,40,70,.88));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 16px rgba(0,0,0,.25);

  /* чтобы колебания выглядели живее */
  transform-origin: 50% 80%;
  will-change: transform, opacity;
}
.bobber .body{
  width: 18px;
  height: 30px;
  margin: -2px auto 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(200,210,230,.85));
  border: 1px solid rgba(255,255,255,.18);

  will-change: opacity;
}
.bobber .stem{
  width: 2px;
  height: 20px;
  margin: -4px auto 0;
  background: rgba(255,255,255,.55);
  border-radius: 2px;
  opacity:.7;

  will-change: opacity;
}

/* 1) Ожидание: плавно двигается влево-вправо */
@keyframes bobFloat{
  0%   { transform: translate(-50%, -52%) rotate(-2deg); }
  25%  { transform: translate(-44%, -56%) rotate( 1deg); } /* вправо */
  50%  { transform: translate(-50%, -60%) rotate( 2deg); }
  75%  { transform: translate(-56%, -56%) rotate(-1deg); } /* влево */
  100% { transform: translate(-50%, -52%) rotate(-2deg); }
}

/* 2) Клюёт: “притопило” — белая часть исчезает, красная колеблется */
.waterScene.bite .bobber{
  animation: bobSubmerged .20s ease-in-out infinite;
}

@keyframes bobSubmerged{
  0%   { transform: translate(-50%, -34%) rotate(-10deg); }
  50%  { transform: translate(-50%, -22%) rotate( 12deg); }
  100% { transform: translate(-50%, -30%) rotate( -8deg); }
}

/* прячем белую часть и стержень при поклёвке */
.waterScene.bite .bobber .body,
.waterScene.bite .bobber .stem{
  opacity: 0;
}

/* красная часть отдельно “живая” */
.waterScene.bite .bobber .cap{
  animation: capWobble .16s ease-in-out infinite;
}

@keyframes capWobble{
  0%   { transform: rotate(-10deg); }
  50%  { transform: rotate( 14deg); }
  100% { transform: rotate( -8deg); }
}

/* =========================
   Круги по воде
   ========================= */
.ripple{
  position:absolute;
  left: 54%;
  top: 68%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.24);
  transform: translate(-50%,-50%) scale(.6);
  opacity: 0;
  pointer-events:none;
  z-index: 1;
}

.waterScene.bite .ripple{
  opacity: 1;
  animation: ripplePop .9s ease-out infinite;
}

@keyframes ripplePop{
  0%   { opacity:.0; transform: translate(-50%,-50%) scale(.5); }
  10%  { opacity:.65; }
  100% { opacity:0; transform: translate(-50%,-50%) scale(4.6); }
}
/* --- Boar Home UI --- */
.bigTitle{font-size:18px;font-weight:1000;margin:0 0 6px;}
.muted{color:var(--muted);font-size:13px;line-height:1.45}
.mutedSmall{color:var(--muted);font-size:12.5px;line-height:1.45}
.w100{width:100%}
.sep{height:1px;background:rgba(255,255,255,.08);margin:12px 0}
.panelTitle{font-weight:1000;margin:0 0 8px;font-size:13px}
.panelBox{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px 12px;
}
.sumRow{display:flex;justify-content:space-between;align-items:center;margin:6px 0;color:var(--muted)}
.sumRow b{color:var(--text)}

.hero{
  display:flex;gap:14px;justify-content:space-between;align-items:stretch;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px;
}
.heroLeft{display:flex;gap:12px;align-items:center;min-width:min(520px,100%)}
.avatar{
  width:56px;height:56px;border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.avatarInner{font-size:26px}
.heroTitle{font-size:16px;font-weight:1000}
.heroSub{font-size:12.5px;color:var(--muted);margin-top:2px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{
  display:inline-flex;gap:6px;align-items:center;
  padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);font-size:12.5px;
}
.chip b{color:var(--text);font-weight:1000}

.heroRight{display:flex;align-items:stretch}
.miniCard{
  min-width:220px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px 12px;
}
.miniLabel{color:var(--muted);font-size:12px;font-weight:900}
.miniValue{font-size:16px;font-weight:1000;margin-top:4px}
.miniHint{color:var(--muted);font-size:12px;line-height:1.35;margin-top:6px}

.grid3{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
@media (max-width:760px){
  .hero{flex-direction:column}
  .heroLeft{min-width:unset}
  .miniCard{min-width:unset}
  .grid3{grid-template-columns:1fr}
}

.statCard{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:12px;
}
.statTop{display:flex;justify-content:space-between;align-items:center}
.statName{color:var(--muted);font-size:12.5px;font-weight:900}
.statVal{font-weight:1000}
.statHint{color:var(--muted);font-size:12px;line-height:1.35;margin-top:8px}

.bar{
  margin-top:10px;
  height:10px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.bar > div{height:100%;width:0%;background:rgba(255,255,255,.78);border-radius:999px}

.sectionTitle{margin-top:14px;font-weight:1000}

.quickGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
@media (max-width:760px){
  .quickGrid{grid-template-columns:1fr}
}
.quickBtn{
  display:flex;align-items:center;gap:12px;
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  cursor:pointer;
  transition:.12s ease;
}
.quickBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.quickBtn:active{transform:scale(.99)}
.qIcon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);font-size:20px}
.qText{flex:1;min-width:0}
.qTitle{font-weight:1000}
.qSub{color:var(--muted);font-size:12.5px;margin-top:2px}
.qGo{color:var(--muted);font-weight:1000}

.grid2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
@media (max-width:760px){
  .grid2{grid-template-columns:1fr;}
}

.metBlock{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.metBtn{
  width:100%;
  min-width:unset;
  font-size:16px;
  padding:14px 14px;
  border-radius:16px;
}