/* Optional shared styles. data-shared-styles selects existing features.
 * :where() adds no specificity; keep feature order when adding rules. */

/* shared-pixel.css */
:where(html[data-shared-styles~="pixel"]) .pixel { image-rendering:pixelated; image-rendering:crisp-edges; }

/* shared-canvas-background.css */
:where(html[data-shared-styles~="canvas-background"]) .canvas-bg {
      background-image:
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.04) 75%);
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    }

/* shared-chat-textarea.css */
:where(html[data-shared-styles~="chat-textarea"]) textarea.chat-textarea { resize: none; overflow: hidden; display: block; }

/* shared-crafting-feedback.css */
:where(html[data-shared-styles~="crafting-feedback"]) .glow-success { animation: glowS 0.6s ease-out; }
:where(html[data-shared-styles~="crafting-feedback"]) .glow-fail { animation: glowF 0.4s ease-out; }

/* shared-hero-title.css */
:where(html[data-shared-styles~="hero-title"]) .hero-title {
      background: linear-gradient(120deg, #ffd06b 30%, #ffe1a2 50%, #ffd06b 70%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

/* shared-landing.css */
:where(html[data-shared-styles~="landing"]) .hero-bg {
      background-image: linear-gradient(180deg, rgba(11,13,20,0.35) 0%, rgba(11,13,20,0.55) 55%, rgba(11,13,20,0.96) 100%), url('/assets/backgrounds/bg_heaven_tower.webp');
      background-size: cover;
      background-position: center;
    }
:where(html[data-shared-styles~="landing"]) .world-card-bg {
      background-size: cover;
      background-position: center;
      image-rendering: pixelated;
    }
:where(html[data-shared-styles~="landing"]) .boss-silhouette {
      filter: brightness(0) drop-shadow(0 0 12px rgba(0,0,0,0.55));
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }
:where(html[data-shared-styles~="landing"]) .section-heading {
      font-family: 'DotGothic16', sans-serif;
    }

/* shared-main-spacing.css */
:where(html[data-shared-styles~="main-spacing"]) main { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }

/* shared-market-tabs.css */
:where(html[data-shared-styles~="market-tabs"]) .tab-active { background:#20253a; color:#ffd06b; border-color:rgba(255,208,107,.3); }
:where(html[data-shared-styles~="market-tabs"]) .tab-inactive { background:#0b0d14; color:#94a3b8; border-color:#2a3046; }
:where(html[data-shared-styles~="market-tabs"]) .subtab-active { background:#20253a; color:#ffd06b; border-color:rgba(255,208,107,.3); }
:where(html[data-shared-styles~="market-tabs"]) .subtab-inactive { background:#0e1018; color:#94a3b8; border-color:#2a3046; }

/* shared-scrollbar.css */
:where(html[data-shared-styles~="scrollbar"]) .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
:where(html[data-shared-styles~="scrollbar"]) .hide-scrollbar::-webkit-scrollbar { display: none; }

/* shared-tab-button.css */
:where(html[data-shared-styles~="tab-button"]) .tab-btn { border-bottom: 2px solid transparent; }

/* shared-storage-tabs.css */
:where(html[data-shared-styles~="storage-tabs"]) .tab-btn.active { border-bottom-color: #ffbb3a; color: #ffbb3a; }

/* shared-nav-icon.css */
:where(html[data-shared-styles~="nav-icon"]) .nav-icon { width:24px; height:24px; object-fit:contain; }

/* shared-bottom-sheet.css */
:where(html[data-shared-styles~="bottom-sheet"]) #bottom-sheet { transition: transform 0.3s ease; }

/* shared-storage-layout.css */
:where(html[data-shared-styles~="storage-layout"]) .storage-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 767px) {
:where(html[data-shared-styles~="storage-layout"]) .storage-two-col { display: block; }
    }

/* D162 */
:where(html[data-shared-styles~="d162"]) .turn-tag {
      display:inline-block; min-width:2.4em;
      color:#64748b; font-size:10px; margin-right:6px;
    }

/* D141 */
:where(html[data-shared-styles~="d141"]) .log-encounter { color:#ffd06b; font-weight:bold; }

/* D142 */
:where(html[data-shared-styles~="d142"]) .log-victory { color:#7be36b; font-weight:bold; padding-top:6px; }

/* D143 */
:where(html[data-shared-styles~="d143"]) .log-defeat { color:#ff7373; font-weight:bold; padding-top:6px; }

/* D144 */
:where(html[data-shared-styles~="d144"]) .log-turn-head { display:flex; align-items:center; gap:6px; margin-top:8px; color:#94a3b8; font-size:11px; font-weight:bold; }

/* D145 */
:where(html[data-shared-styles~="d145"]) .log-turn-head-rule { flex:1; border-top:1px solid #475569; }

/* D146 */
:where(html[data-shared-styles~="d146"]) .log-side-ally { border-left:3px solid #378ADD; padding-left:6px; }

/* D147 */
:where(html[data-shared-styles~="d147"]) .log-side-enemy { border-left:3px solid #E24B4A; padding-left:6px; }

/* D148 */
:where(html[data-shared-styles~="d148"]) .log-num-dmg { color:#FAC775; font-size:1.2em; font-weight:700; }

/* D149 */
:where(html[data-shared-styles~="d149"]) .log-num-heal { color:#5DCAA5; font-size:1.2em; font-weight:700; }

/* D150 */
:where(html[data-shared-styles~="d150"]) .log-hpbar { display:inline-block; width:56px; height:6px; margin-left:4px; border-radius:3px; background:#1e293b; overflow:hidden; vertical-align:middle; }

/* D175 */
:where(html[data-shared-styles~="d175"]) .clog-defeat { color:#ff7373; font-weight:bold; padding-top:4px; font-size:12px; }

/* D139-2 */
:where(html[data-shared-styles~="d139-2"]) body { background: radial-gradient(at top, #1b2238, #0b0d14 60%); }

/* D139-3 */
:where(html[data-shared-styles~="d139-3"]) body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* D139-4 */
:where(html[data-shared-styles~="d139-4"]) body { background: radial-gradient(ellipse at top, #1a1f35, #0b0d14 70%); }

/* D152-1 */
:where(html[data-shared-styles~="d152-1"]) button, :where(html[data-shared-styles~="d152-1"]) a { transition:transform .05s ease, opacity .1s ease; -webkit-tap-highlight-color:transparent; }

/* D152-2 */
:where(html[data-shared-styles~="d152-2"]) button, :where(html[data-shared-styles~="d152-2"]) a { transition: transform .05s ease, background-color .1s ease; -webkit-tap-highlight-color: transparent; }

/* D152-3 */
:where(html[data-shared-styles~="d152-3"]) button, :where(html[data-shared-styles~="d152-3"]) a { transition: transform .05s ease, background-color .1s ease, border-color .1s ease; -webkit-tap-highlight-color: transparent; }

/* D165 */
:where(html[data-shared-styles~="d165"]) .gold-panel { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 640px) {
:where(html[data-shared-styles~="d165"]) .gold-panel { grid-template-columns: 1fr; }
    }

/* C-0496-31 */
/* D194: former inline declarations. */
:where(html[data-shared-styles~="d194"]) .shared-d194 { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) }
/* D195: former inline declarations. */
:where(html[data-shared-styles~="d195"]) .shared-d195.shared-d195 { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
/* D196: former inline declarations. */
:where(html[data-shared-styles~="d196"]) .shared-d196.shared-d196 { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
/* D197: former inline declarations. */
:where(html[data-shared-styles~="d197"]) .shared-d197 { background-image: url('/assets/ui/pico_faces.png'); background-repeat: no-repeat; background-size: 300% 300%; background-position: 0% 0%; image-rendering: pixelated; }
/* D198: former inline declarations. */
:where(html[data-shared-styles~="d198"]) .shared-d198.shared-d198 { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) }
/* D199: former inline declarations. */
:where(html[data-shared-styles~="d199"]) .shared-d199 { padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px); }
/* D200: former inline declarations. */
:where(html[data-shared-styles~="d200"]) .shared-d200.shared-d200, :where(html[data-shared-styles~="d200"]) #profile-modal > .shared-d200 { margin-top: calc(56px + env(safe-area-inset-top, 0px) + 8px); max-height: calc(90vh - 56px - env(safe-area-inset-top, 0px) - 16px); }
/* D201: former inline declarations. */
:where(html[data-shared-styles~="d201"]) .shared-d201 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }