:root{
  --bg:#0b2a0b;
  --panel:#0f172a;
  --card:rgba(255,255,255,0.08);
  --card2:rgba(0,0,0,0.35);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.70);
  --accent:rgba(255,255,255,0.88);
  --danger:rgba(255,120,120,0.95);
}
*{box-sizing:border-box;}
html,html, body{ overscroll-behavior: none; touch-action: manipulation; }
body{height:100%; margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
html, body{ overscroll-behavior: none; touch-action: manipulation; }
body{
  color:var(--text);

  /* prettier meadow background (SVG scene + gentle color wash) */
  background:
    linear-gradient(180deg, rgba(20, 30, 60, 0.18), rgba(0,0,0,0.10)),
    url('/assets/meadow.svg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  overflow:hidden;
  position: relative;
}
a{color:inherit; text-decoration:none;}
.header{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.10));
  backdrop-filter: blur(6px);
  z-index:50;
}
.brand{
  display:flex; gap:10px; align-items:center;
  font-weight:750; letter-spacing:0.3px;
}
.brand .dot{
  width:12px; height:12px; border-radius:50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 24px rgba(255,255,255,0.35);
}
.nav{
  display:flex; gap:10px; align-items:center;
  flex-wrap:wrap;
}
.pill{
  padding:9px 12px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  border-radius:999px;
  font-size:13px;
}
.pill:hover{ background: rgba(0,0,0,0.28); }
.container{
  position:fixed;
  inset: var(--headerH, 64px) 0 0 0;
  overflow:hidden;
  z-index:1;
  background: #000;
}
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.18);
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  display:none;
  z-index:60;
}
.toast.show{ display:block; }
.small{font-size:12px; color:var(--muted);}
.btn{
  color: #fff;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.24);
  cursor:pointer;
  user-select:none;
  font-size:14px;
}
.btn:hover{ background: rgba(0,0,0,0.34); }
.btn.primary{
  background: rgba(255,255,255,0.92);
  color:rgba(0,0,0,0.92);
  border-color: rgba(255,255,255,0.6);
}
.btn.primary:hover{ background: rgba(255,255,255,0.85); }
.btn.danger{
  background: rgba(255,90,90,0.22);
  border-color: rgba(255,90,90,0.45);
}
.btn.danger:hover{ background: rgba(255,90,90,0.32); }
.grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:14px;
  padding:14px;
  height: calc(100vh - 64px);
}
@media (max-width: 980px){
  html, body{ overscroll-behavior: none; touch-action: manipulation; }
body{ overflow:auto; }
  .container{ position:relative; inset:auto; overflow:visible;min-height:100vh;min-width:400vw;background:#000; }
  .grid{ grid-template-columns:1fr; height:auto; }
  .txt{display:none;}
  .m-txt{display:block !important;padding-top:120px;}
}
.m-txt{display:none;}
.panel{
  background: rgba(0,0,0,0.28);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:16px;
  padding:12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.panel h2{ margin:6px 6px 10px 6px; font-size:16px; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:8px 6px; }
.row label{ font-size:13px; color:var(--muted); }
.input{
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
  color:var(--text);
  font-size:14px;
}
.input:focus{ outline: none; border-color: rgba(255,255,255,0.35); }
.canvasWrap{
  position:relative;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.20);
}
canvas{ display:block; width:100%; height: calc(100vh - 64px - 140px); }
@media (max-width: 980px){
  canvas{ height: 62vh; }
}
.hint{
  margin:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:12px;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.20);
}
.grass{
  position:absolute;
  inset:0;
  pointer-events:none;
  /* Extra texture layer: subtle wind streaks + grass blades near bottom */
  background:
    radial-gradient(1200px 700px at 50% 25%, rgba(255,255,255,0.10), transparent 70%),
    radial-gradient(900px 520px at 15% 15%, rgba(255,255,255,0.14), transparent 65%),
    radial-gradient(900px 520px at 85% 10%, rgba(255,255,255,0.12), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.06) 55%, rgba(0,0,0,0.16) 100%),
    repeating-linear-gradient(120deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 36px);
  opacity:0.55;
  filter: blur(0px);
}
.grass::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:38vh;
  background:
    radial-gradient(1200px 380px at 50% 110%, rgba(255,255,255,0.10), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 18px);
  opacity:0.22;
  mix-blend-mode: overlay;
}

.cat{
  position:absolute;

  /* Only the drawn cat: no frame / no background / no box */
  background: transparent;
  border:none;
  border-radius:0;
  box-shadow: none;
  overflow:visible;
  cursor:pointer;
  user-select:none;
}
.cat .sprite{
  position:absolute;
  inset:0;
  border-radius:0;
  overflow:visible; /* don't clip your drawing */
  background: transparent;
}

