/* Warm paper, quiet sage and blush details for the companion's own corner. */
#cat-dialog { z-index: 420; padding: 22px; background: rgba(38, 45, 31, .54); backdrop-filter: blur(7px); }
#cat-dialog #cat-dialog-inner { width: min(100%, 520px); max-height: calc(100dvh - 44px); overflow-y: auto;
  border: 1px solid #b99b71; border-radius: 22px; background: #fbf3df; color: #514330;
  box-shadow: 0 22px 80px #19251555, inset 0 0 0 5px #fff8e9; transform: none; animation: cat-care-arrive .18s ease-out; }
#cat-dialog-inner::before { display: none; }
#cat-dialog #cat-dialog-header { padding: 21px 24px 15px; border-bottom: 1px solid #daceb4; background: none; }
#cat-dialog #cat-dialog-name { color: #6a6141; font: 800 13px 'Be Vietnam Pro', sans-serif; letter-spacing: .07em; }
#cat-dialog #cat-dialog-close { border: 1px solid #dac9af; background: #f4e8d2; color: #725344; border-radius: 50%; width: 34px; height: 34px; }
.cat-care-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .09em; color: #8f815f; text-transform: uppercase; }
.cat-care-main { display: grid; grid-template-columns: 156px 1fr; gap: 20px; align-items: center; padding: 24px 26px 14px; }
#cat-dialog #cat-portrait-wrap { padding: 6px; width: 156px; height: 156px; border: 1px solid #d9cfb3;
  border-radius: 50% 50% 28% 28%; background: radial-gradient(ellipse at 50% 75%, #becfa85e, #efe8d3 72%); }
#cat-dialog #cat-portrait-canvas { width: 144px; height: 144px; margin: 0; image-rendering: pixelated; animation: none; filter: none; }
.cat-care-summary { min-width: 0; }
.cat-care-summary h2 { font: 900 29px 'Nunito', 'Be Vietnam Pro', sans-serif; color: #68543d; margin: 4px 0 7px; }
#cat-care-status { display: inline-block; background: #e0e9cd; color: #566f42; border: 1px solid #c7d3ae; border-radius: 20px; font-size: 12px; font-weight: 800; padding: 4px 10px; }
.is-hungry #cat-care-status { background: #f3dfca; color: #896047; border-color: #dec2a4; }
#cat-care-note { margin: 12px 0 0; font: 600 12px/1.65 'Be Vietnam Pro', sans-serif; color: #897656; }
.cat-care-details { padding: 10px 26px 24px; }
.cat-care-meter-label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; margin-bottom: 9px; }
#cat-care-meter { height: 11px; overflow: hidden; border-radius: 12px; background: #e9dfc9; border: 1px solid #d6c9b0; }
#cat-care-fill { width: 0; height: 100%; background: linear-gradient(90deg, #a5b878, #798f57); border-radius: inherit; transition: width .35s ease; }
.cat-care-resources { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 17px; }
.cat-care-resource { min-width: 0; border: 1px solid #dfd2b8; border-radius: 13px; background: #fff9ec; padding: 12px; }
.cat-care-resource strong { display: block; font-size: 13px; color: #71593d; margin-top: 5px; }
.cat-care-resource small { font-size: 10px; font-weight: 800; color: #9c8562; letter-spacing: .06em; }
.cat-care-food-image { display: flex; align-items: center; height: 32px; }
#cat-care-bowl { image-rendering: pixelated; width: 48px; height: 32px; object-fit: contain; }
#cat-streak-dots { display: flex; align-items: center; gap: 8px; height: 32px; }
#cat-streak-dots span { display: block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #d8c6a7; background: #f0e7d4; box-shadow: inset 0 1px 3px #83683912; }
#cat-streak-dots .filled { border-color: #b98977; background: #d6a392; box-shadow: inset 0 2px 0 #e7c1b1; }
.cat-care-rule { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: #eee9d6; font-size: 11px; line-height: 1.7; color: #7c7352; }
.cat-care-time { margin: 9px 2px 0; font-size: 10px; line-height: 1.7; color: #a18e6a; }
.cat-care-actions { display: flex; gap: 10px; padding: 16px 26px 22px; border-top: 1px solid #e0d5bd; }
.cat-care-actions button { flex: 1; min-height: 45px; border-radius: 12px; border: 1px solid #b99078; font: 800 13px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
#cat-care-feed { color: #fff9ec; background: #84966c; border-color: #6d8056; box-shadow: inset 0 1px 0 #a6b48d; }
#cat-care-pet { color: #876350; background: #f0ddd0; border-color: #d7bbaa; box-shadow: inset 0 1px 0 #fff3e8; }
.cat-care-actions button:disabled { opacity: .48; cursor: default; }
.cat-care-bowl-link { display: block; width: calc(100% - 52px); margin: 0 26px 18px; border: 1px solid #c8b59a; border-radius: 11px; background: #f5ead4; color: #866a46; min-height: 41px; font: 800 12px 'Be Vietnam Pro',sans-serif; cursor: pointer; }
#cat-bowl-dialog { display: none; position: fixed; inset: 0; z-index: 425; padding: 22px; align-items: center; justify-content: center; background: rgba(38,45,31,.54); backdrop-filter: blur(7px); }
#cat-bowl-dialog.visible { display: flex; }
#cat-bowl-inner { width: min(100%, 520px); max-height: calc(100dvh - 44px); overflow-y: auto; border: 1px solid #b99b71; border-radius: 22px; background: #fbf3df; color: #514330; box-shadow: 0 22px 80px #19251555,inset 0 0 0 5px #fff8e9; padding: 23px; }
.cat-bowl-header { display: flex; gap: 10px; justify-content: space-between; align-items: center; border-bottom: 1px solid #e0d5bd; padding-bottom: 17px; }
.cat-bowl-header h2 { font: 900 24px 'Nunito','Be Vietnam Pro',sans-serif; color: #715a3e; margin-top: 4px; }
#cat-bowl-close { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid #dac9af; background: #f4e8d2; color: #725344; border-radius: 50%; cursor: pointer; }
.cat-bowl-top { display: flex; gap: 17px; align-items: center; padding: 14px 0 7px; }
.cat-bowl-top > img { width: 96px; height: 64px; image-rendering: pixelated; object-fit: contain; }
#cat-bowl-progress { font-size: 13px; font-weight: 800; color: #826449; }
#cat-bowl-stock { margin-left: auto; font-size: 11px; color: #9a8866; }
#cat-bowl-dots { display: flex; gap: 7px; margin-top: 8px; }
#cat-bowl-dots span { width: 14px; height: 14px; border-radius: 50%; background: #eee0c8; border: 1px solid #d8c6a7; }
#cat-bowl-dots .filled { background: #a0b27b; border-color: #87996a; }
.cat-bowl-rule { font: 600 11px/1.65 'Be Vietnam Pro',sans-serif; color: #9a8969; margin: 7px 0 17px; }
.cat-bowl-prompt { display: flex; align-items: center; gap: 17px; background: #eef0de; border: 1px solid #d9dfc4; border-radius: 15px; padding: 14px; }
#cat-bowl-art { width: 96px; height: 96px; flex-shrink: 0; display: grid; place-items: center; }
#cat-bowl-art img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }
.cat-bowl-prompt small { font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #89906b; }
#cat-bowl-question { font: 800 20px/1.45 'Be Vietnam Pro',sans-serif; color: #606c44; overflow-wrap: anywhere; margin-top: 5px; }
#cat-bowl-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 17px; }
.cat-bowl-choice { min-height: 48px; border: 1px solid #d4c6ab; border-radius: 11px; background: #fff8e9; color: #736041; padding: 9px; font: 700 17px/1.5 'Noto Sans KR',sans-serif; overflow-wrap: anywhere; cursor: pointer; }
.cat-bowl-choice:disabled { cursor: default; }
.cat-bowl-choice.correct { background: #e1eacb; border-color: #93a66c; color: #566c39; }
.cat-bowl-choice.wrong { background: #f0dacb; border-color: #c6957d; color: #996347; }
#cat-bowl-feedback { min-height: 32px; margin-top: 14px; font: 700 12px/1.65 'Be Vietnam Pro',sans-serif; color: #827256; }
#cat-bowl-feedback.correct { color: #748747; } #cat-bowl-feedback.wrong { color: #a47152; }
.cat-bowl-actions { display: flex; gap: 10px; }
.cat-bowl-actions button { flex: 1; border: 1px solid #a5b184; border-radius: 11px; background: #edf0de; color: #6f7b50; padding: 12px; font: 800 12px 'Be Vietnam Pro',sans-serif; cursor: pointer; }
#cat-bowl-feed { background: #84966c; color: #fff9ec; border-color: #6d8056; }
.cat-bowl-actions button[hidden] { display: none; }
.cat-bowl-actions button:disabled { opacity: .45; cursor: default; }
.cat-bowl-choice:focus-visible,.cat-care-bowl-link:focus-visible,#cat-bowl-close:focus-visible,.cat-bowl-actions button:focus-visible { outline: 3px solid #ad8c59; outline-offset: 3px; }
.cat-care-actions button:focus-visible, #cat-word-close:focus-visible { outline: 3px solid #ad8c59; outline-offset: 3px; }
#cat-word-card { display: none; position: fixed; right: 22px; top: 110px; z-index: 135; width: min(338px, calc(100vw - 32px));
  color: #624e36; background: #fcf4e2; border: 1px solid #c5af86; border-radius: 16px; padding: 13px 15px 15px;
  box-shadow: 0 7px 24px #27372130, inset 0 0 0 3px #fff9ef; animation: cat-care-arrive .2s ease-out; }
#cat-word-card.visible:not([hidden]) { display: block; }
.cat-word-top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.cat-word-top > img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.cat-word-top span { flex: 1; font: 800 10px 'Be Vietnam Pro', sans-serif; letter-spacing: .05em; color: #8b7a54; }
#cat-word-close { background: transparent; border: none; color: #9c8968; padding: 6px; cursor: pointer; border-radius: 6px; }
.cat-word-content { display: flex; align-items: center; gap: 14px; min-width: 0; }
#cat-word-art { width: 72px; height: 72px; display: grid; place-items: center; flex-shrink: 0; border-radius: 13px; background: #e9edd8; }
#cat-word-art img { width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; }
.cat-word-copy { min-width: 0; }
#cat-word-ko { font: 900 25px/1.4 'Noto Sans KR', sans-serif; overflow-wrap: anywhere; color: #5d633d; }
#cat-word-en { font: 700 12px/1.5 'Be Vietnam Pro', sans-serif; overflow-wrap: anywhere; color: #927756; margin-top: 3px; }
@keyframes cat-care-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media(max-width: 520px) {
  #cat-dialog { padding: 14px; }
  #cat-dialog #cat-dialog-inner { max-height: calc(100dvh - 28px); }
  .cat-care-main { grid-template-columns: 156px 1fr; gap: 12px; padding: 19px 18px 12px; }
  #cat-dialog #cat-portrait-wrap { width: 156px; height: 156px; padding: 6px; }
  #cat-dialog #cat-portrait-canvas { width: 144px !important; height: 144px !important; }
  .cat-care-summary h2 { font-size: 25px; }
  #cat-care-note { font-size: 11px; }
  .cat-care-details { padding: 8px 18px 17px; }
  .cat-care-actions { padding: 14px 18px 18px; }
  .cat-care-bowl-link { margin: 0 18px 14px; width: calc(100% - 36px); }
  #cat-bowl-dialog { padding: 14px; }
  #cat-bowl-inner { padding: 19px; max-height: calc(100dvh - 28px); }
  .cat-bowl-header h2 { font-size: 21px; }
  .cat-bowl-prompt { gap: 12px; padding: 10px; }
  #cat-bowl-question { font-size: 17px; }
  #cat-word-card { right: 16px; top: 105px; }
}
@media(prefers-reduced-motion: reduce) { #cat-dialog #cat-dialog-inner, #cat-word-card { animation: none; } #cat-care-fill { transition: none; } }