/*
  Gugu Island V2 UI Polish Overrides
  Phase C-9 v3: extracted from styles.css without changing rule semantics.
  Load order: ui-tokens.css -> styles.css -> ui-polish.css.
*/
/* ============================================================
   1. Panel base polish / scrollbars / shared cards (Phase C-5)
   ============================================================ */
.panel{scrollbar-width:thin;scrollbar-color:#1B1530 #FFF3D0}.panel::-webkit-scrollbar{width:14px}.panel::-webkit-scrollbar-track{background:#FFF3D0;border-left:4px solid var(--line)}.panel::-webkit-scrollbar-thumb{background:#1B1530;border:3px solid #FFF3D0}.panel-head{clear:both;margin:4px 0 12px}.panel-head h2{margin:0 0 4px;font-size:20px}.panel-head p{font-size:13px;color:#80502E;line-height:1.45}.panel-head.sub{margin-top:16px}.bag-card,.bird-card{font-family:var(--font);cursor:pointer;transition:transform .08s steps(1),filter .08s steps(1);position:relative}.bag-card:active,.bird-card:active{transform:translate(3px,3px);box-shadow:1px 1px 0 rgba(0,0,0,.25)}.bag-card.selected{background:#FFF3D0;box-shadow:0 0 0 4px #FFD24D,4px 4px 0 rgba(0,0,0,.25)}.bag-card.usable:after{content:'可用';position:absolute;right:7px;top:7px;background:#3ED47A;color:#1B1530;border:3px solid var(--line);font-size:10px;padding:1px 4px}.bag-card.empty:after{content:'空';position:absolute;right:7px;top:7px;background:#AEB8CC;color:#1B1530;border:3px solid var(--line);font-size:10px;padding:1px 4px}.bird-card.locked{filter:saturate(.55);opacity:.74}.bird-card.active{box-shadow:0 0 0 4px #FFD24D,4px 4px 0 rgba(0,0,0,.24)}.bird-card.rarity-home{background:#FFF3D0}.bird-card.rarity-home .bird-badge{background:#FFD24D}.bird-card.rarity-normal .bird-badge{background:#E8FFD8}.bird-card.rarity-mystery .bird-badge{background:#D9C7FF}.bird-card.locked .bird-frame img{filter:grayscale(1) contrast(.9)}.bird-badge{box-shadow:2px 2px 0 rgba(0,0,0,.22)}.close{position:sticky;top:0;z-index:2;float:right}.close:hover,.bag-card:hover,.bird-card:hover{filter:brightness(1.04)}

/* ============================================================
   2. Panel interaction feedback / toast / dex detail (Phase C-6)
   ============================================================ */
.bag-card.used{animation:bagUsePulse .34s steps(2) 1}
.bag-card.empty{cursor:not-allowed}
.bag-card.empty:active{transform:none}
.panel-toast{position:sticky;bottom:10px;margin:10px auto 0;width:max-content;max-width:92%;padding:7px 12px;background:#1B1530;color:#FFD24D;border:4px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.35);font-size:11px;line-height:1.4;opacity:0;transform:translateY(6px);transition:opacity .1s steps(1),transform .1s steps(1);z-index:4}
.panel-toast.show{opacity:1;transform:translateY(0)}
.dex-detail-card{border:5px solid var(--line);background:#FFF9E8;color:var(--line);padding:10px 12px;margin:0 0 12px;box-shadow:3px 3px 0 rgba(0,0,0,.22)}
.dex-detail-card div{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.dex-detail-card strong{font-size:15px}
.dex-detail-card span{font-size:11px;background:#1B1530;color:#FFD24D;padding:3px 6px}
.dex-detail-card p{font-size:12px;color:#80502E;margin-bottom:5px}
.dex-detail-card em{display:block;font-style:normal;font-size:12px;line-height:1.55;color:#3A2A19}
.dex-detail-card.locked{background:#E9E1D3;color:#4C3A2A}
.dex-detail-card.locked span{background:#7C6F66;color:#FFF3D0}
@keyframes bagUsePulse{0%{transform:translate(0,0)}50%{transform:translate(3px,3px);filter:brightness(1.08)}100%{transform:translate(0,0)}}
/* ============================================================
   3. Inventory and collection card visual details (Phase C-7)
   ============================================================ */
.bag-kind{position:absolute;left:7px;top:7px;background:#1B1530;color:#FFF3D0;border:3px solid #000;font-size:10px;padding:1px 4px}
.bag-empty-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(27,21,48,.86);color:#FFF3D0;border:3px solid #000;padding:3px 6px;font-size:10px;white-space:nowrap}
.bag-card.empty .bag-icon{filter:grayscale(1);opacity:.42}
.bag-card.empty .bag-name{color:#7C6F66}
.bird-card{overflow:hidden}
.bird-rarity-tag{position:absolute;right:6px;top:6px;z-index:2;background:#1B1530;color:#FFD24D;border:3px solid #000;font-size:10px;line-height:1;padding:3px 5px;box-shadow:2px 2px 0 rgba(0,0,0,.25)}
.bird-card.rarity-home{box-shadow:0 0 0 4px #FFD24D,4px 4px 0 rgba(0,0,0,.24)}
.bird-card.rarity-normal{box-shadow:0 0 0 3px #3ED47A,3px 3px 0 rgba(0,0,0,.22)}
.bird-card.rarity-mystery{background:#D9C7FF;box-shadow:0 0 0 3px #7C6F66,3px 3px 0 rgba(0,0,0,.20),inset 8px 0 0 #C7B4EF,inset -8px 0 0 #C7B4EF}
.bird-card.rarity-mystery .bird-rarity-tag{background:#7C6F66;color:#FFF3D0}
.bird-card.locked .bird-title{color:#4C3A2A}
.bird-card.locked .bird-frame{position:relative}
.bird-card.locked .bird-frame:after{content:'?';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:28px;color:#1B1530;text-shadow:2px 2px 0 #FFF3D0}
.bird-card.active.rarity-normal{box-shadow:0 0 0 4px #FFD24D,0 0 0 8px #3ED47A,4px 4px 0 rgba(0,0,0,.24)}
.dex-detail-card{position:relative}
.dex-detail-card:before{content:'';position:absolute;left:8px;top:8px;width:8px;height:8px;background:rgba(255,210,77,.6)}
/* ============================================================
   4. Mobile readability pass for bag and dex panels (Phase C-7.2)
   ============================================================ */
.panel{padding:14px 12px 16px;border-image:var(--ui-slice-panel)}
.panel .close{margin:-2px 0 8px 8px;padding:8px 13px;font-size:13px;border-image:var(--ui-slice-close)}
.panel-head:first-of-type{padding-right:74px}
.bag-grid{gap:10px}
.bag-card{min-height:126px;padding:9px 7px;border-image:var(--ui-slice-item-slot);box-shadow:var(--ui-p-card-shadow)}
.bag-icon{height:54px}
.bag-name{font-size:13px}
.bag-kind{left:6px;top:6px;font-size:9px;border-width:2px;background:var(--ui-c-line);color:var(--ui-c-panel-paper)}
.bag-card.usable:after,.bag-card.empty:after{right:6px;top:6px;font-size:9px;border-width:2px}
.bag-card.empty:after{background:var(--ui-c-bag-empty-bg)}
.bag-empty-mark{font-size:9px;border-width:2px;padding:2px 5px;background:rgba(27,21,48,.86);color:var(--ui-c-panel-paper)}
.panel-toast{border-image:var(--ui-slice-toast);background:var(--ui-c-line);color:var(--ui-c-gold)}
.bird-card-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.bird-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:166px;padding:10px 7px 8px;grid-template-columns:none;border-image:var(--ui-slice-bird-card)}
.bird-frame{width:78px;height:72px;display:grid;place-items:center;margin:10px auto 2px}
.bird-frame img{max-width:70px;max-height:64px;object-fit:contain}
.bird-info{text-align:center;width:100%}
.bird-title{font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bird-meta{font-size:9px;opacity:.72;margin-top:3px}
.bird-badge{display:inline-block;margin-top:5px;font-size:10px;padding:2px 5px;border:2px solid rgba(0,0,0,.32)}
.bird-rarity-tag{right:5px;top:5px;font-size:9px;border-width:2px;padding:2px 4px}
.bird-card.rarity-home,.bird-card.active.rarity-home{box-shadow:var(--ui-p-active-shadow)}
.bird-card.rarity-normal{box-shadow:0 0 0 3px var(--ui-c-dex-seen),var(--ui-p-card-shadow)}
.bird-card.rarity-mystery{background:var(--ui-c-dex-mystery);box-shadow:0 0 0 3px var(--ui-c-bag-empty),var(--ui-p-card-shadow),inset 8px 0 0 var(--ui-c-dex-mystery-side),inset -8px 0 0 var(--ui-c-dex-mystery-side)}
.bird-card.locked .bird-frame:after{font-size:24px}
.dex-detail-card{padding:9px 11px;background:var(--ui-c-panel-soft);box-shadow:var(--ui-p-card-shadow)}
.dex-detail-card strong{font-size:14px}
.dex-detail-card p,.dex-detail-card em{font-size:11px}
.dex-detail-card span{font-size:10px;background:var(--ui-c-line);color:var(--ui-c-gold)}
/* ============================================================
   5. HUD, status pill, action button token consumption (Phase C-8.3)
   ============================================================ */
.top-btn,.title-box{border-image:var(--ui-slice-hud-card);background:var(--ui-c-hud-paper);box-shadow:var(--ui-p-hud-shadow)}
.care{border-image:var(--ui-slice-status-pill);background:var(--ui-c-status-paper)}
.act{border-image:var(--ui-slice-action-button);background:var(--ui-c-action-bg);box-shadow:var(--ui-p-action-shadow)}
.act i{background:var(--ui-c-action-icon);color:var(--ui-c-gold)}
.speech,.tip{border-image:var(--ui-slice-speech);background:var(--ui-c-speech)}
/* ============================================================
   6. Mobile HUD readability pass (Phase C-8.4)
   ============================================================ */
.top-bar{grid-template-columns:20% 1fr 20%;gap:7px}
.top-btn{height:60px}
.icon-top{flex-direction:column;gap:1px;padding:3px 2px}
.icon-top img{width:28px;height:28px}
.icon-top span{font-size:11px;white-space:nowrap;line-height:1;color:var(--line)}
.title-box{height:64px;padding:8px 7px}
#birdName{font-size:13px}
.xp{height:12px;margin-top:7px}
.care-panel{left:4.5%;right:4.5%;gap:6px}
.care{height:45px;grid-template-columns:24px 1fr;gap:4px;padding:4px 5px}
.care img{width:24px;height:24px}
.care span{display:none}
.care b{font-size:14px;justify-self:center}
.tip{left:16%;right:16%;top:18.8%;font-size:12px;padding:7px 10px}
.speech{font-size:12px;padding:10px 12px}
.actions{gap:8px}
.act{min-height:112px;gap:7px}
.act img{width:58px;height:58px}
.act span{font-size:14px}
/* ============================================================
   7. Status explanation interaction and focus feedback (Phase C-8.5)
   ============================================================ */
.care-clickable{cursor:pointer}
.care-clickable:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.35)}
.care-clickable.hinted,.care-clickable:focus-visible{outline:none;box-shadow:var(--ui-p-status-focus)}