.cat .floatWrap{
  position:absolute;
  inset:0;
  transform-origin: 50% 78%;
  animation: catWobble var(--walkDur, 1.20s) ease-in-out infinite;
}

.cat .catImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /*object-fit:contain;*/
  object-fit:contain;
  display:block;
  pointer-events:none;
}

.cat .catBody,
.cat .catFeet{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}

.cat .catBody{
  clip-path: inset(0 0 34% 0);
}
.cat .catFeet{
  clip-path: inset(70% 0 0 0);
  transform-origin: 50% 92%;
  animation: catStep var(--walkDur, 0.62s) ease-in-out infinite;
}

.cat.flip .sprite{

  transform: scaleX(-1);
}

.cat img{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
  transform-origin: 50% 70%;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.20));
}
@keyframes catFloat{
  0%   { transform: translateY(0px) rotate(-1deg) scale(1); }
  50%  { transform: translateY(-4px) rotate(1deg) scale(1.01); }
  100% { transform: translateY(0px) rotate(-1deg) scale(1); }
}

.cat .overlay{
  position:absolute;
  left:50%;
  bottom:-10px;
  transform: translateX(-50%) translateY(10px);
  padding:8px 10px;
  border-radius:12px;
  background: rgba(0,0,0,0.62);
  border:1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 160px;
  max-width: 240px;
  opacity:0;
  pointer-events:none;
  transition: opacity 140ms ease, transform 140ms ease;
}
@media (hover:hover){
  .cat:hover .overlay{ opacity:1; pointer-events:auto; transform: translateX(-50%) translateY(0px); }
}
.cat.showUI .overlay{
  opacity:1;
  pointer-events:auto;
  transform: translateX(-50%) translateY(0px);
}
.cat .name{
 font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat .meta{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); }
.tagDanger{ color: var(--danger); font-weight:650; }
.quickFeed{
  position:absolute; top:-12px; right:-12px;
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.55);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  opacity:0;
  pointer-events:none;
  transform: translateY(8px);
  transition: opacity 140ms ease, transform 140ms ease;
}
@media (hover:hover){
  .cat:hover .quickFeed{ opacity:1; pointer-events:auto; transform: translateY(0); }
}
.cat.showUI .quickFeed{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}
.quickFeed:hover{ background: rgba(0,0,0,0.50); }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
  font-size:13px;
}
.hr{
  height:1px; background: rgba(255,255,255,0.12); margin:10px 0;
}
.table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.table th,.table td{
  border-bottom:1px solid rgba(255,255,255,0.12);
  padding:10px 8px;
  text-align:left;
}
.table th{ color: var(--muted); font-weight:650; }
.hero{
  padding:14px;
  max-width: 1040px;
  margin: calc(var(--headerH, 64px) + 12px) auto 0 auto;
}
.hero .panel{ padding:16px; }
.catHero{ transform-origin: 50% 70%; animation: catFloat 3.4s ease-in-out infinite; }

@keyframes catFeet{
  0%   { transform: translateX(-2px) rotate(-1deg); }
  50%  { transform: translateX(2px) rotate(1deg); }
  100% { transform: translateX(-2px) rotate(-1deg); }
}

@media (max-width: 600px){
  .header{ padding:12px 12px; gap:10px; }
  .nav{ gap:8px; }
  .pill, .badge{ font-size:12px; }
  .btn{ padding:10px 12px; border-radius:14px; }
  .grid{ padding:12px; gap:12px; }
  .panel{ border-radius:16px; padding:12px; }
  .hero{ padding:12px; margin-top: 70px; }
  .canvasWrap{ border-radius:16px; }
  canvas{ height: 56vh; }
  /* Make buttons full width in detail view where space is tight */
  #feedBtn{ width: 100%; }
}

@keyframes catWalk{
  0%   { transform: translateY(0px) rotate(-0.8deg); }
  25%  { transform: translateY(-1px) rotate(0.6deg); }
  50%  { transform: translateY(-2px) rotate(0.8deg); }
  75%  { transform: translateY(-1px) rotate(-0.4deg); }
  100% { transform: translateY(0px) rotate(-0.8deg); }
}
@keyframes catStep{
  0%   { transform: translateX(-1px) translateY(0px) rotate(-0.6deg); }
  50%  { transform: translateX(1px) translateY(1px) rotate(0.6deg); }
  100% { transform: translateX(-1px) translateY(0px) rotate(-0.6deg); }
}
@keyframes catShadow{
  0%   { transform: translateX(-50%) scale(0.94, 0.92); opacity: 0.32; }
  50%  { transform: translateX(-50%) scale(1.02, 1.00); opacity: 0.26; }
  100% { transform: translateX(-50%) scale(0.94, 0.92); opacity: 0.32; }
}

