/* Shrimprium star chart: pixel stars joined like constellations on a deep night sky.
   Opt-in with ?ui=star (see index.html). Generated from coralTheme.css, then tuned by hand at the end. */
@import url('./coralFonts.css');

html[data-ui-theme="star-chart"] {
  --sc-void:#04060b; --sc-deep:#070b14; --sc-panel:#0a101c; --sc-raise:#101a2c;
  --sc-line:#1d2a40; --sc-line-hi:#6e5428; --sc-cyan:#7fddeb; --sc-warm:#ffb38a; --sc-green:#9be29a; --sc-violet:#b59cff;
  --sc-text:#eef3fb; --sc-muted:#93a0b4; --sc-dim:#56637a;
  /* Titles use the body sans instead of Gowun Batang: the serif read heavy in Korean menus. */
  --ui-font-display:var(--ui-font-body);
  --sc-gold:#cdb486; --sc-brass:#a88d5e; --sc-brass-dim:#6e5428; --sc-cream:#e5dcc4;
  /* Celestial brass buttons (scripts/build-star-ui-buttons.mjs). Every button uses the same 10px rim
     and 64px face tile, so the engraving keeps one scale at any size; edges repeat, never stretch. */
  --sc-button-rim:url('../../assets/ui/star-chart/button-rim.png') 20 / 10px / 0 repeat;
  --sc-button-bg:url('../../assets/ui/star-chart/button-face.png') 0 0 / 64px 64px,linear-gradient(#1d2c4d,#101a30);
  --sc-button-ink:#e5dcc4;
  --sc-button-glow:0 0 0 1px rgba(205,180,134,.55),0 0 8px rgba(205,180,134,.22);
  --sc-panel-frame:url('../../assets/ui/star-chart/panel-frame.png') 20 / 10px / 0 repeat;
  --ui-bronze:var(--sc-line-hi); --ui-gold:var(--sc-gold); --ui-cream:var(--sc-text);
  --ui-slate:var(--sc-raise); --ui-deep:var(--sc-deep); --ui-line:var(--sc-line-hi);
  /* The house and a few JS-injected styles still read the painted textures. */
  --ui-panel-image:url('../../assets/ui/coral-bronze/panel.webp');             --ui-panel-slice:145;
  --ui-button-image:url('../../assets/ui/coral-bronze/button.webp');           --ui-button-slice:90;
  --ui-header-image:url('../../assets/ui/coral-bronze/header.webp');
  --ui-painted-key:url('../../assets/ui/coral-bronze/painted-key.webp');
  --ui-hud-rail:url('../../assets/ui/coral-bronze/hud-rail.webp');             --ui-hud-rail-slice:20% 12% 20% 12%;
  --ui-inset-plate:url('../../assets/ui/coral-bronze/inset-plate.webp');       --ui-inset-plate-slice:19% 12% 20% 12%;
  --ui-meter-bezel:url('../../assets/ui/coral-bronze/meter-bezel.webp');       --ui-meter-bezel-slice:24% 14% 24% 14%;
  color-scheme:dark;
}
html[data-ui-theme="star-chart"] body {
  background:#000; color:var(--sc-text); font-family:var(--ui-font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
html[data-ui-theme="star-chart"] :is(.lab,#aquariumScaleWrap,#communityGameOverlay,.lab-center-modal,#globalOverlayMount,.coral-dialog) {
  --text:#eef3fb; --muted:#93a0b4; --pixel:var(--ui-font-body); --mono:var(--ui-font-number);
  --bg:#070b14; --panel:#0a101c; --panel2:#101a2c; --line:#1d2a40;
  --ac:#cdb486; --ac-soft:#cdb48622; --ac-line:#6e5428;
  --ok:#9be29a; --warn:#ffd27a; --danger:#ff8a7a;
  --rw-p1:#070b14; --rw-p2:#101a2c; --rw-bevel:inset 0 0 0 2px #1d2a40;
  --glass-face:none;
  --glass-tint:#0a101c; --glass-tint-strong:#070b14;
  --glass-line:#6e5428; --glass-line-soft:#1d2a40;
  --glass-lip:inset 0 0 0 2px #1d2a40;
  --glass-on-tint:#101a2c; --glass-on-line:#cdb486;
  --gp-sunk:#04060b; --gp-face:#0a101c; --gp-face-hi:#101a2c; --gp-line:#1d2a40;
  font-family:var(--ui-font-body);
}
/* Override legacy inline pixel-font declarations on text; sprite rendering is untouched. */
html[data-ui-theme="star-chart"] :is(button,input,select,textarea),
html[data-ui-theme="star-chart"] :is(.lab-center-modal,#labMenuOverlay,#globalOverlayMount,.coral-dialog,.login-card) [style*="font-family"] {
  font-family:var(--ui-font-body)!important; -webkit-font-smoothing:antialiased;
}
html[data-ui-theme="star-chart"] :is(button,input,select,textarea):focus-visible {
  outline:2px solid #cdb486!important; outline-offset:2px;
}
html[data-ui-theme="star-chart"] :is(input,select,textarea) {
  background:#070b14!important; color:#eef3fb!important; border-color:#6e5428!important;
  border-radius:0!important; box-shadow:inset 0 2px 4px #0007,0 1px #cdb48622!important;
  caret-color:#eef3fb; accent-color:#93a0b4;
}
html[data-ui-theme="star-chart"] input::placeholder {color:#93a0b4;opacity:1;}
html[data-ui-theme="star-chart"] :is(.lab-center-modal,.coral-dialog) input {font-size:12px!important;}
/* Common large shell: corners remain fixed while the middle stretches. */
html[data-ui-theme="star-chart"] :is(.lab-column,.lab-center-modal) {
  background:#070b14!important; border:2px solid #6e5428!important;
  border-radius:0; box-shadow:0 8px 24px #0009,0 1px 0 #cdb48666!important;
  color:var(--ui-cream);
}
/* These cards are repainted with the inset plate below; only the frame thickness and text colour come from here. */
html[data-ui-theme="star-chart"] :is(.coral-dialog,.shelf-confirm-card,.tutorial-mode-card,.ff-modal,.ff-result-card,.login-card) {
  border:2px solid transparent!important; color:var(--ui-cream);
}
html[data-ui-theme="star-chart"] :is(.lab-menu-overlay,.lab-center-modal-backdrop,.coral-dialog-overlay) {background:#0313166e;backdrop-filter:none;}
html[data-ui-theme="star-chart"] #labCenterModal {padding:9px 9px 11px;}
html[data-ui-theme="star-chart"] #labMenuOverlay .lab-column {padding:9px 9px 11px;}
html[data-ui-theme="star-chart"] #labMenuAllPanel {gap:10px;}
html[data-ui-theme="star-chart"] #labMenuOverlay .panel-group {gap:7px;padding:0;border:0;background:none;}
html[data-ui-theme="star-chart"] #labMenuOverlay .panel-toggles {gap:12px;}
html[data-ui-theme="star-chart"] #labMenuOverlay .hamburger-label {
  letter-spacing:0!important;transform:none!important;font-size:12px;font-weight:700;line-height:1.3;
  font-family:var(--ui-font-display)!important;
}
html[data-ui-theme="star-chart"] #aquariumCard :is(.panel-group button,.lab-menu-settings-btn,.lab-menu-tutorial-btn) {
  position:relative;min-height:33px;padding:6px 10px;justify-content:center;
  background:#17233a;border:2px solid #6e5428;border-radius:0;
  box-shadow:0 2px 2px #0009;color:#eef3fb;text-shadow:0 1px 2px #061617,0 1px #061617;
  font-family:var(--ui-font-display)!important;font-weight:700;
}
html[data-ui-theme="star-chart"] #aquariumCard .panel-group button.active {filter:brightness(1.17);outline:1px solid #cdb486;outline-offset:-2px;}
html[data-ui-theme="star-chart"] #aquariumCard .panel-group button:disabled {filter:grayscale(.6) brightness(.72);color:#eef3fb;opacity:1;box-shadow:none;}
html[data-ui-theme="star-chart"] button[data-lock-lv]::after {background:#070b14;color:#eef3fb;border:1px solid #6e5428;border-radius:0;text-shadow:none;font-family:var(--ui-font-number);}
/* Shared detail typography and surfaces. Never target world .layer.body. */
html[data-ui-theme="star-chart"] .lab-center-modal :is(.card,.frame) {background:transparent!important;border-color:#1d2a40;box-shadow:none;}
html[data-ui-theme="star-chart"] .lab-center-modal .card>.head {
  background:#0a101c var(--ui-header-image) center/100% 100% no-repeat!important;
  border:1px solid #6e5428;border-radius:0;min-height:37px;padding:9px 18px;
  box-shadow:0 2px 4px #0006;
}
html[data-ui-theme="star-chart"] .lab-center-modal .card>.head .title {
  color:#eef3fb;font:700 14px/1.25 var(--ui-font-display)!important;letter-spacing:0;text-shadow:0 2px 2px #031415;
}
html[data-ui-theme="star-chart"] .lab-center-modal .card>.body {background:#070b14b8!important;padding:10px 5px;border:0;}
html[data-ui-theme="star-chart"] :is(.lab-center-modal,.coral-dialog) :is(button,.btn-back,.inv-action-btn) {
  background:linear-gradient(#17233a,#101a2c)!important;color:#eef3fb;border:1px solid #6e5428;border-radius:0;
  box-shadow:inset 0 1px #cdb4864a,inset 0 -2px #0a1b1c99,0 1px 2px #0007;
  text-shadow:0 1px 1px #091b1c;font-weight:600;
}
html[data-ui-theme="star-chart"] .lab-center-modal button:disabled {background:#0a101c!important;color:#93a0b4!important;border-color:#1d2a40!important;box-shadow:inset 0 1px #6e542833;opacity:.68;}
html[data-ui-theme="star-chart"] :is(.lab-center-modal,.coral-dialog) :is(button.active,button.on,[aria-pressed="true"],.selected) {border-color:#cdb486!important;background:linear-gradient(#17233a,#101a2c)!important;box-shadow:inset 0 1px #cdb48666,0 0 0 1px #cdb48626;}
html[data-ui-theme="star-chart"] :is(.lab-center-modal,.coral-dialog) :is(.settings-danger-btn,#deleteAccountBtn,[data-action="confirm-delete"]) {background:linear-gradient(#17233a,#0a101c)!important;color:#eef3fb!important;border-color:#6e5428!important;}
html[data-ui-theme="star-chart"] :is(.lab-center-modal,#labMenuOverlay,.coral-dialog) button:not(:disabled):hover {filter:brightness(1.1);}
html[data-ui-theme="star-chart"] :is(.lab-center-modal,#labMenuOverlay,.coral-dialog) button:not(:disabled):active {filter:brightness(.9);box-shadow:inset 0 2px 4px #0008;}
/* Four shortcuts use smaller sans labels; the shelf stays readable in both languages. */
html[data-ui-theme="star-chart"] #aquariumCard .lab-menu-tab {font:600 10px/1.25 var(--ui-font-body)!important;letter-spacing:0;min-height:32px;padding:5px 1px;}
html[data-ui-theme="star-chart"] #aquariumCard .lab-menu-tab[aria-selected="true"] {background:linear-gradient(#17233a,#101a2c)!important;}
html[data-ui-theme="star-chart"] #aquariumCard .lab-menu-dismiss {width:24px;min-width:24px;min-height:30px;color:#eef3fb;}
/* Shrimp roster: dark inset plates, round portraits, clear life bars. */
html[data-ui-theme="star-chart"] #shrimpsMount .shrimp-list {gap:6px;}
html[data-ui-theme="star-chart"] #shrimpsMount .shrimp-list-row {
  background:linear-gradient(110deg,#101a2c,#070b14 72%)!important;border:1px solid #6e5428!important;
  border-radius:0!important;box-shadow:inset 0 1px #eef3fb38,inset 0 -2px #061819b3,0 2px 3px #0007!important;
  padding:5px 6px;min-height:42px;
}
html[data-ui-theme="star-chart"] #shrimpsMount .shrimp-list-row:hover {border-color:#cdb486!important;}
html[data-ui-theme="star-chart"] #shrimpsMount .shrimp-list-row-empty {opacity:.45;background:#070b14!important;}
html[data-ui-theme="star-chart"] #shrimpsMount .shrimp-list-row .shrimp-preview {border-radius:50%!important;background:radial-gradient(circle at 35% 25%,#101a2c,#07191e)!important;border:1px solid #6e5428!important;box-shadow:inset 0 1px 4px #000a,0 1px #cdb48640!important;}
html[data-ui-theme="star-chart"] #shrimpsMount .shrimp-list-row span {font-family:var(--ui-font-body);}
html[data-ui-theme="star-chart"] .coral-profile {background:#070b14!important;border:1px solid #6e5428!important;border-radius:0!important;box-shadow:inset 0 1px 4px #0007!important;}
html[data-ui-theme="star-chart"] .coral-health-bar {border:2px solid #6e5428!important;border-radius:0!important;background:#0a2527!important;box-shadow:inset 0 1px 3px #0009,0 1px #cdb48644!important;}
/* Quick actions and persistent HUD: original positions / hit areas are kept. */
html[data-ui-theme="star-chart"] #tank-bottom-control-panel {background:linear-gradient(#17233a,#0a101c)!important;border-color:#cdb486!important;box-shadow:inset 0 2px #cdb48677,0 -2px 5px #00171da8!important;}
html[data-ui-theme="star-chart"] #aquariumMount :is(.quick-action-btn,.tank-bar-btn,.left-hotkey-btn) {
  background:linear-gradient(145deg,#17233a,#101a2c 60%,#0a101c)!important;border:1px solid #6e5428!important;
  border-radius:0!important;box-shadow:inset 0 1px #eef3fb77,inset 0 -2px #071d20aa,0 2px 3px #00121799!important;
  color:#eef3fb;text-shadow:0 1px 2px #001317;
}
html[data-ui-theme="star-chart"] #aquariumMount :is(.quick-action-btn,.tank-bar-btn).on {background:linear-gradient(#17233a,#101a2c)!important;border-color:#cdb486!important;}
html[data-ui-theme="star-chart"] #aquariumMount :is(.quick-action-btn,.tank-bar-btn):disabled {filter:grayscale(.6) brightness(.65);opacity:.8;}
html[data-ui-theme="star-chart"] #aquariumMount :is(.quick-action-btn,.tank-bar-btn):not(:disabled):active {box-shadow:inset 0 3px 4px #0009!important;filter:brightness(.88);}
html[data-ui-theme="star-chart"] #wqSummaryBtn {background:linear-gradient(#101a2c,#070b14)!important;border:2px solid #cdb486!important;border-radius:0!important;box-shadow:inset 0 1px #cdb48644,0 1px 3px #0008!important;color:#eef3fb;}
html[data-ui-theme="star-chart"] #wqSummaryText {font-family:var(--ui-font-number);font-weight:600;}
html[data-ui-theme="star-chart"] :is(#deviceTray,#tankTopBar,#tankSwitchPanel,#stat-upgrade-panel,#quest-panel) {background:#070b14!important;border:1px solid #cdb486!important;border-radius:0!important;box-shadow:inset 0 1px #cdb48633,0 4px 12px #0009!important;}
html[data-ui-theme="star-chart"] :is(.device-tray-btn,.device-tray-detail,.tank-switch-entry,.stat-plus-btn) {background:linear-gradient(#17233a,#101a2c);border-color:#6e5428;color:#eef3fb;border-radius:0;}
html[data-ui-theme="star-chart"] :is(.xp-bar-outer,.pocket-money-badge) {background:linear-gradient(#101a2c,#070b14)!important;border:2px solid #cdb486!important;border-radius:0!important;box-shadow:inset 0 1px #cdb4864d,0 2px 3px #0008!important;}
/* The GRADE track is only 4px tall: real 2px borders leave its fill at 0px. */
html[data-ui-theme="star-chart"] #bond-bar-wrap .bond-bar-track {background:linear-gradient(#101a2c,#070b14);box-shadow:inset 0 0 0 1px #cdb486;}
html[data-ui-theme="star-chart"] :is(#xpBarLabel,#bondBarLabel,#pocketMoneyDisplay) {font-family:var(--ui-font-number)!important;font-weight:700;letter-spacing:-.2px;text-shadow:0 1px 2px #02191a;color:#eef3fb;}
html[data-ui-theme="star-chart"] #xpBarFill {background:linear-gradient(#17233a,#17233a)!important;}
/* Structured settings, commerce, inventory, community and editor surfaces. */
html[data-ui-theme="star-chart"] :is(.shop-card,.accessory-row,.settings-row,.community-published-tank-row,.community-my-published-card,.report-list,.controller-settings-frame,.controller-equipment-readonly,.gs-slot-info-bar) {background:linear-gradient(135deg,#0a101c,#070b14)!important;border-color:#1d2a40!important;border-radius:0;box-shadow:inset 0 1px #6e542822;}
html[data-ui-theme="star-chart"] :is(.inv-grid,.gs-row,.decorate-inv-grid) {background:#070b14!important;border-color:#1d2a40;}
html[data-ui-theme="star-chart"] :is(.inv-cell,.gs-slot,.decorate-inv-cell) {border-color:#6e5428!important;border-radius:0;background-color:#0a101c!important;box-shadow:inset 0 1px #6e542822;}
html[data-ui-theme="star-chart"] :is(.inv-cell.selected,.gs-slot.selected,.decorate-inv-sel) {outline:1px solid #cdb486!important;outline-offset:-2px;}
html[data-ui-theme="star-chart"] :is(.decorate-inv-wrap,.decorate-inv-actions,.decorate-action-overlay,.shelf-topbar,.community-visit-topbar) {background:linear-gradient(#0a101c,#070b14)!important;border-color:#6e5428!important;box-shadow:inset 0 1px #cdb48633,0 2px 5px #0007!important;}
html[data-ui-theme="star-chart"] :is(.decorate-inv-action-btn,.decorate-action-btn,.shelf-close-btn,.community-like-btn,.community-leave-visit-btn) {background:linear-gradient(#17233a,#101a2c)!important;border-color:#cdb486!important;border-radius:0;color:#eef3fb;}
html[data-ui-theme="star-chart"] :is(.shelf-slot,.tank-switch-entry) {border-color:#6e5428!important;}
html[data-ui-theme="star-chart"] :is(.controller-settings-frame-title,.community-section-title,.shop-category-title,.report-title) {font-family:var(--ui-font-display)!important;color:#eef3fb;font-weight:700;}
html[data-ui-theme="star-chart"] :is(.temp-graph-wrap,.wq-grid,.controller-settings-cell .cell-value) {background:#070b14!important;border-color:#1d2a40!important;color:#eef3fb;}
/* Onboarding and secondary global dialogs share the material language. */
html[data-ui-theme="star-chart"] :is(.login-title,.tanksetup-title,.ceremony-title,.bc-title,.lvup-title) {font-family:var(--ui-font-display)!important;font-weight:700;color:#eef3fb!important;text-shadow:0 2px 3px #001a1f;}
html[data-ui-theme="star-chart"] :is(.login-btn,.login-lang-btn,.tanksetup-btn,.ceremony-btn,.bc-btn,.lvup-btn,.ff-btn) {background:linear-gradient(#17233a,#101a2c);color:#eef3fb;border:1px solid #cdb486;border-radius:0;box-shadow:inset 0 1px #cdb48655,0 2px 4px #0006;}
html[data-ui-theme="star-chart"] :is(.alert-toast-item,#device-info-toast) {background:#070b14f2;border-color:#6e5428;border-radius:0;color:#eef3fb;font-family:var(--ui-font-body)!important;}
/* 수질·배고픔 안내는 배경 없이 빛나는 글씨만 */
html[data-ui-theme="star-chart"] .wq-led-toast {font-family:var(--ui-font-body)!important;}
html[data-ui-theme="star-chart"] :is(.lab-center-modal,#labMenuAllPanel,.coral-dialog) {scrollbar-width:thin;scrollbar-color:#cdb486 #070b14;}
html[data-ui-theme="star-chart"] :is(.lab-center-modal,#labMenuAllPanel,.coral-dialog)::-webkit-scrollbar {width:5px;height:5px;}
html[data-ui-theme="star-chart"] :is(.lab-center-modal,#labMenuAllPanel,.coral-dialog)::-webkit-scrollbar-thumb {background:#cdb486;border:1px solid #cdb486;border-radius:0;}
@media(prefers-reduced-motion:reduce){html[data-ui-theme="star-chart"] :is(button,.lab-column,.lab-center-modal){transition:none!important;}}
/* Integration refinements: reserve the existing care bar and retain semantic states. */
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModalBackdrop { bottom:var(--panel-h,40px); }
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal {
  top:calc((100% - var(--panel-h,40px)) / 2);
  height:min(86%,calc(100% - var(--panel-h,40px) - 18px));
}
html[data-ui-theme="star-chart"] :is(.lab,#aquariumScaleWrap,#communityGameOverlay,.lab-center-modal,#globalOverlayMount,.coral-dialog) {
  --pixel9:var(--ui-font-body); --pixel11:var(--ui-font-body);
}
html[data-ui-theme="star-chart"] .coral-dialog .coral-dialog-danger-btn {
  background:linear-gradient(#17233a,#0a101c)!important;color:#eef3fb!important;border-color:#6e5428!important;
}
html[data-ui-theme="star-chart"] #aquariumMount :is(.quick-action-btn,.tank-bar-btn).active {
  background:linear-gradient(#17233a,#101a2c)!important;border-color:#cdb486!important;
  box-shadow:inset 0 1px #cdb48666,0 0 0 1px #cdb48680!important;
}
/* The menu panel clips at the button edge, so the ring and glow sit inside the button. */
html[data-ui-theme="star-chart"] #aquariumCard .panel-group button.tutorial-highlight {
  outline:2px solid #75eaa3!important;outline-offset:-2px;box-shadow:inset 0 0 8px #3fe08a!important;
}
html[data-ui-theme="star-chart"] #shrimpsMount .shrimp-list-row .shrimp-preview {
  width:30px!important;height:30px!important;min-width:30px;flex:0 0 30px;
}
html[data-ui-theme="star-chart"] :is(.ceremony-headline,.bc-headline,.lvup-headline,.ff-title) {
  font-family:var(--ui-font-display)!important;font-weight:700;color:#eef3fb;text-shadow:0 2px 3px #071b1d;
}
html[data-ui-theme="star-chart"] .ff-loading-inner {background:#112b2d!important;border-color:#6e5428!important;}

/* Overlay coverage: these roots are mounted after boot and had local pixel fonts. */
html[data-ui-theme="star-chart"] :is(.lab,#aquariumScaleWrap,#communityGameOverlay,.lab-center-modal,#globalOverlayMount,.coral-dialog) {
  --sans:var(--ui-font-body);
}
html[data-ui-theme="star-chart"] :is(.loading-overlay,.scene-loading,.login-overlay,.tanksetup-root,.ceremony-root,.bc-root,.lvup-root,.ff-loading,.ff-result,.coral-dialog-overlay) {
  --pixel:var(--ui-font-body); --pixel9:var(--ui-font-body); --pixel11:var(--ui-font-body);
  --sans:var(--ui-font-body); --mono:var(--ui-font-number);
  font-family:var(--ui-font-body)!important;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Target the HUD inside .tank, not floating shrimp/world labels or sprite layers. */
html[data-ui-theme="star-chart"] #aquariumMount :is(#tank-bottom-control-panel,#left-action-column,#tank-top-right-actions,#quest-panel-wrap,#stat-upgrade-panel,#xp-bar-wrap,#bond-bar-wrap,#sky-bar),
html[data-ui-theme="star-chart"] #aquariumMount #left-action-column .tank-switch-price,
html[data-ui-theme="star-chart"] #aquariumMount #sky-bar .decorate-time-display {
  font-family:var(--ui-font-body)!important;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
html[data-ui-theme="star-chart"] :is(.tanksetup-next,.tanksetup-back,.shelf-confirm-yes,.shelf-confirm-no) {
  background:linear-gradient(#17233a,#101a2c)!important;color:#eef3fb!important;
  border:1px solid #cdb486!important;border-radius:0;
  box-shadow:inset 0 1px #cdb48655,inset 0 -2px #0a1b1c66,0 2px 3px #0006;
  font-family:var(--ui-font-body)!important;font-weight:600;
}
html[data-ui-theme="star-chart"] :is(.tanksetup-back,.shelf-confirm-no) {
  background:linear-gradient(#101a2c,#0a101c)!important;color:#eef3fb!important;border-color:#6e5428!important;
}
html[data-ui-theme="star-chart"] :is(.tanksetup-next,.tanksetup-back,.shelf-confirm-yes,.shelf-confirm-no):disabled {
  background:#0a101c!important;color:#93a0b4!important;border-color:#1d2a40!important;opacity:.6;box-shadow:none;
}
html[data-ui-theme="star-chart"] :is(.tanksetup-next,.tanksetup-back,.shelf-confirm-yes,.shelf-confirm-no):not(:disabled):active {
  box-shadow:inset 0 2px 4px #0009;filter:brightness(.88);
}
html[data-ui-theme="star-chart"] .shelf-confirm-title {font-weight:700;}
/* Actual decoration hooks: the context toolbar is a sibling of aquariumMount. */
html[data-ui-theme="star-chart"] #decorateModeChrome #decorate-action-overlay .decorate-overlay-btn {
  background:linear-gradient(#17233a,#101a2c)!important;color:#eef3fb!important;
  border:1px solid #cdb486!important;border-radius:0;
  box-shadow:inset 0 1px #cdb4864d,inset 0 -2px #071c2077,0 1px 2px #00141699!important;
}
html[data-ui-theme="star-chart"] #decorateModeChrome #decorate-action-overlay .decorate-overlay-btn:disabled {
  background:#0a101c!important;color:#56637a!important;border-color:#1d2a40!important;box-shadow:none!important;opacity:.6;
}
html[data-ui-theme="star-chart"] #decorateModeChrome #decorate-action-overlay .decorate-overlay-btn[data-active="1"] {
  background:linear-gradient(#17233a,#17233a)!important;border-color:#cdb486!important;
}
html[data-ui-theme="star-chart"] #decorateModeChrome #decorate-action-overlay .decorate-overlay-btn:not(:disabled):active {
  box-shadow:inset 0 2px 4px #000a!important;filter:brightness(.88);
}
html[data-ui-theme="star-chart"] #decorateModeChrome :is(.decorate-overlay-micro,.decorate-sensor-chip) {
  background:#070b14!important;color:#eef3fb;border-color:#6e5428!important;border-radius:0;
  box-shadow:inset 0 1px #cdb48622,inset 0 2px 3px #051a1c77;
}
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-position-toggle-btn {
  background:linear-gradient(#17233a,#0a101c)!important;border-color:#6e5428!important;color:#eef3fb;
}
/* The login card gained a frame; keep its contents inside the fixed corners. */
html[data-ui-theme="star-chart"] .login-card {
  width:min(calc(100% - 40px),340px);box-sizing:border-box;padding:20px 16px 16px;
  max-height:calc(100dvh - 104px);overflow-y:auto;
}
html[data-ui-theme="star-chart"] .login-title {font-size:16px;line-height:1.5;}
html[data-ui-theme="star-chart"] .consent-title {color:#eef3fb;font-size:10px;}
html[data-ui-theme="star-chart"] .consent-scroll {
  background:#10262b;border:1px solid #6e5428;border-radius:0;
  box-shadow:inset 0 1px 4px #0006;color:#eef3fb;font-size:10px;
}
html[data-ui-theme="star-chart"] .consent-scroll strong {color:#eef3fb;}
html[data-ui-theme="star-chart"] .consent-check {color:#eef3fb;}
/* Preserve high contrast for the original dark provider logos. */
html[data-ui-theme="star-chart"] :is(.login-btn-apple,.login-btn-google) {
  background:linear-gradient(#eef3fb,#cdb486);color:#56637a;border-color:#cdb486;
  box-shadow:inset 0 1px #cdb486aa,0 2px 3px #0006;text-shadow:none;
}
html[data-ui-theme="star-chart"] .coral-dialog-choice>div:first-child {color:#eef3fb!important;font-weight:700;}
html[data-ui-theme="star-chart"] .coral-dialog-choice>div:last-of-type {color:#93a0b4!important;}
html[data-ui-theme="star-chart"] .shelf-top-bar {
  background:linear-gradient(#0a101c,#070b14)!important;border-color:#6e5428!important;
}
html[data-ui-theme="star-chart"] :is(.shelf-top-title,.shelf-hud-card) {font-family:var(--ui-font-body);color:#eef3fb;}

/* Controller panels use a separate legacy alias, resolved at :root before inheritance. */
html[data-ui-theme="star-chart"] :is(.lab,#aquariumScaleWrap,#communityGameOverlay,.lab-center-modal,#globalOverlayMount,.coral-dialog) {
  --font-sans:var(--ui-font-body);
}
html[data-ui-theme="star-chart"] :is(.lab,.lab-center-modal,#shrimpsMount,#matingMount,#analysisMount,#tradeMount,#reportMount,#challengeMount,#weeklyMount) {
  -webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;text-rendering:optimizeLegibility;
}
html[data-ui-theme="star-chart"] #shrimpsMount.shrimps-panel :is(svg,svg text) {
  font-family:var(--ui-font-body)!important;
}
/* Legacy panel-wide !important typography must not flatten serif panel headings. */
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal .card>.head .title {
  font-family:var(--ui-font-display)!important;font-weight:700;
}
html[data-ui-theme="star-chart"] .loading-text {
  font-family:var(--ui-font-body)!important;-webkit-font-smoothing:antialiased;
}
/* Controller ON/OFF are permanent button roles; only .active denotes state. */
html[data-ui-theme="star-chart"] #controllerMount .push-toggle-btn:not(.active):not(.set) {
  background:linear-gradient(#101a2c,#0a101c)!important;color:#eef3fb!important;
  border-color:#6e5428!important;box-shadow:inset 0 1px #6e54282b,0 1px 2px #0007!important;
}
html[data-ui-theme="star-chart"] #controllerMount .push-toggle-btn.on.active {
  background:linear-gradient(#17233a,#101a2c)!important;color:#ebf9d9!important;border-color:#6e5428!important;
  box-shadow:inset 0 -3px #97d8a4,inset 0 1px #cdb4863b,0 1px 2px #0007!important;
}
html[data-ui-theme="star-chart"] #controllerMount .push-toggle-btn.off.active {
  background:linear-gradient(#17233a,#101a2c)!important;color:#eef3fb!important;border-color:#cdb486!important;
  box-shadow:inset 0 -3px #cdb486,inset 0 1px #cdb4863b,0 1px 2px #0007!important;
}

/* ── Painted materials ──────────────────────────────────────────────
   Drawn textures over the surfaces above. Layout, hit areas, live values and icons stay DOM-owned. */

/* The housing is drawn independently of the buttons: keep the shared 40px dock. */
html[data-ui-theme="star-chart"] :is(#aquariumCard, #communityGameOverlay) #tank-bottom-control-panel {
  background:#070b14!important;
  border-color:transparent!important;
  border-radius:0!important;
  box-shadow:0 -2px 5px #001014b3!important;
  image-rendering:auto;
}

/* Square hotkeys use an actual chipped stone/brass sprite, including Q and stat +.
   Match stat + by attribute: an ID inside :is() would outrank every active state. */
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount)
  :is(.quick-action-btn,.tank-bar-btn,.left-hotkey-btn,.quest-q-btn,.wq-alarm-hotkey-btn,[id="stat-upgrade-btn"]) {
  background:var(--sc-deep) center / 100% 100% no-repeat!important;
  border-color:transparent!important;
  border-radius:0!important;
  box-shadow:0 2px 2px #001014c0!important;
  color:#eef3fb!important;
  text-shadow:0 1px 2px #001415;
  image-rendering:auto;
}
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount)
  :is(.quick-action-btn,.tank-bar-btn,.left-hotkey-btn,.quest-q-btn,.wq-alarm-hotkey-btn,[id="stat-upgrade-btn"]):not(:disabled):hover {
  filter:brightness(1.08);
}
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount)
  :is(.quick-action-btn,.tank-bar-btn,.left-hotkey-btn,.quest-q-btn,.wq-alarm-hotkey-btn,[id="stat-upgrade-btn"]):not(:disabled):is(:active,.pressing) {
  filter:brightness(.78);
  box-shadow:inset 0 2px 3px #000b!important;
}
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount)
  :is(.quick-action-btn,.tank-bar-btn,.left-hotkey-btn):is(.active,.inv-open,.logic-active) {
  box-shadow:inset 0 -3px #6e5428,0 1px 3px #000a!important;
}
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount)
  :is(.quick-action-btn,.tank-bar-btn,.left-hotkey-btn,.quest-q-btn,.wq-alarm-hotkey-btn,[id="stat-upgrade-btn"]):disabled {
  filter:grayscale(.7) brightness(.62);opacity:.85;
}
/* Availability and quest cues must remain independent from the material's own highlights.
   강조된 버튼은 어디서든 같은 초록 네온으로 보인다. */
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount)
  :is(.tutorial-highlight,#stat-upgrade-btn.has-points),
html[data-ui-theme="star-chart"] .quest-guide-highlight,
html[data-ui-theme="star-chart"] #aquariumCard #deviceTray .quest-guide-highlight {
  outline:2px solid #75eaa3;outline-offset:1px;
  box-shadow:0 0 4px #3fe08a,0 0 10px #3fe08a99!important;
}
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount) .pixel-emoji {image-rendering:pixelated;}

/* An inset status plate leaves room for the existing LED, text and disclosure glyph. */
html[data-ui-theme="star-chart"] #aquariumCard #wqSummaryBtn {
  background:#070b14!important;border-color:transparent!important;
  border-radius:0!important;box-shadow:0 1px 2px #000a!important;image-rendering:auto;
}
html[data-ui-theme="star-chart"] #aquariumCard
  :is(#deviceTray,#tankTopBar,#tankSwitchPanel,#stat-upgrade-panel,#quest-panel) {
  background:#070b14!important;border-color:transparent!important;
  border-radius:0!important;box-shadow:0 3px 7px #000a!important;image-rendering:auto;
}
html[data-ui-theme="star-chart"] #aquariumCard #deviceTray
  :is(.device-tray-btn,.device-tray-detail) {
  background:#101a2c!important;border-color:transparent!important;
  border-radius:0!important;box-shadow:0 1px 2px #000a!important;image-rendering:auto;
}
html[data-ui-theme="star-chart"] #aquariumCard #deviceTray .device-tray-btn.active {
  box-shadow:inset 0 -3px #a6d38a,0 1px 2px #000a!important;color:#e7f4c8!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #deviceTray :is(.device-tray-btn,.device-tray-detail):disabled {
  filter:grayscale(.65) brightness(.62);opacity:.8;
}
html[data-ui-theme="star-chart"] #aquariumCard #deviceTray :is(.device-tray-btn,.device-tray-detail):not(:disabled):active {
  filter:brightness(.78);box-shadow:inset 0 2px 4px #000b!important;
}

/* Meters use only the painted rim; omitting 'fill' keeps live health and XP visible. */
html[data-ui-theme="star-chart"] #aquariumCard .xp-bar-outer,
html[data-ui-theme="star-chart"] #aquariumCard .pocket-money-badge,
html[data-ui-theme="star-chart"] #aquariumCard .coral-health-bar {
  background:#070b14!important;border-color:transparent!important;
  border-radius:0!important;box-shadow:0 1px 2px #0009!important;image-rendering:auto;
}
/* The bond track is just 4px high. Its geometry and actual fill are deliberately retained. */
html[data-ui-theme="star-chart"] #aquariumCard #bondBarLabel {
  color:#eef3fb;text-shadow:0 1px 2px #081a1b;
}

/* Inner detail plates have chiseled edges, not rounded glossy web cards. */
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal
  :is(.shrimp-list-row,.coral-profile,.settings-row,.shop-card,.accessory-row,
      .community-published-tank-row,.community-my-published-card,.report-list,
      .controller-buttons-wrap > .controller-panel,.controller-settings-frame,.gs-slot-info-bar,.kpi) {
  background:#070b14!important;border-color:transparent!important;
  border-radius:0!important;box-shadow:0 1px 3px #0008!important;image-rendering:auto;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal .shrimp-list-row:hover {
  outline:1px solid #cdb486;outline-offset:-2px;
}
/* Existing content height and spacing stay intact; the texture carries its bevel. */
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal
  :is(button,.btn-back,.inv-action-btn):not(.lab-menu-tab):not(.lab-menu-dismiss) {
  background:#101a2c!important;border-color:transparent!important;
  border-radius:0!important;box-shadow:0 1px 2px #0009!important;image-rendering:auto;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal
  button:not(.lab-menu-tab):not(.lab-menu-dismiss):is(.active,[aria-pressed="true"]):not(.off) {
  box-shadow:inset 0 -3px #6e5428,0 1px 2px #0009!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #controllerMount .push-toggle-btn.off.active {
  color:#eef3fb!important;box-shadow:inset 0 -3px #cdb486,0 1px 2px #0009!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #controllerMount .push-toggle-btn:not(.active):not(.set) {
  filter:brightness(.72);color:#eef3fb!important;box-shadow:0 1px 2px #0009!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal
  :is(.settings-danger-btn,#deleteAccountBtn,[data-action="confirm-delete"]) {
  color:#eef3fb!important;box-shadow:inset 0 -3px #ce7864,0 1px 2px #0009!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal
  button:not(.lab-menu-tab):not(.lab-menu-dismiss):disabled {
  filter:grayscale(.7) brightness(.64);opacity:.75;box-shadow:none!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal
  button:not(.lab-menu-tab):not(.lab-menu-dismiss):not(:disabled):active {
  filter:brightness(.78);box-shadow:inset 0 2px 4px #000b!important;
}

/* Tabs and dismissal use the same physical material without changing the full-menu buttons. */
html[data-ui-theme="star-chart"] #aquariumCard .lab-menu-tab {
  background:#0a101c!important;border-color:transparent!important;
  border-radius:0!important;box-shadow:0 1px 2px #0008!important;image-rendering:auto;
}
html[data-ui-theme="star-chart"] #aquariumCard .lab-menu-tab[aria-selected="true"] {
  ;
  color:#eef3fb;box-shadow:inset 0 -2px #cdb486,0 1px 2px #0008!important;
}
html[data-ui-theme="star-chart"] #aquariumCard .lab-menu-tab:disabled {
  filter:grayscale(.75) brightness(.7);color:#93a0b4;
}
html[data-ui-theme="star-chart"] #aquariumCard .lab-menu-dismiss {
  background:var(--sc-deep) center / 100% 100% no-repeat!important;
  border-color:transparent!important;border-radius:0!important;box-shadow:0 1px 2px #0009!important;image-rendering:auto;
}

/* Distinct carved inlays for special tool modes and armed medicine. */
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount) #decorateEraserBtn.active {
  box-shadow:inset 0 -3px #df8b78,0 1px 3px #000a!important;color:#eef3fb!important;
}
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount) #decorateLogicModeBtn.active {
  box-shadow:inset 0 -3px #cdb486,0 1px 3px #000a!important;color:#eef3fb!important;
}
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount) .wq-alarm-hotkey-btn-armed {
  outline:2px solid #df9c78;outline-offset:1px;box-shadow:inset 0 -3px #cdb486,0 1px 3px #000a!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #deviceTrayToggleBtn[aria-expanded="true"] {
  outline:1px solid #cdb486;outline-offset:1px;
}


/* Opaque border-image fill paints over inset shadows. Put state inlays above the art.
   Focus and quest guidance retain their outer ring; disabled controls get no state inlay. */
html[data-ui-theme="star-chart"] #aquariumCard #deviceTray
  .device-tray-btn.active:not(:disabled):not(:focus-visible):not(.quest-guide-highlight),
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal
  button:is(.active,[aria-pressed="true"]):not(.off):not(:disabled):not(:focus-visible):not(.quest-guide-highlight) {
  outline:1px solid #6e5428;outline-offset:-3px;
}
html[data-ui-theme="star-chart"] #aquariumCard #controllerMount
  .push-toggle-btn.off.active:not(:disabled):not(:focus-visible):not(.quest-guide-highlight) {
  outline:1px solid #cdb486;outline-offset:-3px;
}

/* Small cards reuse the quest plate: worn stone edges and a quiet dark center. */
html[data-ui-theme="star-chart"] :is(
  .tanksetup-card,.ceremony-card,.bc-card,.lvup-card,.tutorial-mode-card-inner,
  .ff-card,.ff-modal,.ff-result-card,.ff-result-modal,.shelf-confirm-card,
  .shelf-confirm-modal-content,.coral-dialog,.login-card
) {
  background:#070b14!important;
  border-color:transparent!important;
  border-radius:0!important;
  box-shadow:0 5px 14px #0008!important;
  color:var(--ui-cream);
  image-rendering:auto;
}
/* The tutorial owns an inner card; avoid stacking two opaque frames. */
html[data-ui-theme="star-chart"] .tutorial-mode-card {
  background:none!important;border-color:transparent!important;border-radius:0!important;box-shadow:none!important;
}
html[data-ui-theme="star-chart"] :is(.tanksetup-title,.tutorial-mode-title,.shelf-confirm-title) {
  font-family:var(--ui-font-display)!important;color:#eef3fb!important;
  text-shadow:0 1px 2px #07191b;
}
html[data-ui-theme="star-chart"] :is(.tanksetup-step,.tutorial-mode-page) {color:#93a0b4;}
/* The unlock card is a reward: a warm gold glow around the plate and a gold title. */
html[data-ui-theme="star-chart"] .feature-unlock-card.shelf-confirm-card {
  box-shadow:0 5px 14px #0008,0 0 0 1px #cdb48699,0 0 26px #cdb48666!important;
}
html[data-ui-theme="star-chart"] .feature-unlock-title.shelf-confirm-title {
  color:#eef3fb!important;text-shadow:0 1px 2px #07191b,0 0 10px #eef3fb99;
}

/* Paint action surfaces, leaving color swatches, eggs and provider logos intact. */
html[data-ui-theme="star-chart"] :is(
  .tanksetup-card,.ceremony-card,.bc-card,.lvup-card,.tutorial-mode-card-inner,
  .ff-card,.ff-modal,.ff-result-card,.ff-result-modal,.shelf-confirm-card,
  .shelf-confirm-modal-content,.coral-dialog,.login-card
) button:not(.tanksetup-swatch):not(.tanksetup-block):not(.ceremony-egg-wrap):not(.bc-egg-wrap):not(.login-btn-apple):not(.login-btn-google):not(.coral-dialog-choice),
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel [data-action="quest-claim"],
html[data-ui-theme="star-chart"] #communityGameOverlay .community-game-control-btn {
  background:#101a2c!important;border-color:transparent!important;
  border-radius:0!important;box-shadow:0 2px 3px #0008!important;
  color:var(--ui-action-ink,#eef3fb)!important;text-shadow:0 1px 2px #102b29;
  image-rendering:auto;
}
html[data-ui-theme="star-chart"] :is(
  .tanksetup-card,.ceremony-card,.bc-card,.lvup-card,.tutorial-mode-card-inner,
  .ff-card,.ff-modal,.ff-result-card,.ff-result-modal,.shelf-confirm-card,
  .shelf-confirm-modal-content,.coral-dialog,.login-card
) button:disabled,
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel button:disabled,
html[data-ui-theme="star-chart"] #communityGameOverlay .community-game-control-btn:disabled {
  filter:grayscale(.65) brightness(.68);opacity:.65;
}
html[data-ui-theme="star-chart"] :is(.coral-dialog-danger-btn,.tutorial-mode-nav-close) {
  --ui-action-ink:#ffd0b6;
  outline:1px solid #c78169;outline-offset:-3px;
}
/* Preserve material previews and their selection signals instead of painting over them. */
html[data-ui-theme="star-chart"] :is(.tanksetup-swatch,.tanksetup-block) {
  border-radius:0;border-color:#6e5428;
}
html[data-ui-theme="star-chart"] :is(.tanksetup-swatch,.tanksetup-block).selected {
  border-color:#cdb486;box-shadow:0 0 0 1px #1d2a40,0 0 0 2px #cdb486;
}
html[data-ui-theme="star-chart"] .coral-dialog-choice {
  background:#070b14!important;border:1px solid transparent!important;
  border-radius:0!important;box-shadow:inset 0 1px #6e54282b;
}

/* Rim only: no image fill, element opacity or backdrop blur can hide the live tank. */
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel {
  --muted:#c7d4c7;--text:#f4ecd5;
  background:rgba(10,29,30,.55)!important;
  box-shadow:0 2px 7px #0006!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel .quest-panel-body {
  background:transparent;text-shadow:0 1px 2px #001417,0 0 4px #001417;
}
/* 받을 수 있는 퀘스트 보상: 같은 판 위에 금빛 테두리와 은은한 숨쉬기로 눈에 띄게. */
@keyframes sc-ready-glow { 0%,100% { box-shadow:0 2px 3px #0008,0 0 0 1px #cdb486,0 0 6px #cdb48655; } 50% { box-shadow:0 2px 3px #0008,0 0 0 1px #cdb486,0 0 13px #cdb486aa; } }
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel .qp-btn.is-ready {
  --ui-action-ink:#dcc58f;
  animation:sc-ready-glow 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui-theme="star-chart"] #aquariumCard #quest-panel .qp-btn.is-ready { animation:none; box-shadow:0 2px 3px #0008,0 0 0 1px #cdb486!important; }
}


/* Smaller name/family plates keep the same frame at a quieter thickness. */
html[data-ui-theme="star-chart"] :is(.ceremony-name-card,.ceremony-family-card) {
  background:#070b14!important;border-color:transparent!important;
  border-radius:0!important;image-rendering:auto;
}
html[data-ui-theme="star-chart"] :is(.tanksetup-card,.ceremony-card,.bc-card,.lvup-card,.tutorial-mode-card-inner,.shelf-confirm-card)
  button:not(:disabled):active {filter:brightness(.82);}


/* Shop readability and block-material preview use the quest-card material. */
html[data-ui-theme="star-chart"] #aquariumCard #shopMount .shop-category-btn {
  color:#eef3fb!important;
  font-family:var(--ui-font-body)!important;
  text-shadow:0 1px 2px #07191b!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #shopMount .shop-category-btn:disabled {
  color:#eef3fb!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #shopMount .shop-action-buttons {
  width:100%;display:grid;gap:5px;
}
html[data-ui-theme="star-chart"] #aquariumCard #shopMount .shop-action-buttons > .shop-category-btn {
  box-sizing:border-box;width:100%!important;min-width:0!important;height:30px!important;
  padding:5px 3px!important;display:flex;align-items:center;justify-content:center;line-height:1.15;
}
html[data-ui-theme="star-chart"] .platform-material-preview {
  background:rgba(10,29,30,.94)!important;color:var(--ui-cream,#eef3fb)!important;
  border:8px solid transparent!important;
  border-radius:0!important;box-shadow:0 10px 32px #000c!important;
  font-family:var(--ui-font-body)!important;image-rendering:auto;
}
html[data-ui-theme="star-chart"] .platform-material-preview #platform-preview-title {
  font-family:var(--ui-font-display)!important;color:#eef3fb!important;text-shadow:0 1px 2px #07191b;
}
html[data-ui-theme="star-chart"] .platform-material-preview button {
  min-height:34px;padding:7px 11px!important;cursor:pointer;color:#eef3fb!important;
  background:#101a2c!important;border:5px solid transparent!important;
  border-radius:0!important;box-shadow:0 2px 3px #0008!important;font:inherit;
}
html[data-ui-theme="star-chart"] .platform-material-preview button[aria-pressed="true"] {
  outline:1px solid #6e5428;outline-offset:-3px;color:#eef3fb!important;
}
html[data-ui-theme="star-chart"] .platform-material-preview button:active {filter:brightness(.82);}
html[data-ui-theme="star-chart"] .platform-material-preview .platform-material-canvas {
  box-sizing:border-box;border:7px solid transparent!important;
  border-radius:0!important;
}

/* Mating choices use physical game controls; native checkbox/checkmark cues are omitted. */
html[data-ui-theme="star-chart"] #aquariumCard #matingMount {
  font-family:var(--ui-font-body)!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-card {
  ;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-body {
  display:flex;flex-direction:column;gap:8px;max-height:480px;overflow-y:auto;
  padding:9px 10px!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-parent-row {
  display:flex;align-items:stretch;flex-shrink:0;gap:5px;height:var(--mating-parent-row-h,128px);
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-parent-slot {
  ;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-trait-panel {
  display:flex;flex-direction:column;gap:7px;padding:8px 9px;
  color:#eef3fb;background:#070b14;border:1px solid #1d2a40;
  box-shadow:inset 0 1px #cdb48628,0 1px 2px #0008;opacity:.62;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-trait-panel.is-enabled {opacity:1;}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-trait-heading,
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-trait-row {
  display:flex;align-items:center;gap:6px;min-width:0;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-trait-heading {justify-content:space-between;}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-trait-heading>strong {
  min-width:0;color:#eef3fb;font-family:var(--ui-font-display)!important;font-size:10px;font-weight:700;
  letter-spacing:.02em;text-shadow:0 1px #071415;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-trait-label {
  flex:0 0 42px;color:#eef3fb;font-family:var(--ui-font-body)!important;font-size:8px;font-weight:700;white-space:nowrap;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-trait-options {
  display:flex;flex:1;align-items:stretch;gap:4px;min-width:0;height:28px;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-trait-placeholder,
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-trait-empty {
  display:flex;flex:1;align-items:center;min-width:0;height:26px;padding:0 6px;
  color:#56637a;font-size:8px;background:#0c1d20;border:1px dashed #1d2a40;box-sizing:border-box;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #matingMount button.mating-color-choice {
  position:relative;display:grid;flex:1;place-items:center;min-width:24px;height:var(--mating-row-h,28px)!important;
  padding:4px!important;background:#0a101c!important;border:1px solid #6e5428!important;border-radius:0!important;box-shadow:inset 0 1px #cdb48638,inset 0 -2px #071412,0 1px 2px #0009!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-color-choice>span {
  display:block;width:100%;height:100%;min-height:13px;box-sizing:border-box;
  background:var(--mating-swatch,#17233a);border:1px solid #071112;box-shadow:inset 0 1px #eef3fb52,inset 0 -1px #0008;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-color-choice[aria-pressed="true"] {
  border-color:#cdb486!important;box-shadow:inset 0 0 0 1px #cdb486,0 0 0 1px #1d2a40,0 1px 2px #000!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-color-choice[aria-pressed="true"]::after {
  content:"";position:absolute;right:2px;bottom:2px;width:5px;height:5px;background:#cdb486;
  clip-path:polygon(100% 0,100% 100%,0 100%);filter:drop-shadow(0 0 1px #000);
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #matingMount button.mating-text-choice {
  position:relative;display:flex;flex:1;align-items:center;justify-content:center;min-width:0;height:28px!important;
  padding:2px 5px!important;color:#eef3fb!important;font-family:var(--ui-font-body)!important;font-size:8px!important;font-weight:600!important;
  background:#101a2c!important;border-color:transparent!important;
  border-radius:0!important;box-shadow:0 1px 2px #0009!important;white-space:nowrap;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-text-choice[aria-pressed="true"] {
  color:#eef3fb!important;filter:brightness(1.14);box-shadow:inset 0 -3px #cdb486,0 1px 2px #0009!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-text-choice[aria-pressed="true"]::after {
  content:"";position:absolute;right:5px;width:4px;height:4px;background:#cdb486;transform:rotate(45deg);box-shadow:0 0 2px #cdb486;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #matingMount button.mating-breed-btn {
  flex:0 0 auto;min-height:27px!important;padding:4px 12px!important;color:#eef3fb!important;
  font-family:var(--ui-font-display)!important;font-size:9px!important;font-weight:700!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-color-distribution {
  position:absolute;z-index:3;top:3px;right:3px;bottom:3px;display:flex;flex-direction:column;width:6px;
  overflow:hidden;background:#071315;border:1px solid #cdb486;box-shadow:0 0 0 1px #071315,0 1px 2px #000;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-color-distribution>i {
  display:block;flex:0 0 var(--mating-segment-size);width:100%;background:var(--mating-segment);min-height:1px;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-section-divider {
  flex:0 0 2px;height:2px;margin:0 -2px;background:repeating-linear-gradient(90deg,#17233a 0 5px,transparent 5px 9px);
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-inventory-title {
  margin-bottom:5px;color:#eef3fb;font-family:var(--ui-font-display)!important;font-size:9px;font-weight:700;letter-spacing:.04em;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-inventory-section.female .mating-inventory-title {color:#eea8bd;}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-inventory-section.male .mating-inventory-title {color:#91cadd;}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-inventory-grid {display:flex;flex-wrap:wrap;gap:4px;}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-inv-cell {
  background:#070b14!important;box-shadow:inset 0 1px #cdb48624,inset 0 -2px #071315!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #matingMount .mating-inv-cell:hover {
  border-color:#cdb486!important;background:#070b14!important;
}

/* 커뮤니티 방송국 키: 테마의 청동 버튼 대신 방송 콘솔 키. 키마다 작은 LED 색이 다르다. */
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal :is(.community-panel,#communityTankDetailModal)
  button.broadcast-key:not(.lab-menu-tab):not(.lab-menu-dismiss) {
  position:relative;width:44px!important;min-width:0!important;min-height:0!important;padding:4px 2px 4px 9px!important;
  background:linear-gradient(#0a101c,#070b14)!important;border:1px solid #1d2a40!important;border-radius:0!important;
  color:#eef3fb!important;font-size:9px!important;font-weight:700!important;letter-spacing:.02em;text-shadow:0 1px 1px #000!important;
  box-shadow:inset 0 1px #eef3fb1c,0 2px 0 #050708,0 3px 4px #0008!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal :is(.community-panel,#communityTankDetailModal) button.broadcast-key::before {
  content:"";position:absolute;left:4px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;
  background:var(--key-led,#17233a);box-shadow:0 0 4px var(--key-led,transparent);
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal :is(.community-panel,#communityTankDetailModal) button.broadcast-key:not(:disabled):active {
  transform:translateY(1px);box-shadow:inset 0 1px #eef3fb14,0 1px 0 #050708!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal :is(.community-panel,#communityTankDetailModal) button.broadcast-key:disabled {
  opacity:.45;--key-led:#3b4541;
}

/* 도전과제: TIP 버튼과 수령 버튼은 같은 작은 크기(36×18). TIP은 커뮤니티 방송 키처럼 매끈한 콘솔 키(파란 LED) */
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #challengeMount button.chal-hint-btn,
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #challengeMount button.chal-claim-btn {
  box-sizing:border-box;width:36px!important;height:18px!important;min-width:0!important;min-height:0!important;
  display:inline-flex!important;align-items:center;justify-content:center;vertical-align:middle;
  font-size:9px!important;line-height:1!important;white-space:nowrap;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #challengeMount button.chal-claim-btn { padding:0!important; }
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #challengeMount button.chal-hint-btn {
  position:relative;margin:0!important;padding:0 0 0 7px!important;
  background:linear-gradient(#0a101c,#070b14)!important;border:1px solid #1d2a40!important;border-radius:0!important;
  color:#eef3fb!important;font-weight:700!important;letter-spacing:.04em;text-shadow:0 1px 1px #000!important;
  box-shadow:inset 0 1px #eef3fb1c,0 2px 0 #050708,0 3px 4px #0008!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #challengeMount button.chal-hint-btn::before {
  content:"";position:absolute;left:5px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;
  background:#6ec3ff;box-shadow:0 0 4px #6ec3ff;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #challengeMount button.chal-hint-btn:active {
  transform:translateY(1px);box-shadow:inset 0 1px #eef3fb14,0 1px 0 #050708!important;
}

/* 다른 수조 제목 옆 정렬 토글(최근·인기): 작은 콘솔 키, 켜진 쪽은 초록 LED */
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal .community-panel
  .community-section-title button.community-sort-btn:not(.lab-menu-tab):not(.lab-menu-dismiss) {
  flex:0 0 auto;width:auto!important;min-width:0!important;min-height:0!important;padding:3px 8px 3px 13px!important;position:relative;
  background:linear-gradient(#0a101c,#070b14)!important;border:1px solid #1d2a40!important;border-radius:0!important;
  color:#eef3fb!important;font-size:9px!important;font-weight:700!important;box-shadow:inset 0 1px #eef3fb1c,0 2px 0 #050708!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal .community-panel .community-section-title button.community-sort-btn::before {
  content:"";position:absolute;left:5px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#101a2c;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal .community-panel .community-section-title button.community-sort-btn.active {
  color:#eafff1!important;border-color:#6e5428!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal .community-panel .community-section-title button.community-sort-btn.active::before {
  background:#3fe08a;box-shadow:0 0 4px #3fe08a;
}

/* 페이지 번호: 작은 콘솔 키, 지금 페이지는 초록 */
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal :is(.community-panel,#communityTankDetailModal)
  button.community-page-num.broadcast-key:not(.lab-menu-tab):not(.lab-menu-dismiss) {
  width:26px!important;padding:4px 0!important;text-align:center;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal :is(.community-panel,#communityTankDetailModal) button.community-page-num::before { display:none; }
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal :is(.community-panel,#communityTankDetailModal) button.community-page-num.active.broadcast-key:not(.lab-menu-tab) {
  color:#eafff1!important;border-color:#6e5428!important;box-shadow:inset 0 0 6px #3fe08a55,0 2px 0 #050708!important;
}

/* 상세 창 키: 이모지가 LED 자리를 대신하고, 오른쪽 칸 너비를 채운다. */
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #communityTankDetailModal
  button.broadcast-key:not(.lab-menu-tab):not(.lab-menu-dismiss) {
  width:100%!important;padding:7px 8px!important;font-size:11px!important;display:flex;align-items:center;justify-content:center;gap:6px;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #communityTankDetailModal button.broadcast-key::before { display:none; }
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #communityTankDetailModal button.broadcast-key.key-watch { border-color:#6e5428!important; }
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal #communityTankDetailModal button.broadcast-key.key-report { border-color:#6e5428!important; }

/* 페이지 화살표(맨 앞·이전·다음·맨 뒤): 번호 키보다 조금 넓고 세모 글자를 작게 */
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal :is(.community-panel,#communityTankDetailModal)
  button.community-page-num.community-page-arrow.broadcast-key:not(.lab-menu-tab):not(.lab-menu-dismiss) {
  width:28px!important;font-size:8px!important;letter-spacing:-.05em;color:#bfe9cf!important;
}

/* ── Star chart surfaces (mockup A) ─────────────────────────────────
   Hand-tuned on top of the converted rules above: dark framed plates with cyan corner
   brackets, a dotted constellation line through the dock, and a segmented level ring. */
html[data-ui-theme="star-chart"] {
  --sc-plate-grid:url('../../assets/ui/star-chart/button-face.png') 0 0 / 64px 64px;
}
/* Panels, dialogs and floating trays: the button's brass rim as a window frame over a night plate with the celestial grid */
html[data-ui-theme="star-chart"] :is(.lab-column,.lab-center-modal,.coral-dialog,.shelf-confirm-card,.ff-modal,.ff-result-card,.login-card,
  .tanksetup-card,.ceremony-card,.bc-card,.lvup-card,.tutorial-mode-card-inner,.ff-card,.ff-result-modal,.shelf-confirm-modal-content,.platform-material-preview),
html[data-ui-theme="star-chart"] #aquariumCard :is(#deviceTray,#tankSwitchPanel,#stat-upgrade-panel) {
  background:var(--sc-plate-grid),rgba(4,6,11,.95)!important;background-origin:padding-box!important;
  border:2px solid transparent!important;border-image:var(--sc-panel-frame)!important;border-radius:0!important;box-shadow:0 6px 18px #000a!important;
}
/* Full-menu tabs: plain words, the selected one in gold with an underline */
html[data-ui-theme="star-chart"] #aquariumCard .lab-menu-tab {
  background:transparent!important;border:0!important;box-shadow:none!important;color:var(--sc-muted);font-weight:400!important;
}
html[data-ui-theme="star-chart"] #aquariumCard .lab-menu-tab[aria-selected="true"] {
  background:transparent!important;color:var(--sc-gold)!important;box-shadow:inset 0 -2px var(--sc-gold)!important;
}
html[data-ui-theme="star-chart"] .lab-menu-tab[aria-selected="true"]::after {display:none}
html[data-ui-theme="star-chart"] #aquariumCard .lab-menu-dismiss {background:transparent!important;box-shadow:none!important;color:var(--sc-muted)}
/* Full-menu entries: left-aligned labels after the corner seal (texture: brass button rule below) */
html[data-ui-theme="star-chart"] #aquariumCard :is(.panel-group button,.lab-menu-settings-btn,.lab-menu-tutorial-btn) {
  justify-content:flex-start;padding-left:20px;text-align:left;font-weight:400!important;
}
html[data-ui-theme="star-chart"] #aquariumCard :is(.panel-group button,.lab-menu-settings-btn,.lab-menu-tutorial-btn) .hamburger-label {display:inline!important;width:auto!important;flex:none!important;text-align:left!important;transform:none!important;font-weight:400!important}
html[data-ui-theme="star-chart"] #aquariumCard .panel-group button:disabled {filter:grayscale(.8) brightness(.6);color:var(--sc-muted)!important}
html[data-ui-theme="star-chart"] button[data-lock-lv]::after {background:transparent;border:0;color:var(--sc-dim);font-family:var(--ui-font-number)}
html[data-ui-theme="star-chart"] #aquariumCard .panel-group button.active {filter:none;outline:0;color:#fff!important;box-shadow:var(--sc-button-glow)!important}
/* Square hotkeys: same brass texture (rule below); on/active keys glow */
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount)
  :is(.quick-action-btn,.tank-bar-btn,.left-hotkey-btn):is(.active,.on,.inv-open,.logic-active) {
  box-shadow:var(--sc-button-glow)!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #aquariumMount .quest-q-btn {color:var(--sc-warm)!important}
/* Bottom dock: a brass ruler band along the top edge, a dotted constellation line behind the keys */
html[data-ui-theme="star-chart"] :is(#aquariumCard, #communityGameOverlay) #tank-bottom-control-panel {
  background:repeating-linear-gradient(90deg,#5c4320 0 1px,transparent 1px 3px) 0 1px / 100% 2px no-repeat,
    linear-gradient(#d9c99f,#a88d5e 45%,#64502f) 0 0 / 100% 4px no-repeat,
    linear-gradient(#0a0f1c,#0a0f1c) 0 4px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--sc-line-hi) 0 2px,transparent 2px 6px) 0 55% / 100% 2px no-repeat,
    rgba(4,6,11,.7)!important;
  box-shadow:0 -2px 6px #0006!important;border-radius:0!important;
}
/* Level: a flat pixel bar in a dark frame, filled in cyan */
html[data-ui-theme="star-chart"] #aquariumCard #xp-bar-wrap .xp-bar-outer {
  border:0!important;border-radius:0!important;
  background:repeating-linear-gradient(90deg,rgba(201,164,100,.3) 0 1px,transparent 1px 6px) 0 100% / 100% 3px no-repeat,var(--sc-deep)!important;
  box-shadow:inset 0 0 0 1px var(--sc-brass-dim),inset 0 0 0 2px #05080f!important;
}
/* Engraved brass fill (xp-fill.png) with a glowing leading edge and an occasional shimmer.
   The shimmer only moves a pseudo-element with transform, so it stays on the compositor. */
html[data-ui-theme="star-chart"] #aquariumCard #xp-bar-wrap #xpBarFill {
  background:url('../../assets/ui/star-chart/xp-fill.png') 0 0 / 48px 100% repeat-x!important;opacity:1;overflow:hidden;
}
html[data-ui-theme="star-chart"] #aquariumCard #xp-bar-wrap #xpBarFill::after {
  content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:#fff8dc;box-shadow:0 0 5px 1px rgba(255,232,170,.9);
}
html[data-ui-theme="star-chart"] #aquariumCard #xp-bar-wrap #xpBarFill::before {
  content:"";position:absolute;top:0;bottom:0;left:0;width:100%;will-change:transform;
  background:linear-gradient(100deg,transparent 0 38%,rgba(255,250,228,.28) 50%,transparent 62% 100%);
  /* Finite: an endless animation keeps the compositor producing frames at display rate. */
  transform:translateX(-100%);animation:sc-xp-shimmer 10s ease-in-out 3;
}
@keyframes sc-xp-shimmer { 0% { transform:translateX(-100%); } 14%,100% { transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce) {
  html[data-ui-theme="star-chart"] #aquariumCard #xp-bar-wrap #xpBarFill::before {animation:none;display:none}
}
html[data-ui-theme="star-chart"] #aquariumCard #xp-bar-wrap #xpBarLabel {color:#fffaf0;text-shadow:0 0 2px #1a1206,0 1px 1px #000,1px 0 1px #1a1206,-1px 0 1px #1a1206}
/* Content panels: flat header strip instead of the painted coral header */
html[data-ui-theme="star-chart"] .lab-center-modal :is(.card,.frame) {border-radius:0!important}
html[data-ui-theme="star-chart"] .lab-center-modal .card>.head {
  background:var(--sc-panel)!important;border:0!important;border-radius:0!important;box-shadow:inset 0 -1px rgba(201,164,100,.45)!important;
}
html[data-ui-theme="star-chart"] .lab-center-modal .card>.head .title {color:var(--sc-gold)!important;text-shadow:none!important;font-weight:400!important}
/* Shrimp / Control / Visit shortcut tabs (conveniencePanelStyles.js): night plate, no coral ornaments */
html[data-ui-theme="star-chart"] .convenience-panel {
  background:var(--sc-plate-grid),rgba(4,6,11,.96);background-origin:padding-box;
  border:2px solid transparent;border-image:var(--sc-panel-frame);box-shadow:none;color:var(--sc-text);
}
html[data-ui-theme="star-chart"] .convenience-panel::before,
html[data-ui-theme="star-chart"] .convenience-panel::after {display:none}
html[data-ui-theme="star-chart"] .convenience-head {background:var(--sc-panel);border-bottom:1px solid rgba(201,164,100,.45);box-shadow:none}
html[data-ui-theme="star-chart"] .convenience-kicker {color:var(--sc-gold)}
html[data-ui-theme="star-chart"] .convenience-count {color:var(--sc-muted);border-color:var(--sc-line);background:var(--sc-deep)}
html[data-ui-theme="star-chart"] #labCenterModal .quick-shrimp-card,
html[data-ui-theme="star-chart"] #labMenuOverlay .quick-shrimp-card {background:rgba(10,15,28,.85)!important;border:1px solid rgba(201,164,100,.3)!important;border-radius:0!important;box-shadow:none!important}
html[data-ui-theme="star-chart"] #labCenterModal .quick-shrimp-card:not(.is-empty)::before,
html[data-ui-theme="star-chart"] #labMenuOverlay .quick-shrimp-card:not(.is-empty)::before {background:var(--sc-gold);opacity:.6}
html[data-ui-theme="star-chart"] .quick-shrimp-card.is-empty {color:var(--sc-dim)!important;border-color:var(--sc-line)!important}
html[data-ui-theme="star-chart"] .quick-shrimp-name {color:var(--sc-text)}
html[data-ui-theme="star-chart"] .quick-shrimp-meta {color:var(--sc-muted)}
html[data-ui-theme="star-chart"] .quick-shrimp-portrait {background:var(--sc-deep);border-color:var(--sc-line-hi)}
html[data-ui-theme="star-chart"] .quick-temp-card {background:var(--sc-deep);border-color:var(--sc-line);box-shadow:none}
html[data-ui-theme="star-chart"] .quick-visit-card {border-color:var(--sc-line)!important;border-radius:0!important}
/* Celestial brass buttons: menu entries, hotkeys, panels, dialogs, cards, the device tray and quest actions.
   Console-style keys (community broadcast, challenge tip, sort, colour swatches) keep their own look. */
html[data-ui-theme="star-chart"] #aquariumCard :is(.panel-group button,.lab-menu-settings-btn,.lab-menu-tutorial-btn),
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount)
  :is(.quick-action-btn,.tank-bar-btn,.left-hotkey-btn,.quest-q-btn,.wq-alarm-hotkey-btn,[id="stat-upgrade-btn"]),
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal :is(button,.btn-back,.inv-action-btn):not(.lab-menu-tab):not(.lab-menu-dismiss):not(.broadcast-key):not(.chal-hint-btn):not(.community-sort-btn):not(.mating-color-choice),
html[data-ui-theme="star-chart"] #aquariumCard #deviceTray :is(.device-tray-btn,.device-tray-detail),
html[data-ui-theme="star-chart"] :is(.tanksetup-card,.ceremony-card,.bc-card,.lvup-card,.tutorial-mode-card-inner,.ff-card,.ff-modal,.ff-result-card,.ff-result-modal,.shelf-confirm-card,.shelf-confirm-modal-content,.coral-dialog,.login-card)
  button:not(.tanksetup-swatch):not(.tanksetup-block):not(.ceremony-egg-wrap):not(.bc-egg-wrap):not(.login-btn-apple):not(.login-btn-google):not(.coral-dialog-choice),
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel [data-action="quest-claim"],
html[data-ui-theme="star-chart"] #communityGameOverlay .community-game-control-btn,
html[data-ui-theme="star-chart"] .platform-material-preview button {
  background:var(--sc-button-bg)!important;border-color:transparent!important;border-style:solid!important;border-radius:0!important;box-shadow:0 2px 0 #02040a!important;
  border-image:var(--sc-button-rim)!important;image-rendering:auto;
  color:var(--ui-action-ink,var(--sc-button-ink))!important;text-shadow:0 1px 2px #000;
}
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal button:is(.active,[aria-pressed="true"]):not(.off):not(.broadcast-key):not(.community-sort-btn):not(.mating-color-choice),
html[data-ui-theme="star-chart"] #aquariumCard #deviceTray .device-tray-btn.active,
html[data-ui-theme="star-chart"] .platform-material-preview button[aria-pressed="true"] {
  box-shadow:var(--sc-button-glow)!important;color:#fff!important;
}
/* Hamburger menu: fine star dust in the plate, with two sparse layers of brighter stars twinkling out of phase */
html[data-ui-theme="star-chart"] #labMenuOverlay .lab-column {
  isolation:isolate;
  background:var(--sc-plate-grid),
    radial-gradient(1px 1px at 12% 18%,#eef3fb 60%,transparent),radial-gradient(1px 1px at 34% 9%,#9fb3d1 60%,transparent),
    radial-gradient(1px 1px at 58% 22%,#cfe3ff 60%,transparent),radial-gradient(1px 1px at 81% 13%,#9fb3d1 60%,transparent),
    radial-gradient(1px 1px at 7% 47%,#9fb3d1 60%,transparent),radial-gradient(1.5px 1.5px at 46% 41%,#eef3fb 60%,transparent),
    radial-gradient(1px 1px at 92% 38%,#cfe3ff 60%,transparent),radial-gradient(1px 1px at 23% 63%,#9fb3d1 60%,transparent),
    radial-gradient(1px 1px at 68% 58%,#ffd9c0 60%,transparent),radial-gradient(1px 1px at 88% 71%,#9fb3d1 60%,transparent),
    radial-gradient(1px 1px at 15% 84%,#cfe3ff 60%,transparent),radial-gradient(1.5px 1.5px at 52% 79%,#b6eef6 60%,transparent),
    radial-gradient(1px 1px at 77% 92%,#9fb3d1 60%,transparent),radial-gradient(1px 1px at 38% 95%,#eef3fb 60%,transparent),
    radial-gradient(120% 60% at 80% 0%,rgba(127,221,235,.07),transparent 70%),
    radial-gradient(90% 50% at 10% 100%,rgba(255,179,138,.05),transparent 70%),
    rgba(4,6,11,.95)!important;
  background-origin:padding-box!important;
}
html[data-ui-theme="star-chart"] #labMenuOverlay .lab-column::before,
html[data-ui-theme="star-chart"] #labMenuOverlay .lab-column::after {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
/* Only while the menu is open, and on the shared graphics tick: renderLoop moves
   --sc-twinkle-a/-b. A CSS animation would recomposite at the display rate. */
html[data-ui-theme="star-chart"] #labMenuOverlay:not([hidden]) .lab-column::before {opacity:var(--sc-twinkle-a,.1)}
html[data-ui-theme="star-chart"] #labMenuOverlay:not([hidden]) .lab-column::after {opacity:var(--sc-twinkle-b,.1)}
html[data-ui-theme="star-chart"] #labMenuOverlay .lab-column::before {
  background:
    radial-gradient(circle at 27% 14%,#fff 0 1px,rgba(127,221,235,.55) 1.5px,transparent 4px),
    radial-gradient(circle at 74% 31%,#fff 0 1px,rgba(255,179,138,.5) 1.5px,transparent 4px),
    radial-gradient(circle at 9% 72%,#fff 0 1px,rgba(127,221,235,.5) 1.5px,transparent 4px),
    radial-gradient(circle at 63% 88%,#fff 0 1px,rgba(155,226,154,.45) 1.5px,transparent 4px);
}
html[data-ui-theme="star-chart"] #labMenuOverlay .lab-column::after {
  background:
    radial-gradient(circle at 49% 6%,#fff 0 1px,rgba(181,156,255,.5) 1.5px,transparent 4px),
    radial-gradient(circle at 93% 55%,#fff 0 1px,rgba(127,221,235,.5) 1.5px,transparent 4px),
    radial-gradient(circle at 31% 51%,#fff 0 1px,rgba(255,179,138,.45) 1.5px,transparent 4px),
    radial-gradient(circle at 84% 96%,#fff 0 1px,rgba(127,221,235,.45) 1.5px,transparent 4px);
}
@media (prefers-reduced-motion:reduce) {
  html[data-ui-theme="star-chart"] #labMenuOverlay:not([hidden]) .lab-column::before,
  html[data-ui-theme="star-chart"] #labMenuOverlay:not([hidden]) .lab-column::after,
  html[data-ui-theme="star-chart"] #labMenuOverlay .lab-column::before,
  html[data-ui-theme="star-chart"] #labMenuOverlay .lab-column::after {animation:none;opacity:.7}
}
/* Quest window: the button's brass rim as a window frame (seals in every corner, degree marks on every side)
   over a translucent night face, so the tank still shows through */
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel {
  padding:4px;border:2px solid transparent!important;border-radius:0!important;
  background:url('../../assets/ui/star-chart/button-face.png') 0 0 / 64px 64px,rgba(6,10,20,.5)!important;
  border-image:var(--sc-panel-frame)!important;box-shadow:0 6px 16px #0006!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel .qp-num {color:#bfa878;letter-spacing:.2em}
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel .qp-title {color:#e5dcc4}
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel .qp-bar {border-radius:0;background:#05080f;box-shadow:inset 0 0 0 1px #6e5428}
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel .qp-bar > i {border-radius:0;background:linear-gradient(#d9c99f,#a88d5e 60%,#7f6640)}
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel .qp-rewards {border-top:1px solid rgba(201,164,100,.35)}
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel .qp-chip {border-radius:0;background:rgba(201,164,100,.16);color:#cdbd94;box-shadow:inset 0 0 0 1px rgba(201,164,100,.45)}
html[data-ui-theme="star-chart"] #aquariumCard #quest-panel .qp-chip.is-unlock {background:rgba(155,226,154,.14);color:#c4efc3;box-shadow:inset 0 0 0 1px rgba(155,226,154,.4)}
/* Meters and chips: dark wells with a brass hairline */
html[data-ui-theme="star-chart"] #aquariumCard :is(.pocket-money-badge,.coral-health-bar,#wqSummaryBtn) {
  background:var(--sc-deep)!important;border-color:transparent!important;border-radius:0!important;
  box-shadow:inset 0 0 0 1px var(--sc-brass-dim),inset 0 1px 0 1px rgba(246,226,176,.18),0 1px 2px #000a!important;
}
/* Inner plates inside panels (lists, shop cards, settings rows, profiles): night wells with a faint brass line */
html[data-ui-theme="star-chart"] #aquariumCard #labCenterModal
  :is(.shrimp-list-row,.coral-profile,.settings-row,.shop-card,.accessory-row,.community-published-tank-row,.community-my-published-card,
      .report-list,.controller-buttons-wrap > .controller-panel,.controller-settings-frame,.gs-slot-info-bar,.kpi),
html[data-ui-theme="star-chart"] :is(.coral-dialog-choice,.ceremony-name-card,.ceremony-family-card) {
  background:rgba(10,15,28,.85)!important;border-color:rgba(201,164,100,.3)!important;border-style:solid!important;border-radius:0!important;
}
/* ── House (communityHouse.css) in celestial brass ────────────────── */
html[data-ui-theme="star-chart"] .community-house :is(.house-visit-topbar .house-btn,.house-design-panel .house-btn,.house-design-tab,.house-design-choice,
  .house-mail-tab[aria-selected="true"]),
html[data-ui-theme="star-chart"] .house-mail :is(.guestbook-action-btn,.guestbook-page-btn,.guestbook-submit-btn,.wr-claim-btn) {
  border:1px solid transparent;border-image:var(--sc-button-rim);border-radius:0;background:var(--sc-button-bg);
  color:var(--sc-button-ink);text-shadow:0 1px 2px #000;box-shadow:0 2px 0 #02040a;
}
html[data-ui-theme="star-chart"] .community-house :is(.house-menu-panel,.house-mail,.house-talk,.house-preview) .house-btn::before,
html[data-ui-theme="star-chart"] .community-house .house-sort-btn::before,
html[data-ui-theme="star-chart"] .house-mail-open::before {
  border:1px solid transparent;border-image:var(--sc-button-rim);background:var(--sc-button-bg);box-shadow:0 2px 0 #02040a;
}
/* The exhibit key keeps its 48px hit area and draws the brass key 6px inside, like the mail key. */
html[data-ui-theme="star-chart"] .house-act-btn {position:relative;isolation:isolate;background:none;color:var(--sc-button-ink);text-shadow:0 1px 2px #000}
html[data-ui-theme="star-chart"] .house-act-btn::before {
  content:"";position:absolute;inset:6px;z-index:-1;
  border:1px solid transparent;border-image:var(--sc-button-rim);background:var(--sc-button-bg);box-shadow:0 2px 0 #02040a;
}
html[data-ui-theme="star-chart"] .community-house :is(.house-menu-panel,.house-mail,.house-talk,.house-preview) .house-btn,
html[data-ui-theme="star-chart"] .community-house .house-sort-btn {color:var(--sc-button-ink)}
html[data-ui-theme="star-chart"] .community-house :is(.house-menu-panel,.house-mail) :is(.house-btn[aria-pressed="true"],.house-sort-btn.active)::before,
html[data-ui-theme="star-chart"] .community-house :is(.house-design-tab,.house-design-choice):is([aria-selected="true"],[aria-pressed="true"],.active),
html[data-ui-theme="star-chart"] .house-design-btn[aria-pressed="true"],
html[data-ui-theme="star-chart"] .house-mail-tab[aria-selected="true"] {box-shadow:var(--sc-button-glow);filter:none;color:#fff}
html[data-ui-theme="star-chart"] :is(.house-preview,.house-talk,.house-design-panel,.house-sheet,.house-exhibit,.house-leave,.house-mail,.house-dex),
html[data-ui-theme="star-chart"] .community-house .house-menu-panel {
  border:2px solid transparent;border-image:var(--sc-panel-frame);border-radius:0;
  background:var(--sc-plate-grid),rgba(4,6,11,.95);box-shadow:0 8px 22px #000a;color:var(--sc-text);
  scrollbar-color:var(--sc-brass) #070b14;
}
html[data-ui-theme="star-chart"] :is(.house-design-head,.house-menu-panel .house-sheet-head) {
  background:var(--sc-panel);border-radius:0;box-shadow:inset 0 -1px rgba(201,164,100,.45);
}
html[data-ui-theme="star-chart"] :is(.house-sheet,.house-exhibit,.house-leave,.house-mail,.house-dex) h2,
html[data-ui-theme="star-chart"] .house-menu-panel .house-sheet-head h2 {color:var(--sc-gold);text-shadow:0 1px 2px #000}
html[data-ui-theme="star-chart"] .community-house :is(.house-tank-btn,.house-exhibit-slot),
html[data-ui-theme="star-chart"] .house-mail-tab:not([aria-selected="true"]),
html[data-ui-theme="star-chart"] .house-mail .guestbook-entry {
  border:1px solid rgba(201,164,100,.3);border-image:none;border-radius:0;background:rgba(10,15,28,.85);box-shadow:none;
}
html[data-ui-theme="star-chart"] .house-gallery-panel {
  border-image:none;border-top:0;
  background:repeating-linear-gradient(90deg,#5c4320 0 1px,transparent 1px 3px) 0 1px / 100% 2px no-repeat,
    linear-gradient(#d9c99f,#a88d5e 45%,#64502f) 0 0 / 100% 4px no-repeat,
    linear-gradient(#0a0f1c,#0a0f1c) 0 4px / 100% 1px no-repeat,var(--sc-void);
  box-shadow:0 -2px 6px #000a;color:var(--sc-cream);
}
/* Tone-down: HUD over the tank recedes — keys and meter wells let the tank show through, so the frames
   read as instruments rather than the subject. */
html[data-ui-theme="star-chart"] :is(#aquariumCard #aquariumMount, #communityRealTankMount)
  :is(.quick-action-btn,.tank-bar-btn,.left-hotkey-btn,.quest-q-btn,.wq-alarm-hotkey-btn,[id="stat-upgrade-btn"]) {
  background:url('../../assets/ui/star-chart/button-face.png') 0 0 / 64px 64px,linear-gradient(rgba(29,44,77,.6),rgba(16,26,48,.6))!important;
  box-shadow:0 1px 0 #02040a99!important;
}
html[data-ui-theme="star-chart"] #aquariumCard :is(.pocket-money-badge,.coral-health-bar,#wqSummaryBtn),
html[data-ui-theme="star-chart"] #aquariumCard #xp-bar-wrap .xp-bar-outer {background-color:rgba(7,11,20,.68)!important}
html[data-ui-theme="star-chart"] #aquariumCard #xp-bar-wrap .xp-bar-outer {
  background:repeating-linear-gradient(90deg,rgba(168,141,94,.25) 0 1px,transparent 1px 6px) 0 100% / 100% 3px no-repeat,rgba(7,11,20,.68)!important;
}
/* Tank switch / purchase panel: inset plates holding brass keys; only the next tank you can buy is lit */
html[data-ui-theme="star-chart"] #left-action-column .tank-switch-entry {background:none!important;border:0!important;box-shadow:none!important}
html[data-ui-theme="star-chart"] #left-action-column .tank-switch-tile {
  border:1px solid rgba(168,141,94,.32);border-radius:0;background:rgba(7,11,20,.72);box-shadow:inset 0 1px 2px #0008;
}
html[data-ui-theme="star-chart"] #left-action-column .tank-switch-tile.tank-switch-current {border-color:rgba(205,180,134,.6);background:rgba(16,26,48,.8)}
html[data-ui-theme="star-chart"] #left-action-column :is(.tank-switch-key,.tank-switch-buy) {
  border:1px solid transparent;border-image:var(--sc-button-rim);border-radius:0;background:var(--sc-button-bg);
  color:var(--sc-button-ink);text-shadow:0 1px 2px #000;box-shadow:0 1px 0 #02040a;font-family:var(--ui-font-body);
}
html[data-ui-theme="star-chart"] #left-action-column .tank-switch-key {font-size:13px;font-weight:700}
html[data-ui-theme="star-chart"] #left-action-column .tank-switch-buy {font-size:11px;font-weight:600;letter-spacing:.04em}
html[data-ui-theme="star-chart"] #left-action-column .tank-switch-buy:not([disabled]) {color:#efe7d0;box-shadow:var(--sc-button-glow)}
html[data-ui-theme="star-chart"] #left-action-column .tank-switch-buy[disabled] {opacity:1;filter:grayscale(1) brightness(.5)}
html[data-ui-theme="star-chart"] #left-action-column .tank-switch-tile.tank-switch-current .tank-switch-key {background:var(--sc-button-bg);border-color:transparent;color:#fff;box-shadow:var(--sc-button-glow)}
html[data-ui-theme="star-chart"] #left-action-column :is(.tank-switch-key,.tank-switch-buy:not([disabled])):hover {filter:brightness(1.08)}
html[data-ui-theme="star-chart"] #left-action-column :is(.tank-switch-key,.tank-switch-buy):focus-visible {outline:2px solid var(--sc-gold);outline-offset:1px}
html[data-ui-theme="star-chart"] #left-action-column .tank-switch-lock-track {background:#05080f;box-shadow:inset 0 0 0 1px rgba(168,141,94,.4),inset 0 1px 2px #000}
/* Decorate inventory: a brass-framed tray of engraved wells instead of a flat glass box */
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-wrap {
  padding:10px;border:2px solid transparent!important;border-image:var(--sc-panel-frame)!important;border-radius:0!important;
  background:var(--sc-plate-grid),rgba(4,6,11,.78)!important;box-shadow:0 6px 16px #0008!important;
}
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-actions {background:none!important;border:0!important;box-shadow:none!important}
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-grid {background:transparent!important;border-color:transparent!important}
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-cell {
  border:1px solid rgba(168,141,94,.38)!important;border-radius:0!important;
  background:radial-gradient(120% 120% at 30% 20%,rgba(45,68,114,.35),transparent 60%),rgba(5,8,15,.82)!important;
  box-shadow:inset 0 2px 4px #000c,inset 0 -1px rgba(205,180,134,.12)!important;
}
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-cell.decorate-inv-empty {border-color:rgba(168,141,94,.26)!important;background:rgba(5,8,15,.66)!important}
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-cell.decorate-inv-sel {
  border-color:var(--sc-gold)!important;outline:0!important;box-shadow:inset 0 2px 4px #000c,0 0 0 1px rgba(205,180,134,.5),0 0 8px rgba(205,180,134,.3)!important;
}
html[data-ui-theme="star-chart"] #decorateModeChrome :is(.decorate-inv-action-btn,.decorate-inv-position-toggle-btn),
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-tabs button {
  border:1px solid transparent!important;border-image:var(--sc-button-rim)!important;border-radius:0!important;
  background:var(--sc-button-bg)!important;color:var(--sc-button-ink)!important;text-shadow:0 1px 2px #000;box-shadow:0 2px 0 #02040a!important;outline:0;
}
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-tabs button[aria-selected="true"] {color:#fff!important;box-shadow:var(--sc-button-glow)!important;outline:0}
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-action-btn:disabled {filter:grayscale(1) brightness(.55)}
/* Decorate: the fixed name/message slot as a quiet engraved well */
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-selected-name {
  font-family:var(--ui-font-body);color:var(--sc-cream);background:rgba(5,8,15,.6);border:1px solid rgba(168,141,94,.26);
}
html[data-ui-theme="star-chart"] #decorateModeChrome .decorate-inv-selected-name.is-message {color:var(--sc-gold)}

/* A quiet lamp carries power state; off controls remain clickable. */
html[data-ui-theme="star-chart"] #aquariumCard #deviceTray .device-tray-btn[aria-pressed="true"] {
  background:#182a39!important;color:#e7f4c8!important;
  box-shadow:inset 0 -2px #788e69,0 1px 2px #000a!important;
}
html[data-ui-theme="star-chart"] #aquariumCard #deviceTray .device-tray-btn[aria-pressed="true"] .device-tray-lamp {
  border-color:#badfa4;
  background:radial-gradient(circle at 40% 35%,#f5fff0 0%,#c7edab 40%,#78aa6e 100%);
  box-shadow:0 0 5px #a6d38a88,inset 0 0 2px #fff9;
}