/* The same warm paper, ink and restrained gold used by the current skill cards. */
#game-container .guide-overlay {box-sizing:border-box;background:rgba(27,23,19,.65);animation:guideFadeIn .18s ease-out forwards;padding-top:calc(var(--game-safe-top,0px) + 48px);font-family:var(--ui-body);z-index:9990}
#game-container .guide-overlay.closing {animation:guideFadeOut .18s ease-in forwards;pointer-events:none}
#game-container .guide-bubble-container {box-sizing:border-box;align-items:flex-start;gap:8px;width:calc(100% - 32px);max-width:350px;margin-left:auto;margin-right:auto;padding:22px 21px 22px 14px;border:2px solid transparent;border-radius:0;border-image:url('../assets/hero_detail_20260926/paper-panel.webp') 130 80 80 80 fill / 32px 24px 27px 24px;background:none;box-shadow:none;filter:drop-shadow(0 5px 5px #26180b55);animation:guidePaperArrive .22s ease-out both;opacity:1;transform:none}
#game-container .guide-cat-avatar {width:59px;height:69px;flex:none;margin-top:-4px;background:none;border:0;border-radius:0;overflow:visible;animation:none;box-shadow:none}
#game-container .guide-cat-avatar img {object-fit:contain;filter:drop-shadow(0 2px 0 #80613c22)}
#game-container .guide-speech-bubble {flex:1;min-width:0;padding:0;border:0;border-radius:0;background:none;color:#493b2f;box-shadow:none;animation:none}
#game-container .guide-speech-bubble::before,#game-container .guide-speech-bubble::after {display:none}
#game-container .guide-text-main {margin:0;color:#493b2f;font:400 15px/1.7 var(--ui-body);text-shadow:none;letter-spacing:0;overflow-wrap:anywhere}
#game-container .guide-text-main::before {content:'土地老儿';display:table;padding:3px 15px 6px;margin:0 0 7px;background:url('../assets/hero_detail_20260926/wood-plaque.webp') center/100% 100% no-repeat;font:400 18px/1.3 var(--font-ui-title);color:#68482c;letter-spacing:1px;text-shadow:none}
#game-container .guide-text-main span {color:#a1562d!important;text-shadow:none}
#game-container .guide-dismiss-hint {color:#f6e7c8;font:400 13px/1.4 var(--ui-body);letter-spacing:.04em;animation:none;text-shadow:0 1px 2px #33251c}
#game-container .guide-arrow-down {display:none}
#game-container .guide-focus-frame {position:absolute;z-index:9999;box-sizing:border-box;margin:0;padding:0;border:0;border-radius:12px;outline:2px solid #ddba75;outline-offset:4px;box-shadow:0 0 0 5px #fff4d422,0 3px 12px #37230c55;pointer-events:auto;cursor:pointer;overflow:visible;animation:none!important;transform:none!important;filter:none!important}
#game-container .guide-focus-frame::before,#game-container .guide-focus-frame::after {display:none!important}
#game-container .guide-focus-frame > * {position:absolute!important;z-index:auto!important;color:inherit;animation:none!important;filter:none!important}
#game-container .guide-highlight-btn .battle-btn,#game-container :is(.guide-upgrade-card-highlight,.guide-hextech-card-highlight,.guide-dice-highlight) {animation:none!important;filter:drop-shadow(0 0 4px #dcb37499)!important}
#game-container .guide-upgrade-card-highlight {outline:2px solid #dcb374;outline-offset:3px;transform:none!important;box-shadow:0 4px 14px #5f3c2533!important}
#game-container .guide-notice-overlay {display:block;padding:0;z-index:9990}
#game-container .guide-note {position:absolute;box-sizing:border-box;left:16px;right:16px;width:auto;max-width:350px;margin:0 auto;padding:23px 22px 8px;background:none;border:2px solid transparent;border-radius:0;border-image:url('../assets/hero_detail_20260926/paper-panel.webp') 130 80 80 80 fill / 32px 24px 27px 24px;box-shadow:none;filter:drop-shadow(0 5px 5px #26180b55);color:#493b2f;z-index:3;animation:guidePaperArrive .22s ease-out both}
#game-container .guide-note-heading {display:flex;align-items:center;gap:9px;margin:0 0 13px}
#game-container .guide-note-host {width:51px;height:58px;object-fit:contain;flex:none;margin-top:-5px}
#game-container .guide-note-heading small {font:400 11px/1.4 var(--ui-body);color:#9a7854;letter-spacing:1px}
#game-container .guide-note-heading h2 {font:400 22px/1.35 var(--font-ui-title);color:#644a32;margin:1px 0 0;letter-spacing:.5px}
#game-container .guide-note-content {display:flex;align-items:center;gap:12px;min-width:0}
#game-container .guide-note-portrait {width:70px;height:78px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 0 #72532c22)}
#game-container .guide-note-copy {min-width:0;flex:1}
#game-container .guide-note-trait {display:inline-block;border-radius:5px;background:#e7cb9c;color:#785528;padding:3px 7px;font:400 12px/1.3 var(--font-ui-title);margin-bottom:5px}
#game-container .guide-note-trait[hidden] {display:none}
#game-container .guide-note-copy p {font:400 15px/1.7 var(--ui-body);margin:0;white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty;color:#493b2f}
#game-container .guide-note-footer {margin-top:12px;min-height:43px;padding-top:9px;display:flex;align-items:center;justify-content:center;border:0;background:url('../assets/hero_detail_20260926/ink-divider.webp') center top/160px 11px no-repeat;font:400 12px/1.4 var(--ui-body);color:#98754e;letter-spacing:.08em}
#game-container .guide-monster-focus {position:absolute;z-index:2;pointer-events:none}
#game-container .guide-monster-focus canvas {width:100%;height:100%;display:block;filter:drop-shadow(0 2px 3px #ead3a438)}
#game-container .guide-monster-focus::after {content:'';position:absolute;inset:-5px;border-radius:9px;border:2px solid #ecd399;mask:linear-gradient(#000 0 0) top left/10px 10px,linear-gradient(#000 0 0) top right/10px 10px,linear-gradient(#000 0 0) bottom left/10px 10px,linear-gradient(#000 0 0) bottom right/10px 10px;mask-repeat:no-repeat;opacity:.9}
.is-mobile-game #game-container :is(.guide-text-main,.guide-note-copy p) {font-size:var(--mobile-reading,16px)}
.is-mobile-game #game-container .guide-note-heading h2 {font-size:calc(var(--mobile-reading,16px) + 6px)}
.is-mobile-game #game-container .guide-note-footer {min-height:var(--mobile-tap,48px);font-size:var(--mobile-meta,12px)}
#game-container .guide-note-card {padding:12px 16px 0}
#game-container .guide-note-card .guide-note-heading {margin-bottom:7px;gap:7px}
#game-container .guide-note-card .guide-note-heading small {display:none}
#game-container .guide-note-card .guide-note-host {width:28px;height:30px}
#game-container .guide-note-card .guide-note-heading h2 {font-size:20px;line-height:1.3}
#game-container .guide-note-card .guide-note-copy p {line-height:1.5}
#game-container .guide-note-card .guide-note-footer,.is-mobile-game #game-container .guide-note-card .guide-note-footer {margin-top:8px;min-height:30px;font-size:12px}
@keyframes guidePaperArrive {from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#game-container :is(.guide-overlay,.guide-bubble-container,.guide-note){animation-duration:.01ms!important}}