.cat::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  width: 78%;
  height: 22%;
  background: rgba(0,0,0,0.35);
  border-radius: 999px;
  filter: blur(7px);
  transform: translateX(-50%);
  opacity: 0.28;
  animation: catShadow var(--walkDur, 0.62s) ease-in-out infinite;
  pointer-events:none;
}

@keyframes catWobble{
  0%   { transform: translateY(0px) rotate(-1.2deg); }
  25%  { transform: translateY(-1px) rotate(0.8deg); }
  50%  { transform: translateY(-2px) rotate(1.2deg); }
  75%  { transform: translateY(-1px) rotate(-0.6deg); }
  100% { transform: translateY(0px) rotate(-1.2deg); }
}

.headMarker{
  position:absolute;
  width:16px;
  height:16px;
  margin-left:-8px;
  margin-top:-8px;
  border-radius:999px;
  background: rgba(255,255,255,0.9);
  border:2px solid rgba(255,82,82,0.95);
  box-shadow: 0 0 0 3px rgba(255,82,82,0.18);
  pointer-events:none;
}
.headMarker::after{
  content:"猫头";
  position:absolute;
  left: 14px;
  top: -10px;
  font-size:12px;
  padding:4px 6px;
  border-radius:10px;
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  white-space:nowrap;
}

/* --- v10 grass sprite (single image, no split) --- */
.cat{
  position:absolute;
  user-select:none;
}
.cat .spriteRot{
  position:absolute;
  inset:0;
  transform-origin: 50% 50%;
  transform: rotate(var(--rotdeg, 0deg));
  pointer-events:none;
}
.cat .spriteWobble{
  position:absolute;
  inset:0;
  transform-origin: 50% 65%;
  animation: wobble 1.25s ease-in-out infinite;
}
@keyframes wobble{
  0%   { transform: translateY(0px) rotate(-0.6deg); }
  35%  { transform: translateY(-1.5px) rotate(0.7deg); }
  70%  { transform: translateY(-0.6px) rotate(-0.3deg); }
  100% { transform: translateY(0px) rotate(-0.6deg); }
}
.cat .catImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.cat::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  width: 78%;
  height: 22%;
  background: rgba(0,0,0,0.35);
  border-radius: 999px;
  filter: blur(7px);
  transform: translateX(-50%);
  opacity: 0.26;
  animation: shadowPulse 1.25s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shadowPulse{
  0%   { transform: translateX(-50%) scale(0.94, 0.92); opacity: 0.30; }
  50%  { transform: translateX(-50%) scale(1.02, 1.00); opacity: 0.22; }
  100% { transform: translateX(-50%) scale(0.94, 0.92); opacity: 0.30; }
}

/* fight effects */
.cat.fighting .spriteWobble{
  animation: fightShake 0.12s linear infinite;
}
@keyframes fightShake{
  0%{ transform: translate(-1px, 0px) rotate(-1.2deg); }
  50%{ transform: translate(1px, -1px) rotate(1.2deg); }
  100%{ transform: translate(-1px, 0px) rotate(-1.2deg); }
}
.fightFx{
  position:absolute;
  transform: translate(-50%, -50%);
  font-size: 32px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
  animation: fxPop 0.22s ease-out infinite alternate;
  pointer-events:none;
}
@keyframes fxPop{
  from{ transform: translate(-50%, -50%) scale(0.95); opacity: 0.85; }
  to{ transform: translate(-50%, -50%) scale(1.10); opacity: 1; }
}

/* --- v10.3: no 360 rotate, only left/right flip --- */
.cat .spriteFlip{
  position:absolute;
  inset:0;
  transform-origin: 50% 50%;
  transform: scaleX(var(--sx, 1));
  pointer-events:none;
}

canvas{ touch-action: none; }

@media (max-width: 760px){
  .header{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }
  .brand{ width:100%; }
  .nav{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .nav .btn{ padding:10px 12px; }
  .nav .badge{ padding:8px 10px; }

  .grid{
    width: 100vw;
    grid-template-columns: 1fr;
    height: auto;
    padding: 5px;
  }
  canvas{
    height: min(56vh, 420px);
  }
  .panel{ padding: 10px;width:97vw; }
}

.field{
  position:absolute;
  inset:0;
  z-index:1;
}

/* subtle film grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.05), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,0.04), transparent 50%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, rgba(0,0,0,0.015) 1px 2px);
  mix-blend-mode: overlay;
  opacity: 0.55;
  z-index: 0;
}

@media (max-width: 760px){
  body{
    background-attachment: scroll, scroll;
  }
}

/* --- admin pages: allow scrolling --- */
body.admin{
  overflow: auto;
}
body.admin .container{
  position: relative;
  inset: auto;
  height: auto;
  min-height: calc(100vh - var(--headerH, 64px));
  overflow: auto;
  padding-bottom: 24px;
}