/* ══════════════════════════════════════════
   츠쿠요미 레트로 낚시 — 전체 스타일 V3
   ══════════════════════════════════════════ */

/* ── 물고기 이미지 (픽셀아트) ── */
.fish-icon-img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
  display: block;
}

/* ══════════════════════════════════════════
   수족관 도감 (재설계)
   ══════════════════════════════════════════ */
.dex-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: calc(100% - 26px);
  overflow: hidden;
}

/* ── 지역 탭 ── */
.dex-zone-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-main);
  flex-shrink: 0;
}
.dex-zone-btn {
  flex: 1;
  background: var(--bg-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.dex-zone-btn:hover { color: var(--text-primary); background: var(--win-title-bg); }
.dex-zone-btn.active {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
  background: var(--win-title-bg);
}

/* ── 등급 서브탭 ── */
.dex-rarity-tabs {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-shadow);
}
.dex-rarity-btn {
  background: transparent;
  border: 1px solid var(--border-shadow);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.12s;
}
.dex-rarity-btn:hover { border-color: var(--text-secondary); }
.dex-rarity-btn.active {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: rgba(139,233,253,0.08);
}

/* ── 도감 카드 그리드 ── */
.dex-grid {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}

/* ── 개별 도감 카드 ── */
.dex-card {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border-shadow);
  border-radius: 4px;
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 80px;
}
.dex-card:hover { border-color: var(--accent-cyan); }

/* 이미지 프레임 영역 */
.dex-card-img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 2px solid #555;
  background: transparent;
  overflow: hidden;
  position: relative;
}
.dex-card-img .fish-icon-img,
.dex-card-img .dex-img {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  object-fit: contain;
}
.dex-card-img .fish-icon {
  font-size: 32px;
  line-height: 1;
}

/* 정보 영역 */
.dex-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dex-card-name {
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dex-card-rarity {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  display: inline-block;
  width: fit-content;
}
.dex-card-stats {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.dex-card-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  opacity: 0.8;
}

/* 미발견 카드 */
.dex-card.undiscovered { opacity: 0.4; }
.dex-card.undiscovered .dex-card-img { border-color: #333; }
.dex-card.undiscovered .dex-img,
.dex-card.undiscovered .fish-icon-img { filter: brightness(0) invert(0.15); }

/* ── 등급별 프레임 글로우 ── */
.dex-frame-common .dex-card-img { border-color: #555; }
.dex-frame-normal .dex-card-img { border-color: #aaa; }
.dex-frame-rare .dex-card-img { border-color: #4488ff; box-shadow: 0 0 6px #4488ff55; }
.dex-frame-unique .dex-card-img { border-color: #44ff88; box-shadow: 0 0 6px #44ff8855; }
.dex-frame-epic .dex-card-img { border-color: #aa55ff; box-shadow: 0 0 8px #aa55ff66; }
.dex-frame-legendary .dex-card-img { border-color: #ffd700; box-shadow: 0 0 10px #ffd70066; }
.dex-frame-sol .dex-card-img { border-color: #ff8800; box-shadow: 0 0 12px #ff880066, 0 0 20px #ff440033; }
.dex-frame-luna .dex-card-img { border-color: #aaccff; box-shadow: 0 0 12px #aaccff66, 0 0 20px #8888ff33; }

/* 등급 배지 색상 */
.dex-rarity-common { background: #33333388; color: #aaa; }
.dex-rarity-normal { background: #44444488; color: #ccc; }
.dex-rarity-rare { background: #1a3366aa; color: #4488ff; }
.dex-rarity-unique { background: #1a4433aa; color: #44ff88; }
.dex-rarity-epic { background: #331a44aa; color: #aa55ff; }
.dex-rarity-legendary { background: #44330aaa; color: #ffd700; }
.dex-rarity-sol { background: #442200aa; color: #ff8800; }
.dex-rarity-luna { background: #223355aa; color: #aaccff; }

/* ── 도감 하단 ── */
.dex-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-top: 1px solid var(--border-shadow);
  flex-shrink: 0;
}
.dex-page-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dex-footer-btns {
  display: flex;
  gap: 3px;
}

:root {
  --bg-main: #0d1117;
  --bg-secondary: #161b22;
  --win-title-bg: #1c2128;
  --win-body-bg: #161b22;
  --border-main: #30363d;
  --border-shadow: #21262d;
  --text-primary: #c9d1d9;
  --text-secondary: #8b949e;
  --accent-cyan: #8be9fd;
  --accent-green: #50fa7b;
  --accent-orange: #ffb86c;
  --accent-pink: #ff79c6;
  --accent-purple: #bd93f9;
  --taskbar-h: 40px;
  --scrollbar-w: 4px;
}
body.theme-98 {
  --bg-main: #f0f0f0;
  --bg-secondary: #fff;
  --win-title-bg: #c0c0c0;
  --win-body-bg: #f5f5f5;
  --border-main: #808080;
  --border-shadow: #a0a0a0;
  --text-primary: #222;
  --text-secondary: #555;
  --accent-cyan: #0077aa;
  --accent-green: #006600;
  --accent-orange: #884400;
  --accent-pink: #cc0088;
  --accent-purple: #6600cc;
  --taskbar-h: 28px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: "MS UI Gothic", "Nanum Gothic Coding", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
}
/* 다크/TK 테마: 캔버스가 배경 역할 → body 배경 투명 처리 */
body:not(.theme-98) {
  background: transparent;
}
button {
  cursor: pointer;
  font-family: inherit;
}
ul {
  list-style: none;
}
::-webkit-scrollbar {
  width: var(--scrollbar-w);
  height: var(--scrollbar-w);
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--border-main);
  border-radius: 2px;
}

/* ── Win-box ── */
.win-box {
  border: 1px solid var(--border-main);
  background: var(--win-body-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.win-title {
  background: var(--win-title-bg);
  border-bottom: 1px solid var(--border-main);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: bold;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  flex-shrink: 0;
}
.win-body {
  flex: 1;
  padding: 6px 8px;
  min-height: 0;
  overflow: hidden;
}
.win-btn {
  background: var(--win-title-bg);
  border: 1px solid var(--border-main);
  color: var(--text-primary);
  padding: 2px 8px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition:
    background 0.1s,
    border-color 0.1s;
}
.win-btn:hover:not(:disabled) {
  background: var(--border-main);
  border-color: var(--accent-cyan);
}
.win-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.win-btn.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* 자동 ON 버튼 — 외곽 "marching ants" 테두리 (SVG 대신 CSS만 사용) */
.auto-on-btn-wrap {
  position: relative;
  display: inline-block;
}
/* 기존 SVG는 더 이상 사용하지 않으므로 숨김 (호환용으로만 남김) */
.auto-on-border-svg {
  display: none;
}
/* 기본 버튼은 평소 그대로 보이도록 유지 */
.auto-on-btn-wrap .win-btn {
  position: relative;
  z-index: 1;
}
/* 외곽 테두리 레이어 */
.auto-on-btn-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  /* 네 변을 따라 흐르는 점선 효과 (간격을 더 촘촘하게 해서 부드럽게 보이게) */
  background:
    /* 위쪽 */
    repeating-linear-gradient(
      90deg,
      var(--accent-cyan) 0 2px,
      transparent 2px 4px
    ) 0 0 / 200% 1px repeat-x,
    /* 아래쪽 */
    repeating-linear-gradient(
      90deg,
      var(--accent-cyan) 0 2px,
      transparent 2px 4px
    ) 0 100% / 200% 1px repeat-x,
    /* 왼쪽 */
    repeating-linear-gradient(
      180deg,
      var(--accent-cyan) 0 2px,
      transparent 2px 4px
    ) 0 0 / 1px 200% repeat-y,
    /* 오른쪽 */
    repeating-linear-gradient(
      180deg,
      var(--accent-cyan) 0 2px,
      transparent 2px 4px
    ) 100% 0 / 1px 200% repeat-y;
  transition: opacity 0.15s;
}
@keyframes auto-on-dash {
  to {
    /* 네 변을 따라 전체적으로 살짝만 이동시켜, 부드럽게 흐르는 느낌 */
    background-position:
      -8px 0,
      -8px 100%,
      0 -8px,
      100% -8px;
  }
}
.auto-on-btn-wrap.is-on::before {
  opacity: 0.9;
  /* 한 바퀴 도는 데 약 3초 정도, 더 부드럽고 느리게 */
  animation: auto-on-dash 3s linear infinite;
}

/* ── Star Trails 캔버스 ── */
#star-trails-canvas {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #05060f;
}
body:not(.theme-98) #star-trails-canvas {
  display: block;
}
/* ── 화면 ── */
.screen {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.screen.active {
  display: flex;
}

/* ── 진입 화면 ── */
#enterScreen {
  position: relative;
  align-items: center;
  justify-content: center;
}
.enter-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 70% 30%,
    rgba(139, 233, 253, 0.06) 0%,
    transparent 60%
  );
}
.enter-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.enter-title {
  font-size: 24px;
  font-weight: bold;
  color: var(--accent-cyan);
  letter-spacing: 0.08em;
  text-shadow: 0 0 24px rgba(139, 233, 253, 0.4);
}
.enter-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}
.pixel-btn {
  background: var(--win-title-bg);
  border: 2px solid var(--accent-cyan);
  color: var(--accent-cyan);
  padding: 8px 36px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition:
    background 0.2s,
    box-shadow 0.2s;
  margin-top: 8px;
}
.pixel-btn:hover {
  background: rgba(139, 233, 253, 0.1);
  box-shadow: 0 0 18px rgba(139, 233, 253, 0.3);
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
.transition-out {
  animation: fadeOut 0.5s ease forwards;
}

/* ══ 메인 레이아웃 ══ */
#mainScreen {
  flex-direction: column;
}
.main-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  height: calc(100% - var(--taskbar-h));
  min-height: 0;
  overflow: hidden;
}

/* ── 게임 컬럼 ── */
.game-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#gameArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: transparent;
  border: none;
}
.game-area-title {
  display: none;
}
.game-area-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: transparent !important;
  min-height: 0;
}

/* ── 플로팅 패널 ── */
.float-panel {
  position: absolute;
  z-index: 10;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
#floatTukuTube {
  resize: both;
  overflow: hidden;
  min-width: 420px;
  min-height: 320px;
}
.float-panel .win-title,
.game-window-floating .win-title {
  cursor: grab;
}
.float-panel .draggable-handle,
.game-window-floating .draggable-handle {
  cursor: grab;
}
/* 창 닫기(X) 버튼 */
.win-close-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: 2px;
  transition:
    background 0.1s,
    color 0.1s;
  flex-shrink: 0;
}
.win-close-btn:hover {
  background: #c42b1c;
  color: #fff;
  border-color: #c42b1c;
}
.game-window-floating {
  position: absolute;
  z-index: 9;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.game-window-floating .game-tab-panel.active {
  flex: 1 1 0;
  min-height: 0;
}
/* 캔버스: 정수 배율(1x,2x,3x)만 사용해 비정수 스케일 뭉개짐 제거 */
.canvas-wrap {
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, #0c1a30 0%, #060e20 80%);
}
#gameCanvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* ── 게임 탭 헤더 ── */
.game-tab-header {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-main);
  background: var(--win-title-bg);
  flex-shrink: 0;
}
.game-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 14px;
  padding: 4px 0;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.game-tab-label {
  font-size: 11px;
}
.game-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(139, 233, 253, 0.05);
}
.game-tab-btn.active {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}

/* ── 상단 정보바 ── */
/* ── 게임 컨텐츠 래퍼: HUD 절대 오버레이 기준점 ── */
#gameContentWrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.game-info-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 10px;
  background: transparent;
  pointer-events: none; /* 클릭이 캔버스 통과 */
}
/* HUD 내 클릭 가능한 요소만 pointer-events 복원 */
.game-info-bar .gib-item,
.game-info-bar .win-box {
  pointer-events: auto;
}
/* 낚시 탭: canvas-wrap이 HUD까지 포함해 전체 채움 */
.game-tab-panel[data-panel="fishing"] {
  padding-top: 0;
}
/* 비낚시 탭: HUD 높이만큼 상단 여백 */
.game-tab-panel:not([data-panel="fishing"]) {
  padding-top: 26px;
}
.game-info-bar .gib-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.gib-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.gib-sep {
  color: var(--border-main);
  font-size: 10px;
}
.gib-exp-bar {
  width: 48px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 1px;
  flex-shrink: 0;
}
.gib-exp-fill {
  height: 100%;
  background: var(--accent-gold, #ffd700);
  width: 0%;
  transition: width 0.4s ease;
}
/* ── 탭 패널 ── */
.game-tab-panel {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.game-tab-panel.active {
  display: flex;
  flex-direction: column;
}

/* ── 초!집중 낚시 PIP ── (상단 HUD와 간격; pomodoro.js 좌상단 복귀 top과 동일 값 유지) */
#focusFishPip {
  transition: opacity 0.2s;
  top: 28px;
}
#focusFishPip:hover {
  opacity: 0.95;
}
#ffpOff {
  transition: background 0.3s;
}
#ffpOff:hover {
  background: rgba(0,0,0,0.58) !important;
}
#ffpHarvest {
  animation: ffpPulse 1.6s ease-in-out infinite;
}
@keyframes ffpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
  50%       { box-shadow: 0 0 0 6px rgba(255,215,0,0.25); }
}

/* 구 pomo-pip 스타일 제거 후 호환 유지 */
.pomo-pip { display: none !important; }
.pomo-pip-mini { display: none !important; }
.pomo-pip-bar { display: none !important; }
.pomo-pip-full { display: none !important; }


/* ── 우측 컬럼 (슬라이드 사이드바) ── */
.right-column {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: calc(100% - var(--taskbar-h));
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-main);
  background: var(--win-body-bg);
  overflow: hidden;
  min-height: 0;
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}
body.game-sidebar-visible .right-column {
  transform: translateX(0);
}
.huju-area {
  flex-shrink: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.player-area {
  flex-shrink: 0;
  border-left: none;
  border-right: none;
}
.shop-area {
  flex: 1;
  min-height: 0;
  border-left: none;
  border-right: none;
}
.shop-area .scroll-area {
  overflow-y: auto;
  height: 100%;
}
.right-bottom-row {
  display: flex;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--border-main);
}
.inventory-panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  border: none;
}
.inventory-panel-body {
  overflow-y: auto;
  padding: 5px 7px;
}
.inventory-panel-section {
  margin-bottom: 5px;
}
.inventory-panel-heading {
  font-size: 10px;
  color: var(--text-secondary);
  border-bottom: 1px dotted var(--border-shadow);
  padding-bottom: 2px;
  margin-bottom: 3px;
}
.inventory-panel-list {
  list-style: none;
  font-size: 10px;
}
.inventory-expand-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
}
.save-area {
  width: 110px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-main);
  border-right: none;
  border-bottom: none;
}

/* ══════════════════════════════════════
   스탯 패널 리빌드
   ══════════════════════════════════════ */
.stats-panel {
  padding: 9px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* ── 요약 카드 ── */
.stats-summary-card {
  background: linear-gradient(135deg, rgba(139,233,253,0.04) 0%, rgba(189,147,249,0.06) 100%);
  border: 1px solid rgba(139,233,253,0.18);
  border-radius: 8px;
  padding: 11px 13px 10px;
}
.ssc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.ssc-lv-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ssc-lv {
  font-size: 18px;
  font-weight: bold;
  color: var(--accent-cyan);
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
  letter-spacing: 0.5px;
}
.ssc-prestige {
  font-size: 10px;
  color: var(--accent-pink);
  background: rgba(255,121,198,0.1);
  border: 1px solid rgba(255,121,198,0.3);
  border-radius: 10px;
  padding: 1px 7px;
}
/* EXP 바 래퍼 */
.ssc-exp-wrap {
  position: relative;
  margin-bottom: 6px;
}
.ssc-bar-wrap {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.ssc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-gold, #ffd700), #ffe87a);
  border-radius: 3px;
  transition: width 0.35s ease;
}
.ssc-exp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ssc-exp-text {
  font-size: 10px;
  color: var(--text-secondary);
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
}
/* 레벨 보너스 힌트 버튼 */
.ssc-lv-tip-btn {
  font-size: 10px;
  color: var(--accent-gold, #ffd700);
  opacity: 0.6;
  cursor: default;
  position: relative;
  padding: 0 2px;
  user-select: none;
  transition: opacity 0.15s;
}
.ssc-lv-tip-btn:hover { opacity: 1; }
/* 레벨 보너스 툴팁 */
.ssc-lv-tip-btn::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--bg-secondary);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 11px;
  color: var(--text-primary);
  white-space: pre;
  z-index: 200;
  display: none;
  pointer-events: none;
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
  min-width: 180px;
  line-height: 1.7;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.ssc-lv-tip-btn:hover::after { display: block; }

/* 요약 카드 2컬럼 */
.ssc-two-col {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ssc-main {
  flex: 1;
  min-width: 0;
}
/* 레벨 보너스 사이드 카드 */
.ssc-lv-bonus-card {
  flex-shrink: 0;
  width: 130px;
  background: rgba(255,215,0,0.05);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.slbc-title {
  font-size: 9px;
  font-weight: bold;
  color: rgba(255,215,0,0.5);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.slbc-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}
.slbc-icon { flex-shrink: 0; font-size: 11px; }
.slbc-label { flex: 1; color: var(--text-secondary); }
.slbc-val {
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
  font-size: 11px;
  color: var(--accent-gold, #ffd700);
}
.slbc-divider {
  height: 1px;
  background: rgba(255,215,0,0.12);
  margin: 2px 0;
}
.slbc-next {
  font-size: 9px;
  color: var(--text-secondary);
  opacity: 0.65;
  line-height: 1.5;
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
}

/* 보너스 가로 스트립 */
.ssc-bonus-strip {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.sbs-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 5px 3px 4px;
  min-width: 0;
}
.sbs-icon { font-size: 13px; line-height: 1; }
.sbs-label {
  font-size: 9px;
  color: var(--text-secondary);
  margin: 2px 0 1px;
  white-space: nowrap;
}
.sbs-val {
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
  font-size: 11px;
  font-weight: bold;
  color: var(--accent-gold, #ffd700);
  white-space: nowrap;
}
.sbs-val--exp { color: #a0f0c0; }
.sbs-next {
  font-size: 8px;
  color: var(--text-secondary);
  opacity: 0.5;
  margin-top: 2px;
  white-space: nowrap;
}

/* 버프 태그 그리드 */
.ssc-buffs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.ssc-buff {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px 3px 6px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 10px;
  line-height: 1.4;
}
.ssc-buff-icon { font-size: 11px; flex-shrink: 0; line-height: 1; }
.ssc-buff-label { display: flex; flex-direction: column; }
.ssc-buff-sub {
  font-size: 9px;
  opacity: 0.7;
  margin-top: -1px;
}

/* 버프 색상 */
.buff-night     { color: #a48cff; background: rgba(130,100,255,0.1); border-color: rgba(130,100,255,0.25); }
.buff-day       { color: var(--text-secondary); background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
.buff-weather   { color: #7ecfff; background: rgba(100,180,255,0.1); border-color: rgba(100,180,255,0.25); }
.buff-season    { color: var(--text-secondary); background: rgba(255,255,255,0.03); border-color: var(--border-shadow); }
.buff-fullmoon  { color: var(--accent-gold,#ffd700); background: rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.3); }
.buff-eclipse   { color: #cc88ff; background: rgba(180,80,255,0.1); border-color: rgba(180,80,255,0.3); }
.buff-rod-active{ color: var(--accent-cyan); background: rgba(139,233,253,0.08); border-color: rgba(139,233,253,0.25); }
.buff-halo      { color: var(--accent-purple); background: rgba(189,147,249,0.1); border-color: rgba(189,147,249,0.25); }
.buff-focus     { color: #ffb86c; background: rgba(255,184,108,0.1); border-color: rgba(255,184,108,0.3); }
.buff-break     { color: #aad4ff; background: rgba(150,200,255,0.08); border-color: rgba(150,200,255,0.2); }
.buff-harvest   { color: var(--accent-gold,#ffd700); background: rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.3); }
.buff-auto      { color: var(--accent-green); background: rgba(80,250,123,0.08); border-color: rgba(80,250,123,0.22); }
.buff-idle      { color: #88ccaa; background: rgba(100,180,130,0.08); border-color: rgba(100,180,130,0.2); }
.buff-broadcast { color: var(--accent-pink); background: rgba(255,121,198,0.08); border-color: rgba(255,121,198,0.25); }

/* 섹션 공통 */
.stats-section {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-shadow);
  border-radius: 6px;
  padding: 9px 11px;
}
.stats-sec-title {
  font-size: 10px;
  font-weight: bold;
  color: var(--text-secondary);
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-shadow);
}

/* 장비 행 */
.seq-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
  min-height: 20px;
}
.seq-icon { flex-shrink: 0; font-size: 12px; line-height: 1; }
.seq-name { flex: 1; color: var(--text-primary); }
.seq-lv   {
  color: var(--accent-cyan);
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
  font-size: 11px;
  flex-shrink: 0;
}
/* 낚싯줄 한도 — 별도 행으로 표시 */
.seq-kg-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 2px 0 4px 2px;
}
.seq-kg-label {
  font-size: 10px;
  color: var(--text-secondary);
}
.seq-kg-val {
  font-size: 11px;
  font-weight: bold;
  color: var(--accent-orange);
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
  background: rgba(255,184,108,0.08);
  border: 1px solid rgba(255,184,108,0.25);
  border-radius: 5px;
  padding: 1px 7px;
}
.seq-fx {
  color: var(--accent-purple);
  font-size: 10px;
  flex-shrink: 0;
  text-align: right;
}
.seq-ability {
  margin-top: 4px;
  font-size: 10px;
  color: var(--accent-orange);
  padding: 3px 7px;
  background: rgba(255,184,108,0.07);
  border-left: 2px solid rgba(255,184,108,0.35);
  border-radius: 0 3px 3px 0;
  line-height: 1.4;
}

/* 핵심 스탯 블록 */
.stats-stat-block {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stats-stat-block:last-child { border-bottom: none; padding-bottom: 0; }
.ssb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.ssb-name  { font-size: 11px; color: var(--text-primary); }
.ssb-total {
  font-size: 12px;
  font-weight: bold;
  color: var(--accent-cyan);
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
}
.ssb-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 3px 0 2px;
}
.ssb-desc {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.75;
}

/* 출처 배지 */
.stat-src-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
  white-space: nowrap;
}
.src-rod      { color: var(--accent-cyan);             background: rgba(139,233,253,0.09); border: 1px solid rgba(139,233,253,0.22); }
.src-lv       { color: var(--accent-gold, #ffd700);    background: rgba(255,215,0,0.07);   border: 1px solid rgba(255,215,0,0.22); }
.src-art      { color: var(--accent-purple);           background: rgba(189,147,249,0.09); border: 1px solid rgba(189,147,249,0.22); }
.src-prestige { color: var(--accent-pink);             background: rgba(255,121,198,0.09); border: 1px solid rgba(255,121,198,0.22); }
.src-special  { color: var(--accent-green);            background: rgba(80,250,123,0.09);  border: 1px solid rgba(80,250,123,0.22); }

/* 낚시 능력치 2×2 그리드 */
.stats-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sg2-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-shadow);
  border-radius: 5px;
  padding: 6px 7px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sg2-icon  { font-size: 13px; flex-shrink: 0; }
.sg2-label { flex: 1; font-size: 10px; color: var(--text-secondary); line-height: 1.3; }
.sg2-hint  { font-size: 9px; color: rgba(139,148,158,0.55); }
.sg2-val   {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-primary);
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
  flex-shrink: 0;
}
.stats-ability-tag {
  display: inline-block;
  margin-top: 7px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
}
.stats-ability-tag.night {
  color: var(--accent-purple);
  background: rgba(189,147,249,0.09);
  border: 1px solid rgba(189,147,249,0.22);
}
.stats-ability-tag.moon {
  color: var(--accent-gold, #ffd700);
  background: rgba(255,215,0,0.07);
  border: 1px solid rgba(255,215,0,0.2);
}

/* ── 2컬럼 레이아웃 ── */
.stats-mid-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.stats-mid-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stats-mid-right {
  flex: 1;
  min-width: 0;
}
/* 그래프 카드 */
.stats-graph-card {
  width: 148px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* 레이더 카드 (alias) */
.stats-radar-card {
  width: 148px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.srd-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2px 0 2px;
}
.srd-letter {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  color: var(--rank-color, #ffd700);
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
  text-shadow: 0 0 14px var(--rank-color, rgba(255,215,0,0.5));
  letter-spacing: -1px;
}
.srd-pct {
  font-size: 10px;
  color: var(--text-secondary);
  font-family: "Nanum Gothic Coding", "Consolas", monospace;
  margin-top: 1px;
}

/* 보너스 리스트 (아티팩트 / 계승) */
.stats-bonus-list { display: flex; flex-direction: column; gap: 4px; }
.sbl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.sbl-icon  { flex-shrink: 0; font-size: 11px; }
.sbl-label { flex: 1; color: var(--text-secondary); }
.sbl-val   { font-family: "Nanum Gothic Coding", "Consolas", monospace; font-size: 11px; flex-shrink: 0; }
.sbl-val.art      { color: var(--accent-purple); }
.sbl-val.prestige { color: var(--accent-pink); }


/* ── Lo-fi 플레이어 ── */
.player-body {
  overflow-y: auto;
  padding: 5px 7px;
}
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-main);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  padding: 1px 4px;
  transition: border-color 0.15s;
}
.locale-switcher-btn {
  min-width: 26px;
  letter-spacing: 0.04em;
}
.theme-toggle:hover {
  border-color: var(--accent-cyan);
}
.winamp-controls {
  display: flex;
  gap: 2px;
  margin-bottom: 3px;
}
.winamp-btn {
  background: var(--win-title-bg);
  border: 1px solid var(--border-main);
  color: var(--text-primary);
  font-size: 10px;
  padding: 2px 5px;
  font-family: inherit;
  cursor: pointer;
}
.winamp-btn:hover {
  background: var(--border-main);
}
.player-playlist-section {
  margin-top: 4px;
}
.player-playlist-label {
  font-size: 10px;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 2px;
}
.player-playlist-row {
  display: flex;
  gap: 3px;
}
.player-playlist-input {
  flex: 1;
  background: var(--bg-main);
  border: 1px solid var(--border-main);
  color: var(--text-primary);
  padding: 2px 4px;
  font-size: 10px;
  font-family: inherit;
  min-width: 0;
}

/* ── 상점 ── */
.tab-row {
  display: flex;
  gap: 3px;
  margin-bottom: 6px;
}
.tab-btn {
  flex: 1;
  font-size: 10px;
}
.shop-stat-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border-shadow);
  margin-bottom: 5px;
  font-size: 11px;
}
.shop-item {
  margin-bottom: 5px;
  padding: 5px 6px;
  border: 1px solid var(--border-shadow);
  background: var(--win-body-bg);
  transition: border-color 0.15s;
}
.shop-item-next {
  border-color: var(--accent-cyan);
}
.shop-item:hover {
  border-color: var(--accent-orange);
}

/* ── 포모도로 ── */
.pomodoro-duration-btn.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* 집중 모드 버튼 활성 */
#pomodoroFocusMode.active {
  border-color: var(--accent-gold, #ffd700);
  color: var(--accent-gold, #ffd700);
}

/* 집중 모드: 낚시창 + 포모도로만 표시 */
body.focus-mode #floatNews,
body.focus-mode #floatBroadcast,
body.focus-mode #floatAquarium,
body.focus-mode #floatInventory,
body.focus-mode #floatTukuTube,
body.focus-mode #floatCmd,
body.focus-mode #pancakeWindow {
  display: none !important;
}

/* ── 인벤토리 등급 헤더 ── */
.inv-rarity-header {
  font-size: 10px;
  font-weight: bold;
  padding: 3px 0 1px;
  margin-top: 4px;
  border-bottom: 1px dotted var(--border-shadow);
}

/* ══ 작업표시줄 (Windows XP 스타일) ══ */
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--taskbar-h);
  background: linear-gradient(
    180deg,
    #245edc 0%,
    #1a4abc 40%,
    #1040b8 60%,
    #245edc 100%
  );
  border-top: 2px solid #5e91f8;
  display: flex;
  align-items: center;
  z-index: 500;
  padding: 0 4px;
  gap: 3px;
}
/* ── Win98 작업표시줄 ── */
body.theme-98 .taskbar {
  background: #c0c0c0;
  border-top: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: inset 0 1px 0 #ffffff;
}
body.theme-98 .taskbar-start-btn {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
  color: #000000;
  font-weight: bold;
  font-size: 11px;
  padding: 1px 8px;
  box-shadow: none;
  transition: none;
  height: 22px;
  display: flex;
  align-items: center;
  gap: 4px;
}
body.theme-98 .taskbar-start-btn:hover {
  filter: none;
}
body.theme-98 .taskbar-start-btn:active {
  border-color: #808080 #ffffff #ffffff #808080;
  padding: 2px 7px 0 9px;
}
body.theme-98 .taskbar-apps {
  gap: 2px;
}
body.theme-98 .taskbar-app-btn {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000000;
  border-radius: 0;
  font-size: 13px;
  padding: 1px 6px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  transition: none;
}
body.theme-98 .taskbar-app-btn:hover {
  background: #d8d8d8;
}
body.theme-98 .taskbar-app-btn:active,
body.theme-98 .taskbar-app-btn.is-open {
  border-color: #808080 #ffffff #ffffff #808080;
  background: #b8b8b8;
}
body.theme-98 .taskbar-tray {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
  padding: 1px 6px;
  gap: 6px;
  height: 22px;
}
body.theme-98 .taskbar-date {
  color: #000000;
  font-size: 10px;
}
body.theme-98 .taskbar-clock {
  color: #000000;
  font-size: 11px;
}
body.theme-98 .taskbar-weather-display {
  font-size: 13px;
}
body.theme-98 .taskbar-tray .theme-toggle {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000000;
  padding: 0 4px;
  height: 18px;
  line-height: 1;
  font-size: 12px;
  border-radius: 0;
}
body.theme-98 .taskbar-tray .theme-toggle:hover {
  background: #d8d8d8;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000000;
}
body.theme-98 .taskbar-bg-btn {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000000;
  border-radius: 0;
  padding: 0 4px;
  height: 18px;
  line-height: 1;
  font-size: 12px;
}
body.theme-98 .taskbar-bg-btn:hover {
  background: #d8d8d8;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000000;
}
body.theme-98 .taskbar-bg-btn.active {
  border-color: #808080 #ffffff #ffffff #808080;
  background: #b8b8b8;
}
.taskbar-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(
    180deg,
    #5da934 0%,
    #3a8c22 40%,
    #2d7a18 60%,
    #5da934 100%
  );
  border: 1px solid #4a9e2a;
  border-radius: 12px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 3px 14px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: filter 0.1s;
}
.taskbar-start-icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}
.taskbar-start-btn:hover {
  filter: brightness(1.15);
}
.taskbar-apps {
  display: flex;
  gap: 2px;
  margin-left: 4px;
  flex: 1;
}
.taskbar-app-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 14px;
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s;
}
.taskbar-app-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.taskbar-app-btn.is-open {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.taskbar-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 100, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.taskbar-weather {
  display: flex;
  align-items: center;
  gap: 2px;
}
.taskbar-weather-display {
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  cursor: default;
  opacity: 1;
  user-select: none;
  pointer-events: none;
}
.taskbar-date {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
}
.taskbar-clock {
  font-size: 11px;
  color: #fff;
  font-weight: bold;
}
.taskbar-tray .theme-toggle {
  padding: 2px 6px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
}
.taskbar-tray .theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.taskbar-bg-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 2px;
}
.taskbar-bg-btn:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.taskbar-bg-btn.active {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ── 시작 메뉴 ── */
.start-menu {
  position: fixed;
  bottom: var(--taskbar-h);
  left: 0;
  width: 180px;
  background: linear-gradient(180deg, #1a4abc, #1040b8);
  border: 1px solid #5e91f8;
  border-bottom: none;
  display: none;
  flex-direction: column;
  z-index: 600;
  box-shadow: 2px -2px 8px rgba(0, 0, 0, 0.4);
}
.start-menu.is-open {
  display: flex;
}
.start-menu-header {
  background: linear-gradient(90deg, #1040b8, #245edc);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.start-menu-item {
  background: transparent;
  border: none;
  color: #fff;
  text-align: left;
  padding: 6px 14px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.start-menu-item:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ── Win98 시작 메뉴 ── */
body.theme-98 .start-menu {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-bottom: none;
  box-shadow: 2px -2px 4px rgba(0,0,0,0.3);
  width: 200px;
}
body.theme-98 .start-menu-header {
  background: linear-gradient(180deg, #000080, #1084d0);
  color: #ffffff;
  font-weight: bold;
  font-size: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid #808080;
  writing-mode: horizontal-tb;
}
body.theme-98 .start-menu-item {
  color: #000000;
  background: transparent;
  padding: 4px 12px;
  font-size: 11px;
  transition: none;
}
body.theme-98 .start-menu-item:hover {
  background: #000080;
  color: #ffffff;
}
body.theme-98 .start-menu hr {
  border-top-color: #808080;
  border-bottom: 1px solid #ffffff;
}

/* ── CMD ── */
.cmd-panel-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 6px;
  background: #000;
}
.cmd-output {
  flex: 1;
  overflow-y: auto;
  background: #000;
  color: #d4ffd4;
  border: 1px solid #2d2d2d;
  padding: 6px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 10px;
  line-height: 1.35;
  white-space: pre;
}
.cmd-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #d4ffd4;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 10px;
}
.cmd-prompt {
  white-space: nowrap;
}
.cmd-input {
  flex: 1;
  min-width: 0;
  background: #000;
  border: 1px solid #3a3a3a;
  color: #d4ffd4;
  padding: 2px 4px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 10px;
}
.cmd-input:focus {
  outline: 1px solid #5ecb5e;
  border-color: #5ecb5e;
}

/* ══ 오버레이 ══ */
.inventory-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.inventory-overlay.is-open {
  display: flex;
}
.inventory-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}
.inventory-overlay-content {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.inventory-overlay-body {
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.inventory-overlay-list {
  list-style: none;
  font-size: 11px;
}
@media (max-width: 500px) {
  .inventory-overlay-body {
    grid-template-columns: 1fr;
  }
}

/* ── 업적 ── */
.achievements-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ach-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px;
  border: 1px solid var(--border-shadow);
  background: var(--win-body-bg);
  font-size: 11px;
}
.ach-item.ach-done {
  border-color: rgba(80, 250, 158, 0.3);
}
.ach-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ach-name {
  font-weight: bold;
  margin-bottom: 2px;
}
.ach-desc {
  color: var(--text-secondary);
  font-size: 10px;
}

/* ── 계승 ── */
.prestige-upgrade-item {
  padding: 7px;
  border: 1px solid var(--border-shadow);
  background: var(--win-body-bg);
  margin-bottom: 5px;
}

/* ── 방송 ── */
.broadcast-body {
  overflow: hidden;
  padding: 0;
}
.broadcast-chat-list {
  list-style: none;
  overflow-y: auto;
  height: 100%;
  padding: 3px 5px;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-who {
  color: var(--accent-cyan);
  font-weight: bold;
}

/* ── 캘린더 ── */
.calendar-popup {
  position: fixed;
  z-index: 1010;
  min-width: 196px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-day-btn {
  padding: 3px 0;
  font-size: 11px;
  text-align: center;
  min-width: 0;
}
.cal-day-current {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}

/* ── 액티브 모드 펄스 ── */
@keyframes pulse {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

/* ── 알림 애니메이션 ── */
@keyframes saveNotificationSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes saveNotificationSlideOut {
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}
@keyframes achievementSlideIn {
  from {
    opacity: 0;
    transform: translateX(400px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes achievementSlideOut {
  to {
    opacity: 0;
    transform: translateX(400px);
  }
}

/* ══ 물고기 카드 그리드 (Fish Grid) ══ */
.fish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 24px);
  grid-auto-rows: 24px;
  align-items: start;
  gap: 8px;
  padding: 4px;
}
/* 인벤토리 비었을 때 메시지 — 그리드 전체 너비로 가로 표시 */
.fish-grid .inventory-empty-msg {
  grid-column: 1 / -1;
  color: var(--text-secondary);
  font-size: 10px;
  padding: 8px 4px;
  text-align: center;
  white-space: nowrap;
}
/* 수족관 6열 고정 크기 */
.aquarium-grid {
  display: grid;
  grid-template-columns: repeat(6, 24px);
  grid-auto-rows: 24px;
  align-items: start;
  gap: 8px;
  padding: 4px;
}
.fish-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: start; /* 행 높이를 채우지 않음 */
  border: 1px solid #444;
  background: var(--win-title-bg);
  cursor: default;
  user-select: none;
  border-radius: 2px;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
  width: 24px;
  height: 24px;
  max-height: 24px;
  min-width: 0;
  overflow: visible;
  padding: 1px;
  box-sizing: border-box;
  isolation: isolate;
}
.fish-card:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  z-index: 30;
}
/* 등급별 테두리 */
.fish-card[data-rarity="common"] {
  border-color: #666;
}
.fish-card[data-rarity="normal"] {
  border-color: #88ccff;
}
.fish-card[data-rarity="rare"] {
  border-color: #4499ff;
}
.fish-card[data-rarity="unique"] {
  border-color: #cc66ff;
  box-shadow: 0 0 3px rgba(204, 102, 255, 0.4);
}
.fish-card[data-rarity="epic"] {
  border-color: #ff66cc;
  box-shadow: 0 0 5px rgba(255, 102, 204, 0.45);
}
.fish-card[data-rarity="legendary"] {
  border-color: #ffdd00;
  box-shadow: 0 0 7px rgba(255, 221, 0, 0.55);
}
.fish-card.empty-slot {
  border-color: #252525;
  background: rgba(0, 0, 0, 0.08);
}

/* 아이콘 & 이름 */
.fish-card .fish-icon {
  font-size: 10px;
  line-height: 1;
  z-index: 1;
  position: relative;
  flex-shrink: 0;
}
.fish-card .fish-name {
  display: none; /* 이름 다시 숨김 */
}
/* 수량 배지 */
.fish-card .fish-count-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  font-size: 6px;
  font-weight: bold;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  padding: 0 1px;
  border-radius: 1px;
  line-height: 9px;
  z-index: 4;
}

/* ──────────────────────────────────────────
   카드 겹침(STACK) 효과  — box-shadow 방식
   box-shadow는 항상 요소 뒤에 그려지므로
   앞 카드가 완전히 보이고 뒤 카드는 뒤에서 삐져나옴
   ────────────────────────────────────────── */
.fish-card.stacked {
  box-shadow:
    3px -3px 0 -1px var(--win-title-bg),
    3px -3px 0 0 #555,
    5px -5px 0 -1px var(--win-title-bg),
    5px -5px 0 0 #555;
}
.fish-card.stacked:hover {
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.7),
    4px -4px 0 -1px var(--win-title-bg),
    4px -4px 0 0 #555,
    7px -7px 0 -1px var(--win-title-bg),
    7px -7px 0 0 #555;
}

/* 대물 배지 */
.fish-card .big-catch-badge {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 5px;
  color: #fff;
  background: linear-gradient(90deg, #c97d00, #ffb700);
  padding: 0 1px;
  border-radius: 1px;
  white-space: nowrap;
  line-height: 8px;
  animation: pulse 0.8s infinite alternate;
  z-index: 3;
}
/* 툴팁 — JS가 body에 고정 위치(fixed)로 렌더링함 */
.fish-card .fish-tooltip {
  display: none;
}
#fishTooltipGlobal {
  position: fixed;
  display: none;
  min-width: 130px;
  max-width: 200px;
  background: #0d1117;
  border: 1px solid var(--border-main);
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.6;
  z-index: 2000;
  pointer-events: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.9);
  white-space: pre-line;
  border-radius: 2px;
  color: var(--text-primary);
  text-align: left;
  font-family: "MS UI Gothic", "Nanum Gothic Coding", "Courier New", monospace;
}

/* ── 수족관 페이지 네비 ── */
.aq-page-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 0 0;
  flex-shrink: 0;
}
.aq-page-btn {
  background: var(--win-title-bg);
  border: 1px solid var(--border-main);
  color: var(--text-primary);
  font-size: 11px;
  padding: 1px 6px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.1s;
  font-family: inherit;
}
.aq-page-btn:hover:not(:disabled) {
  background: var(--border-main);
}
.aq-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.aq-page-info {
  font-size: 9px;
  color: var(--text-secondary);
  min-width: 40px;
  text-align: center;
}

/* ══ 새 등급: Sol(태양) / Luna(달) ══ */
.fish-card[data-rarity="sol"] {
  border-color: #ff8c00;
  box-shadow:
    0 0 8px rgba(255, 140, 0, 0.6),
    0 0 14px rgba(255, 200, 0, 0.3);
  animation: sol-glow 2s infinite alternate;
}
.fish-card[data-rarity="luna"] {
  border-color: #c8a8ff;
  box-shadow:
    0 0 10px rgba(200, 168, 255, 0.7),
    0 0 20px rgba(180, 140, 255, 0.4);
  animation: luna-glow 2.5s infinite alternate;
}
@keyframes sol-glow {
  from {
    box-shadow:
      0 0 8px rgba(255, 140, 0, 0.6),
      0 0 14px rgba(255, 200, 0, 0.3);
  }
  to {
    box-shadow:
      0 0 14px rgba(255, 180, 0, 0.9),
      0 0 22px rgba(255, 220, 0, 0.5);
  }
}
@keyframes luna-glow {
  from {
    box-shadow:
      0 0 10px rgba(200, 168, 255, 0.7),
      0 0 20px rgba(180, 140, 255, 0.4);
  }
  to {
    box-shadow:
      0 0 18px rgba(220, 190, 255, 1),
      0 0 30px rgba(200, 160, 255, 0.7);
  }
}

/* ══ 달무리 카드 글로우 ══ */
.fish-card.halo-moonlit {
  box-shadow:
    inset 0 0 6px rgba(220, 220, 255, 0.5),
    0 0 6px rgba(200, 200, 255, 0.5) !important;
}
.fish-card.halo-starlit {
  box-shadow:
    inset 0 0 8px rgba(180, 180, 255, 0.6),
    0 0 10px rgba(160, 160, 255, 0.6) !important;
  animation: starlit-pulse 1.8s infinite alternate;
}
.fish-card.halo-fullmoon {
  box-shadow:
    inset 0 0 10px rgba(255, 215, 0, 0.5),
    0 0 14px rgba(255, 215, 0, 0.6) !important;
  animation: fullmoon-pulse 1.5s infinite alternate;
}
@keyframes starlit-pulse {
  from {
    box-shadow:
      inset 0 0 8px rgba(180, 180, 255, 0.6),
      0 0 10px rgba(160, 160, 255, 0.6) !important;
  }
  to {
    box-shadow:
      inset 0 0 14px rgba(200, 200, 255, 0.8),
      0 0 18px rgba(180, 180, 255, 0.8) !important;
  }
}
@keyframes fullmoon-pulse {
  from {
    box-shadow:
      inset 0 0 10px rgba(255, 215, 0, 0.5),
      0 0 14px rgba(255, 215, 0, 0.6) !important;
  }
  to {
    box-shadow:
      inset 0 0 16px rgba(255, 230, 0, 0.7),
      0 0 22px rgba(255, 215, 0, 0.9) !important;
  }
}

/* 달무리 배지 (카드 좌상단) */
.fish-card .halo-badge {
  position: absolute;
  top: -3px;
  left: -3px;
  font-size: 8px;
  line-height: 1;
  z-index: 5;
  filter: drop-shadow(0 0 3px rgba(255, 255, 200, 0.9));
}

/* 수족관 달무리 글로우 동일 적용 */
.aquarium-grid .fish-card.halo-moonlit {
  box-shadow:
    inset 0 0 6px rgba(220, 220, 255, 0.5),
    0 0 6px rgba(200, 200, 255, 0.5) !important;
}
.aquarium-grid .fish-card.halo-starlit {
  box-shadow:
    inset 0 0 8px rgba(180, 180, 255, 0.6),
    0 0 10px rgba(160, 160, 255, 0.6) !important;
}
.aquarium-grid .fish-card.halo-fullmoon {
  box-shadow:
    inset 0 0 10px rgba(255, 215, 0, 0.5),
    0 0 14px rgba(255, 215, 0, 0.6) !important;
}

/* ══ 물고기 상세 패널 ══ */
.fish-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: none;
  align-items: center;
  justify-content: center;
}
.fish-detail-overlay[aria-hidden="false"] {
  display: flex;
}
.fish-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}
.fish-detail-panel {
  position: relative;
  width: 340px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: fishDetailIn 0.18s ease-out;
}
@keyframes fishDetailIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.fish-detail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: bold;
}
.fish-detail-body {
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.75;
}
.fish-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  color: var(--text-secondary);
}
.fish-detail-meta .fd-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
}
.fd-tag.fd-zone {
  background: rgba(70, 130, 180, 0.18);
  color: #7ec8e3;
}
.fd-tag.fd-rarity {
  background: rgba(255, 200, 0, 0.15);
}
.fd-tag.fd-size {
  background: rgba(100, 100, 100, 0.2);
  color: #bbb;
}
.fd-tag.fd-count {
  background: rgba(100, 200, 100, 0.15);
  color: #80d080;
}
.fd-tag.fd-best {
  background: rgba(200, 150, 50, 0.18);
  color: #e0c070;
}
.fish-detail-divider {
  border: none;
  border-top: 1px solid var(--border-main);
  margin: 10px 0;
}
.fish-detail-desc {
  white-space: pre-line;
  font-family: "MS UI Gothic", "Nanum Gothic Coding", "Courier New", monospace;
  font-size: 11px;
  line-height: 1.85;
  color: var(--text-primary);
}
.fish-detail-desc .fd-undiscovered {
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}
/* rarity color for detail title */
.fish-detail-title[data-rarity="common"] {
  background: linear-gradient(90deg, #3a3a3a, #2a2a2a);
}
.fish-detail-title[data-rarity="normal"] {
  background: linear-gradient(90deg, #2e4e2e, #1e3e1e);
}
.fish-detail-title[data-rarity="rare"] {
  background: linear-gradient(90deg, #1e3a5e, #0e2a4e);
}
.fish-detail-title[data-rarity="unique"] {
  background: linear-gradient(90deg, #4a2e6e, #3a1e5e);
}
.fish-detail-title[data-rarity="epic"] {
  background: linear-gradient(90deg, #6e4a1e, #5e3a0e);
}
.fish-detail-title[data-rarity="legendary"] {
  background: linear-gradient(90deg, #6e1e1e, #5e0e0e);
}
.fish-detail-title[data-rarity="sol"] {
  background: linear-gradient(90deg, #7a4a00, #5e3800);
}
.fish-detail-title[data-rarity="luna"] {
  background: linear-gradient(90deg, #1a1a4a, #0e0e3a);
}

/* ══ TukuYouTube ══ */
.tukutube-body {
  /* Light mode (default) */
  --tt-bg: #ffffff;
  --tt-bg-alt: #f2f2f2;
  --tt-bg-hover: rgba(0, 0, 0, 0.05);
  --tt-bg-active: rgba(0, 0, 0, 0.1);
  --tt-text: #0f0f0f;
  --tt-text-secondary: #606060;
  --tt-text-muted: #909090;
  --tt-border: #e5e5e5;
  --tt-input-bg: #f0f0f0;
  --tt-input-border: #ccc;
  --tt-addressbar-bg: #f2f2f2;
  --tt-url-bg: #fff;
  --tt-url-color: #606060;
  --tt-card-shadow: rgba(0, 0, 0, 0.1);
  --tt-banner-bg: linear-gradient(135deg, #f8f8ff, #eef0ff);
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  background: var(--tt-bg);
  overflow: hidden;
}
.tukutube-body.tukutube-dark {
  --tt-bg: #0f0f0f;
  --tt-bg-alt: #272727;
  --tt-bg-hover: rgba(255, 255, 255, 0.08);
  --tt-bg-active: rgba(255, 255, 255, 0.14);
  --tt-text: #f1f1f1;
  --tt-text-secondary: #aaa;
  --tt-text-muted: #717171;
  --tt-border: #272727;
  --tt-input-bg: #121212;
  --tt-input-border: #333;
  --tt-addressbar-bg: #202020;
  --tt-url-bg: #181818;
  --tt-url-color: #aaa;
  --tt-card-shadow: rgba(0, 0, 0, 0.5);
  --tt-banner-bg: linear-gradient(135deg, #0f0f0f, #1a1a2e);
}
.tukutube-addressbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--tt-addressbar-bg);
  border-bottom: 1px solid var(--tt-border);
  flex-shrink: 0;
}
.tukutube-nav-btn {
  background: transparent;
  border: none;
  color: var(--tt-text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 50%;
  flex-shrink: 0;
  transition:
    background 0.1s,
    color 0.1s;
  font-family: inherit;
  line-height: 1;
}
.tukutube-nav-btn:hover {
  background: var(--tt-bg-hover);
  color: var(--tt-text);
}
.tukutube-nav-btn:active {
  background: var(--tt-bg-active);
}
.tukutube-lock {
  font-size: 10px;
  flex-shrink: 0;
}
.tukutube-url {
  flex: 1;
  font-size: 10px;
  color: var(--tt-url-color);
  background: var(--tt-url-bg);
  border: 1px solid var(--tt-input-border);
  border-radius: 12px;
  padding: 2px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tukutube-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tukutube-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--tt-bg);
  border-bottom: 1px solid var(--tt-border);
  flex-shrink: 0;
}
.tukutube-header img {
  height: 18px;
}
.tukutube-hamburger {
  background: transparent;
  border: none;
  color: var(--tt-text);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.1s;
  font-family: inherit;
}
.tukutube-hamburger:hover {
  background: var(--tt-bg-hover);
}
.tukutube-search {
  flex: 1;
  background: var(--tt-input-bg);
  border: 1px solid var(--tt-input-border);
  border-radius: 14px;
  color: var(--tt-text);
  padding: 3px 10px;
  font-size: 10px;
  font-family: inherit;
}
.tukutube-search:focus {
  outline: 1px solid #065fd4;
  border-color: #065fd4;
}
.tukutube-search::placeholder {
  color: var(--tt-text-muted);
}
.tukutube-theme-toggle {
  background: transparent;
  border: none;
  color: var(--tt-text-secondary);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.1s;
}
.tukutube-theme-toggle:hover {
  background: var(--tt-bg-hover);
}
/* sidebar + feed layout */
.tukutube-main-area {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.tukutube-sidebar {
  width: 148px;
  background: var(--tt-bg);
  border-right: 1px solid var(--tt-border);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  transition: width 0.2s ease;
  padding: 4px 0;
}
.tukutube-sidebar.collapsed {
  width: 48px;
}
.tukutube-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  color: var(--tt-text);
  font-size: 10px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.1s;
}
.tukutube-sidebar-item:hover {
  background: var(--tt-bg-hover);
}
.tukutube-sidebar-item.active {
  background: var(--tt-bg-active);
}
.tukutube-sidebar-item .sidebar-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.tukutube-sidebar.collapsed .sidebar-label {
  display: none;
}
.tukutube-sidebar.collapsed .tukutube-sidebar-item {
  justify-content: center;
  padding: 8px 4px;
}
.tukutube-sidebar-divider {
  border: 0;
  border-top: 1px solid var(--tt-border);
  margin: 5px 0;
}
.tukutube-sidebar-heading {
  padding: 8px 12px 4px;
  font-size: 9px;
  color: var(--tt-text-muted);
  font-weight: bold;
}
.tukutube-sidebar.collapsed .tukutube-sidebar-heading {
  display: none;
}
.tukutube-feed {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--tt-bg);
}
.tukutube-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px;
}
.tukutube-card {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.tukutube-card:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 12px var(--tt-card-shadow);
}
.tukutube-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: 8px 8px 0 0;
  position: relative;
}
.tukutube-live-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: #c00;
  color: #fff;
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: bold;
  letter-spacing: 0.04em;
}
.tukutube-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 2px;
}
.tukutube-info {
  padding: 6px 2px 8px;
}
.tukutube-title {
  font-size: 10px;
  color: var(--tt-text);
  line-height: 1.35;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tukutube-meta {
  font-size: 9px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tukutube-channel {
  color: var(--tt-text-secondary);
}
.tukutube-stats {
  color: var(--tt-text-muted);
}

/* TukuTube detail (video) view */
.tukutube-detail {
  display: flex;
  flex-direction: column;
}

/* TukuTube 웹페이지 뷰 */
.tukutube-webpage {
  height: 100%;
  overflow: hidden;
}
.tukutube-webpage > div:first-child {
  padding: 6px 10px;
  border-bottom: 1px solid var(--tt-border);
  flex-shrink: 0;
}
.tukutube-webpage-url {
  font-size: 10px;
  color: var(--tt-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.tukutube-webpage-frame {
  width: 100%;
  flex: 1;
  border: none;
  display: block;
  height: calc(100% - 36px);
}

.tukutube-player {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  flex-shrink: 0;
}
.tukutube-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.tukutube-player-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.tukutube-video-info {
  padding: 10px 12px;
  border-bottom: 1px solid var(--tt-border);
}
.tukutube-video-title {
  font-size: 12px;
  color: var(--tt-text);
  font-weight: bold;
  margin-bottom: 6px;
  line-height: 1.4;
}
.tukutube-video-stats {
  font-size: 10px;
  color: var(--tt-text-secondary);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.tukutube-video-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--tt-text);
  border-bottom: 1px solid var(--tt-border);
}
.tukutube-channel-icon {
  font-size: 22px;
}
.tukutube-video-desc {
  padding: 10px 12px;
  font-size: 10px;
  color: var(--tt-text-secondary);
  line-height: 1.55;
  white-space: pre-line;
}
.tukutube-back-btn {
  background: var(--tt-bg-hover);
  border: none;
  color: var(--tt-text);
  padding: 4px 10px;
  font-size: 10px;
  cursor: pointer;
  border-radius: 14px;
  font-family: inherit;
  transition: background 0.1s;
}
.tukutube-back-btn:hover {
  background: var(--tt-bg-active);
}
.tukutube-open-yt-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--tt-border);
  color: var(--tt-text);
  padding: 4px 10px;
  font-size: 10px;
  cursor: pointer;
  border-radius: 14px;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.1s;
}
.tukutube-open-yt-btn:hover {
  background: var(--tt-bg-hover);
}

/* Shorts grid */
.tukutube-shorts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
}
.tukutube-short-card {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.tukutube-short-card:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.tukutube-short-thumb {
  width: 100%;
  aspect-ratio: 9/16;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.tukutube-short-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 8px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}
.tukutube-short-title {
  font-size: 10px;
  color: #f1f1f1;
  line-height: 1.3;
  margin-bottom: 2px;
}
.tukutube-short-meta {
  font-size: 8px;
  color: #aaa;
}

/* Channel banner */
.tukutube-channel-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--tt-banner-bg);
  border-bottom: 1px solid var(--tt-border);
}
.tukutube-channel-banner-icon {
  font-size: 32px;
}
.tukutube-channel-banner-name {
  font-size: 13px;
  font-weight: bold;
  color: var(--tt-text);
  margin-bottom: 2px;
}
.tukutube-channel-banner-subs {
  font-size: 9px;
  color: var(--tt-text-secondary);
  margin-bottom: 3px;
}
.tukutube-channel-banner-desc {
  font-size: 9px;
  color: var(--tt-text-muted);
  line-height: 1.3;
}

/* Empty state */
.tukutube-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  min-height: 200px;
}
.tukutube-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
}
.tukutube-empty-title {
  font-size: 12px;
  color: var(--tt-text);
  font-weight: bold;
  margin-bottom: 6px;
}
.tukutube-empty-desc {
  font-size: 10px;
  color: var(--tt-text-secondary);
  line-height: 1.5;
}

/* ── Phase 5 신규: 카드 액션 버튼 / 보너스 배너 / 댓글 ── */
.tukutube-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.tukutube-card-like,
.tukutube-card-save {
  cursor: pointer;
  font-size: 11px;
  opacity: 0.5;
  transition:
    opacity 0.15s,
    transform 0.1s;
  user-select: none;
}
.tukutube-card-like:hover,
.tukutube-card-save:hover {
  opacity: 1;
}
.tukutube-card-like.active,
.tukutube-card-save.active {
  opacity: 1;
  filter: drop-shadow(0 0 4px var(--accent-purple, #9c6fff));
}
.tukutube-card-bonus {
  font-size: 11px;
  cursor: default;
}
.tukutube-bonus-row {
  font-size: 10px;
  color: var(--accent-purple, #c9a7ff);
  margin: 3px 0 2px;
  padding: 2px 5px;
  background: rgba(139,111,197,0.12);
  border-radius: 3px;
  border-left: 2px solid var(--accent-purple, #8b6fc5);
}
.tukutube-bonus-row.active {
  color: var(--accent-cyan, #6bcfff);
  background: rgba(107,207,255,0.1);
  border-left-color: var(--accent-cyan, #6bcfff);
}
.tukutube-bonus-row.cooldown {
  color: #888;
  background: rgba(80,80,80,0.1);
  border-left-color: #555;
}
.tukutube-card-dimmed {
  opacity: 0.55;
}

/* 보너스 배너 */
.tukutube-bonus-banner {
  padding: 6px 12px;
  font-size: 10px;
  background: linear-gradient(
    90deg,
    rgba(156, 111, 255, 0.15),
    rgba(107, 207, 255, 0.1)
  );
  border-bottom: 1px solid rgba(156, 111, 255, 0.3);
  color: #c9a7ff;
  line-height: 1.4;
}
.tukutube-bonus-banner.activated {
  border-radius: 4px;
  margin: 4px 0 8px;
  border: 1px solid rgba(156, 111, 255, 0.4);
}
.tukutube-guide-banner {
  padding: 5px 12px;
  font-size: 9px;
  color: var(--tt-text-muted, #555);
  border-bottom: 1px solid var(--tt-border, #2a2a4a);
  background: transparent;
}

/* 영상 상세 액션 버튼 */
.tukutube-action-btn {
  background: var(--tt-bg-hover, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--tt-border, rgba(255, 255, 255, 0.1));
  color: var(--tt-text, #e0e0e0);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.tukutube-action-btn:hover {
  background: var(--tt-bg-active, rgba(255, 255, 255, 0.12));
}
.tukutube-action-btn.active {
  border-color: rgba(156, 111, 255, 0.6);
  color: #c9a7ff;
}

/* 댓글 섹션 */
.tukutube-comments-section {
  margin-top: 12px;
  border-top: 1px solid var(--tt-border, rgba(255, 255, 255, 0.1));
  padding-top: 10px;
}
.tukutube-comments-title {
  font-size: 11px;
  font-weight: bold;
  color: var(--tt-text, #e0e0e0);
  margin-bottom: 8px;
}
.tukutube-comment {
  padding: 6px 0;
  border-bottom: 1px solid var(--tt-border, rgba(255, 255, 255, 0.06));
}
.tukutube-comment:last-child {
  border-bottom: none;
}
.tukutube-comment-user {
  font-size: 10px;
  font-weight: bold;
  color: var(--tt-text-secondary, #aaa);
  display: block;
  margin-bottom: 2px;
}
.tukutube-comment-text {
  font-size: 10px;
  color: var(--tt-text, #e0e0e0);
  line-height: 1.45;
  margin-bottom: 3px;
}
.tukutube-comment-likes {
  font-size: 9px;
  color: var(--tt-text-muted, #666);
}

/* ══ TukuMail ══ */
.tukumail-body {
  display: flex;
  flex-direction: column;
  height: calc(100% - 22px);
  overflow: hidden;
  background: var(--win-body-bg);
}
.tukumail-addressbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--border-main);
  font-size: 10px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.tukumail-url {
  color: var(--text-secondary);
  font-size: 10px;
}
.tukumail-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.tukumail-sidebar {
  width: 110px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-main);
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  gap: 1px;
  overflow-y: auto;
}
.tukumail-folder-btn {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 4px 8px;
  font-size: 10px;
  color: var(--text-primary);
  border-radius: 2px;
  white-space: nowrap;
}
.tukumail-folder-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.tukumail-folder-btn.active {
  background: var(--accent-cyan);
  color: #000;
  font-weight: bold;
}
.tukumail-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tukumail-list {
  height: 45%;
  overflow-y: auto;
  border-bottom: 1px solid var(--border-main);
  flex-shrink: 0;
}
.tukumail-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  cursor: pointer;
  font-size: 10px;
  border-bottom: 1px solid var(--border-shadow);
  color: var(--text-secondary);
  transition: background 0.1s;
}
.tukumail-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.tukumail-row.selected {
  background: rgba(139, 233, 253, 0.12);
}
.tukumail-row.unread {
  color: var(--text-primary);
  font-weight: bold;
}
.tukumail-unread-dot {
  color: var(--accent-cyan);
  font-size: 8px;
  width: 8px;
  flex-shrink: 0;
}
.tukumail-star {
  cursor: pointer;
  flex-shrink: 0;
  font-size: 11px;
  user-select: none;
}
.tukumail-from {
  width: 70px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tukumail-subject {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tukumail-date {
  font-size: 9px;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-left: 4px;
}
.tukumail-body-pane {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  font-size: 11px;
}
.tukumail-body-header {
  border-bottom: 1px solid var(--border-main);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.tukumail-body-subject {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.tukumail-body-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-secondary);
}
.tukumail-body-text {
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: var(--text-primary);
  white-space: pre-wrap;
  line-height: 1.6;
}

/* ══════════════════════════════════════════
   인벤토리 리스트 레이아웃
   ══════════════════════════════════════════ */
.inv-list-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
}
.inv-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-shadow);
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.inv-list-item:hover {
  background: rgba(139, 233, 253, 0.05);
  border-color: var(--accent-cyan);
}
.inv-item-img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.inv-item-img .inv-img,
.inv-item-img .fish-icon-img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  object-fit: contain;
}
.inv-item-img .inv-icon {
  font-size: 24px;
}
.inv-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inv-item-title {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.inv-item-sizes {
  font-size: 11px;
  color: var(--accent-green);
}
.inv-item-base-value {
  font-size: 10px;
  color: var(--text-secondary);
}
.inv-item-value {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 100px;
}
.inv-item-count {
  font-size: 11px;
  color: var(--text-primary);
}
.inv-item-total {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-primary);
}
.inv-item-total .val {
  color: var(--accent-orange);
}
.btn-sell-one {
  margin-top: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: bold;
  background: rgba(255, 121, 63, 0.18);
  color: var(--accent-orange);
  border: 1px solid var(--accent-orange);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
  align-self: flex-end;
}
.btn-sell-one:hover {
  background: rgba(255, 121, 63, 0.38);
}

.tukumail-empty,
.tukumail-no-select {
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 11px;
}

/* ══════════════════════════════════════════
   Win98 Light Theme Overrides
   ══════════════════════════════════════════ */

/* 라이트 모드 기본: 단색 #008080 (Win98 틸) */
body.theme-98 {
  background: #008080;
  font-family:
    "MS Sans Serif", "MS UI Gothic", "Nanum Gothic Coding", sans-serif;
}
body.theme-98 .main-layout {
  background: #008080;
}
/* 배경 선택: 토리이 버튼으로 켜면 — 단색은 유지하고, JS로 DVD 로고처럼 움직이는 로고 div를 띄운다 */
body.theme-98.bg-wallpaper {
  background-color: #2a1a3a;
}
body.theme-98.bg-wallpaper .main-layout {
  background-color: transparent;
}

/* DVD 스타일 로고 (실제 움직임은 JS에서 position만 갱신) */
#tuku98DvdLogo {
  position: fixed;
  width: 236px;
  height: 104px;
  background: url("../img/tuku98logo2.png") no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}
/* 플로팅 창 뒤 “바탕” 영역 투명 (단색/배경화면 모두) */
body.theme-98 #gameArea,
body.theme-98 #gameArea .game-area-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Win-box: 돌출 베벨 */
body.theme-98 .win-box {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow:
    1px 1px 0 #dfdfdf inset,
    -1px -1px 0 #555 inset;
}

/* Win-title: 네이비 타이틀바 */
body.theme-98 .win-title {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #ffffff;
  border-bottom: 1px solid #000080;
}

/* Win-body 배경 */
body.theme-98 .win-body {
  background: #c0c0c0;
}

/* 버튼: 베벨 3D */
body.theme-98 .win-btn {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000000;
  transition: none;
}
body.theme-98 .win-btn:hover:not(:disabled) {
  background: #d0d0d0;
  border-color: #ffffff #808080 #808080 #ffffff;
}
body.theme-98 .win-btn:active:not(:disabled) {
  border-color: #808080 #ffffff #ffffff #808080;
}
body.theme-98 .win-btn.active {
  border-color: #808080 #ffffff #ffffff #808080;
  color: #000080;
  background: #c0c0c0;
}

/* 닫기 버튼 */
body.theme-98 .win-close-btn {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000000;
}
body.theme-98 .win-close-btn:hover {
  background: #c42b1c;
  color: #fff;
  border-color: #ffffff #808080 #808080 #ffffff;
}

/* 입력 필드: 눌린 베벨 */
body.theme-98 input[type="text"],
body.theme-98 input[type="number"],
body.theme-98 textarea,
body.theme-98 .cmd-input,
body.theme-98 .player-playlist-input {
  background: #ffffff;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  color: #000000;
}
body.theme-98 input[type="text"]:focus,
body.theme-98 input[type="number"]:focus,
body.theme-98 textarea:focus {
  outline: none;
  border-color: #000080 #c0c0c0 #c0c0c0 #000080;
}

/* 포모도로 분/목표 입력: 라이트 모드 가시성 */
body.theme-98 #pomodoroCustomInput,
body.theme-98 #pomodoroTargetInput {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #808080 !important;
}

/* 스크롤바 */
body.theme-98 ::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
body.theme-98 ::-webkit-scrollbar-track {
  background: #c0c0c0;
}
body.theme-98 ::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
}

/* 상점 */
body.theme-98 .shop-item {
  background: #d4d4d4;
  border: 1px solid #808080;
}
body.theme-98 .shop-stat-row {
  background: #d8d8d8;
  border: 1px solid #808080;
}

/* 탭 버튼 */
body.theme-98 .tab-btn {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000;
}
body.theme-98 .tab-btn.active {
  border-color: #808080 #ffffff #ffffff #808080;
  font-weight: bold;
  color: #000080;
  background: #c0c0c0;
}

/* 게임 영역 타이틀바 */
body.theme-98 .game-area-title {
  background: linear-gradient(90deg, #000080, #1084d0);
  border-bottom-color: #000080;
}

/* 진입 화면 */
body.theme-98 #enterScreen {
  background: radial-gradient(ellipse at 50% 40%, #000080 0%, #008080 70%);
}
body.theme-98 .pixel-btn {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000080;
}
body.theme-98 .pixel-btn:hover {
  background: #d0d0d0;
  box-shadow: none;
}

/* 우측 열 구분선 */
body.theme-98 .right-column {
  border-left: 2px solid #808080;
}
body.theme-98 .right-bottom-row {
  border-top-color: #808080;
}

/* winamp / 플레이어 */
body.theme-98 .winamp-btn {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000000;
}
body.theme-98 .winamp-btn:hover {
  background: #d0d0d0;
}

/* 인벤토리 헤더 */
body.theme-98 .inventory-panel-heading {
  color: #000080;
  border-bottom-color: #808080;
}
body.theme-98 .inv-rarity-header {
  color: #000080;
  border-bottom-color: #808080;
}

/* 물고기 카드 (라이트) */
body.theme-98 .fish-card {
  background: #d4d4d4;
  border-color: #808080;
}

/* 오버레이 backdrop */
body.theme-98 .inventory-overlay-backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
}

/* 현 스탯 */
body.theme-98 .current-stats-content .stat-value {
  color: #000080;
}

/* 테마 토글 버튼 */
body.theme-98 .theme-toggle {
  border-color: #808080;
  color: #000000;
  background: #c0c0c0;
}
body.theme-98 .theme-toggle:hover {
  border-color: #000080;
}

/* ══ Win98 스크롤바 ══ */
body.theme-98 ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
body.theme-98 ::-webkit-scrollbar-track {
  background: #c0c0c0;
  border: 1px inset #808080;
}
body.theme-98 ::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  min-height: 20px;
}
body.theme-98 ::-webkit-scrollbar-button {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  display: block;
  height: 16px;
  width: 16px;
}
body.theme-98 ::-webkit-scrollbar-corner {
  background: #c0c0c0;
}

/* ══ Win98 시작 메뉴 — 좌측 세로 사이드바 ══ */
body.theme-98 .start-menu {
  padding-left: 22px;
}
body.theme-98 .start-menu::before {
  content: "Tukuyomi 98";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  background: linear-gradient(180deg, #1084d0, #000080);
  color: rgba(255,255,255,0.55);
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 6px;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   Tukuyomi TK Theme (Windows XP / 竹 Bamboo)
   ══════════════════════════════════════════ */

/* TK 기본: XP 어두운 밤 + 대나무 청록 포인트 */
body.theme-tk {
  --accent-cyan:   #5bb8f5;
  --accent-green:  #4ec94e;
  --accent-orange: #ffb86c;
}

/* TK win-box: XP Luna 스타일 — 둥근 모서리 + 파란 테두리 */
body.theme-tk .win-box {
  border: 1px solid #1a50c0;
  border-radius: 6px 6px 4px 4px;
  box-shadow: 0 3px 18px rgba(0,0,80,0.5), 0 1px 4px rgba(0,0,0,0.4);
}

/* TK win-title: XP Luna 블루 그라데이션 + 둥근 상단 */
body.theme-tk .win-title {
  background: linear-gradient(180deg,
    #2d6fd4 0%,
    #4a8fe0 45%,
    #1a50c0 100%
  );
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  border-bottom: 1px solid #1040a0;
  border-radius: 5px 5px 0 0;
  padding: 4px 7px;
  font-family: "Tahoma", "MS UI Gothic", "Nanum Gothic Coding", sans-serif;
}

/* TK win-body: XP 배경 톤 (기존 다크 유지, 약간 파랗게) */
body.theme-tk .win-body {
  background: var(--win-body-bg);
}

/* TK win-close-btn: XP 빨간 × 버튼 */
body.theme-tk .win-close-btn {
  background: linear-gradient(180deg, #e87070 0%, #c02020 100%);
  border: 1px solid #901010;
  border-radius: 3px;
  color: #ffffff;
  font-weight: bold;
  font-size: 11px;
  padding: 0 5px;
  height: 17px;
  line-height: 17px;
  transition: filter 0.1s;
}
body.theme-tk .win-close-btn:hover {
  filter: brightness(1.2);
  background: linear-gradient(180deg, #ff9090 0%, #e03030 100%);
  border-color: #c01010;
  color: #ffffff;
}

/* TK 플로팅 창: 약간 더 또렷한 그림자 */
body.theme-tk .float-panel {
  box-shadow: 2px 2px 0 rgba(0,0,80,0.4), 0 4px 20px rgba(0,0,0,0.7);
}

/* TK 작업표시줄: 명시적으로 XP 스타일 */
body.theme-tk .taskbar {
  background: linear-gradient(180deg,
    #245edc 0%,
    #1a4abc 40%,
    #1040b8 60%,
    #245edc 100%
  );
  border-top: 2px solid #5e91f8;
}
body.theme-tk .taskbar-start-btn {
  background: linear-gradient(180deg,
    #5da934 0%,
    #3a8c22 40%,
    #2d7a18 60%,
    #5da934 100%
  );
  border: 1px solid #4a9e2a;
  border-radius: 12px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 3px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
body.theme-tk .taskbar-start-btn:hover {
  filter: brightness(1.15);
}
body.theme-tk .taskbar-tray {
  background: rgba(0,0,100,0.3);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
}
body.theme-tk .taskbar-date,
body.theme-tk .taskbar-clock {
  color: rgba(255,255,255,0.9);
}

/* TK 시작 메뉴: XP Luna 스타일 */
body.theme-tk .start-menu {
  background: linear-gradient(180deg, #1a4abc, #1040b8);
  border: 1px solid #5e91f8;
  border-bottom: none;
  box-shadow: 2px -2px 8px rgba(0,0,0,0.4);
  border-radius: 4px 4px 0 0;
}
body.theme-tk .start-menu-header {
  background: linear-gradient(90deg, #1040b8, #245edc);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px 3px 0 0;
}
body.theme-tk .start-menu-item {
  color: #fff;
}
body.theme-tk .start-menu-item:hover {
  background: rgba(255,255,255,0.18);
}

/* TK win-btn: XP 스타일 버튼 */
body.theme-tk .win-btn {
  border-radius: 3px;
  transition: background 0.1s, border-color 0.1s;
}

/* TK 탭 버튼 */
body.theme-tk .tab-btn.active {
  border-color: #5bb8f5;
  color: #5bb8f5;
}

/* TK 진입 화면: 배경 없음 → Star Trails 캔버스가 배경 역할 */

/* TK 도감/수족관 탭 active */
body.theme-tk .dex-zone-btn.active {
  color: #5bb8f5;
  border-bottom-color: #5bb8f5;
}
body.theme-tk .dex-rarity-btn.active {
  color: #5bb8f5;
  border-color: #5bb8f5;
}

/* ══════════════════════════════════════════
   Tukuamp — Winamp 2.x 스킨
   (테마 무관 — 자체 완결형 스킨)
   ══════════════════════════════════════════ */

/* 외곽 프레임: theme win-box 오버라이드 */
.tukuamp,
body.theme-98 .tukuamp,
body.theme-tk .tukuamp {
  width: 275px !important;
  min-width: 275px;
  max-width: 275px;
  background: #232323 !important;
  border: 2px solid !important;
  border-color: #686868 #111 #111 #686868 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #000, 0 0 18px rgba(0,0,0,0.85) !important;
  padding: 0 !important;
  overflow: visible;
}

/* ── 타이틀바 ── */
.ta-titlebar {
  height: 18px;
  background: linear-gradient(90deg,
    #1c3e7e 0%,
    #2a60c0 28%,
    #4898e8 50%,
    #2a60c0 72%,
    #1c3e7e 100%
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px 0 7px;
  cursor: grab;
  user-select: none;
}
.ta-logo {
  font-family: "Arial Black", "Impact", sans-serif;
  font-size: 9px;
  font-weight: 900;
  color: #c8e4ff;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(120,200,255,0.4);
}
.ta-winctrls { display: flex; gap: 2px; }
.ta-wbtn {
  width: 15px;
  height: 13px;
  font-size: 9px;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.ta-wbtn:hover { background: #d8d8d8; }
.ta-wbtn:active { border-color: #808080 #ffffff #ffffff #808080; }
.ta-wbtn-close:hover { background: #cc2222; color: #fff; }

/* ── ta-body (shade 시 hidden) ── */
.tukuamp.shaded .ta-body { display: none; }

/* ── 디스플레이 패널 ── */
.ta-display {
  display: flex;
  background: #000;
  height: 42px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #111;
}

/* 스펙트럼 비주얼라이저 (76px) */
.ta-viz {
  width: 76px;
  flex-shrink: 0;
  background: #000;
  border-right: 1px solid #0a200a;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 3px 4px 3px;
  gap: 2px;
  box-sizing: border-box;
}
.ta-bar {
  flex: 1;
  background: linear-gradient(
    to top,
    #00c800 0%,
    #68c800 42%,
    #c8c800 68%,
    #c86800 84%,
    #c80000 100%
  );
  border-radius: 1px 1px 0 0;
  height: 3px;
  min-height: 2px;
  max-height: 34px;
  transition: height 0.1s ease-out;
}
/* 재생 중 VU 애니메이션 */
@keyframes ta-bar-anim {
  0%   { height: 3px; }
  20%  { height: var(--h, 40%); }
  40%  { height: 6px; }
  62%  { height: calc(var(--h, 40%) * 0.6); }
  80%  { height: 4px; }
  100% { height: 3px; }
}
.tukuamp-playing .ta-bar {
  animation: ta-bar-anim 0.72s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* 트랙 정보 패널 */
.ta-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 7px 3px;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}
.ta-marquee-wrap {
  overflow: hidden;
  white-space: nowrap;
  height: 14px;
  position: relative;
}
.ta-marquee {
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 10px;
  color: #00e000;
  white-space: nowrap;
  display: inline-block;
  text-shadow: 0 0 6px rgba(0,192,0,0.5);
  position: absolute;
  left: 0;
  top: 1px;
  line-height: 1.2;
}
.ta-timebps {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.ta-time {
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 20px;
  color: #00e000;
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 0 0 10px rgba(0,200,0,0.6);
}
.ta-bps {
  font-family: "Courier New", monospace;
  font-size: 7px;
  color: #008000;
  line-height: 1.5;
  text-align: left;
}
.ta-bps-u { color: #005000; }
.ta-statrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ta-stereo {
  font-family: "Courier New", monospace;
  font-size: 7px;
  color: #005000;
  letter-spacing: 0.12em;
}
.ta-dot {
  font-size: 8px;
  color: #006600;
  text-shadow: 0 0 4px currentColor;
  transition: color 0.3s;
}

/* ── 컨트롤바 ── */
.ta-controls {
  background: #252525;
  display: flex;
  align-items: center;
  padding: 3px 5px;
  gap: 4px;
  height: 30px;
  border-top: 1px solid #383838;
  border-bottom: 1px solid #111;
  box-sizing: border-box;
}
.ta-clu { display: flex; gap: 2px; flex-shrink: 0; }
.ta-clu-btn {
  font-size: 8px;
  font-weight: bold;
  font-family: "Arial", "Tahoma", sans-serif;
  background: #3a3a3a;
  border: 1px solid;
  border-color: #585858 #1c1c1c #1c1c1c #585858;
  color: #909090;
  padding: 1px 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  height: 15px;
  line-height: 13px;
}
.ta-clu-btn:hover { color: #c8c8c8; background: #424242; }
.ta-clu-btn.active { color: #00e000; border-color: #1c1c1c #585858 #585858 #1c1c1c; background: #2c2c2c; }

.ta-transport { display: flex; gap: 2px; flex: 1; justify-content: center; }
.ta-tb {
  width: 27px;
  height: 22px;
  font-size: 11px;
  background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
  border: 1px solid;
  border-color: #626262 #1c1c1c #1c1c1c #626262;
  color: #d0d0d0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: filter 0.08s;
}
.ta-tb:hover { filter: brightness(1.4); }
.ta-tb:active { border-color: #1c1c1c #626262 #626262 #1c1c1c; background: linear-gradient(180deg, #2a2a2a 0%, #4a4a4a 100%); }
.ta-tb-play  { color: #40e040; }
.ta-tb-pause { color: #e8c040; }

.ta-toggles { display: flex; gap: 2px; flex-shrink: 0; }
.ta-tog {
  font-size: 13px;
  background: transparent;
  border: 1px solid transparent;
  color: #484848;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.1s;
}
.ta-tog:hover { color: #a0a0a0; }
.ta-tog.active { color: #00e000; text-shadow: 0 0 6px rgba(0,200,0,0.6); }

/* ── 슬라이더 ── */
.ta-sliders {
  background: #1e1e1e;
  padding: 5px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid #111;
}
.ta-sl-row { display: flex; align-items: center; gap: 6px; }
.ta-sl-lbl {
  font-family: "Courier New", monospace;
  font-size: 8px;
  color: #585858;
  width: 22px;
  flex-shrink: 0;
  letter-spacing: 0.08em;
}
.ta-sl {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, #0a3a0a, #0d500d);
  border: 1px solid #1a4a1a;
  outline: none;
  cursor: pointer;
}
.ta-sl::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  background: linear-gradient(135deg, #909090 0%, #404040 100%);
  border: 1px solid;
  border-color: #b0b0b0 #303030 #303030 #b0b0b0;
  border-radius: 0;
  cursor: pointer;
}
.ta-sl::-moz-range-thumb {
  width: 11px;
  height: 11px;
  background: linear-gradient(135deg, #909090 0%, #404040 100%);
  border: 1px solid;
  border-color: #b0b0b0 #303030 #303030 #b0b0b0;
  border-radius: 0;
  cursor: pointer;
}

/* ── 플레이리스트 패널 ── */
.ta-playlist {
  background: #080808;
  border-top: 1px solid #111;
  width: 100%;
  box-sizing: border-box;
}
.ta-pl-titlebar {
  font-family: "Courier New", monospace;
  font-size: 8px;
  color: #2a5a2a;
  letter-spacing: 0.18em;
  padding: 3px 8px 2px;
  border-bottom: 1px solid #181818;
  background: linear-gradient(90deg, #080f08, #000, #080f08);
}
.ta-pl-list {
  overflow-y: auto;
  max-height: 130px;
  min-height: 36px;
}
.ta-pl-list::-webkit-scrollbar { width: 4px; }
.ta-pl-list::-webkit-scrollbar-track { background: #040404; }
.ta-pl-list::-webkit-scrollbar-thumb { background: #1a4a1a; border-radius: 0; }
.ta-pl-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 10px;
  color: #50b050;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #0d0d0d;
  user-select: none;
}
.ta-pl-item:hover { background: #0a1e0a; color: #80e080; }
.ta-pl-item.active { color: #ffffff; background: #0a340a; }
.ta-pl-num { color: #226622; font-size: 9px; min-width: 18px; flex-shrink: 0; }
.ta-pl-footer {
  display: flex;
  gap: 3px;
  padding: 4px 6px;
  border-top: 1px solid #181818;
}
.ta-pl-input {
  flex: 1;
  font-size: 9px;
  font-family: "Courier New", monospace;
  background: #010c01;
  border: 1px solid;
  border-color: #181818 #404040 #404040 #181818;
  color: #00c000;
  padding: 1px 4px;
  outline: none;
}
.ta-pl-input::placeholder { color: #1e3e1e; }
.ta-pl-btn {
  font-size: 9px;
  background: #333;
  border: 1px solid;
  border-color: #555 #1a1a1a #1a1a1a #555;
  color: #aaa;
  padding: 1px 7px;
  cursor: pointer;
  font-family: "Courier New", monospace;
}
.ta-pl-btn:hover { color: #fff; background: #3c3c3c; }
.ta-pl-btn:active { border-color: #1a1a1a #555 #555 #1a1a1a; }

/* ══════════════════════════════════════════
   바탕화면 아이콘 (Desktop Icons)
   ══════════════════════════════════════════ */
.desktop-area {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  pointer-events: none;
}
.desktop-icon {
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 76px;
  padding: 5px 3px 4px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  user-select: none;
  font-family: inherit;
  gap: 3px;
  transition: background 0.08s, border-color 0.08s;
}
.desktop-icon:focus { outline: none; }
.di-icon {
  display: block;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}
.di-label {
  display: block;
  font-size: 11px;
  line-height: 1.25;
  word-break: break-word;
  max-width: 72px;
}

/* ── Win 98 스타일 아이콘 ── */
body.theme-98 .desktop-icon .di-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
body.theme-98 .desktop-icon .di-label {
  color: #ffffff;
  text-shadow: 1px 1px 0 #000000, -1px 0 0 #000000, 0 -1px 0 #000000;
  font-size: 11px;
  font-family: "MS Sans Serif", "Nanum Gothic Coding", "Arial", sans-serif;
}
body.theme-98 .desktop-icon:hover {
  background: rgba(0, 0, 128, 0.45);
  border: 1px dotted #ffffff;
}
body.theme-98 .desktop-icon:active {
  background: rgba(0, 0, 128, 0.65);
}

/* ── Win XP / TK 스타일 아이콘 ── */
body.theme-tk .desktop-icon .di-icon {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}
body.theme-tk .desktop-icon .di-label {
  color: #ffffff;
  text-shadow:
    1px 1px 2px #000000,
    -1px -1px 2px #000000,
    0 0 6px rgba(0, 80, 220, 0.6);
  font-size: 11px;
  font-family: "Tahoma", "MS UI Gothic", "Nanum Gothic Coding", sans-serif;
}
body.theme-tk .desktop-icon:hover {
  background: rgba(100, 170, 255, 0.35);
  border: 1px solid rgba(120, 190, 255, 0.7);
  border-radius: 3px;
}
body.theme-tk .desktop-icon:active {
  background: rgba(70, 120, 200, 0.55);
  border-radius: 3px;
}

/* UI Icons */
.ui-icon-tab {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.ui-icon-zone {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.ui-icon-sm {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 2px;
}

.shop-item-icon { transition: transform 0.2s ease; position: relative; z-index: 1; }
.shop-item-icon:hover { transform: scale(1.8); z-index: 100; }

/* ══════════════════════════════════════════
   윤회 상점 — 탭 공통
══════════════════════════════════════════ */
.prestige-tab-bar {
  display: flex; gap: 2px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border-shadow);
  padding-bottom: 6px;
}
.prestige-tab-btn {
  flex: 1; padding: 5px 4px; font-size: 10px; cursor: pointer;
  background: rgba(0,0,0,0.2); border: 1px solid var(--border-shadow);
  color: var(--text-secondary); border-radius: 3px; transition: all .15s;
}
.prestige-tab-btn.active {
  background: rgba(80,200,255,0.12); border-color: var(--accent-cyan);
  color: var(--accent-cyan); font-weight: bold;
}
.prestige-tab-btn:hover:not(.active) { background: rgba(255,255,255,0.06); }

/* 소모품 아이템 */
.pouch-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 4px;
  border: 1px solid var(--border-shadow);
  background: rgba(0,0,0,0.2); margin-bottom: 5px;
}
.pouch-item-info { flex: 1; }
.pouch-item-name { font-size: 11px; font-weight: bold; }
.pouch-item-desc { font-size: 9px; color: var(--text-secondary); margin-top: 1px; }
.pouch-item-cost { font-size: 10px; color: var(--accent-cyan); white-space: nowrap; }
.pouch-active-banner {
  padding: 4px 8px; font-size: 9px; border-radius: 3px; margin-bottom: 4px;
  background: rgba(80,200,255,0.08); border: 1px solid rgba(80,200,255,0.2);
  color: var(--accent-cyan);
}

/* 코스메틱 섹션 */
.cosmetic-section-title {
  font-size: 10px; font-weight: bold; color: var(--accent-cyan);
  margin: 10px 0 5px; padding-bottom: 3px;
  border-bottom: 1px solid var(--border-shadow);
}
.cosmetic-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 4px; margin-bottom: 4px;
  border: 1px solid var(--border-shadow); background: rgba(0,0,0,0.2);
  cursor: pointer; transition: all .15s;
}
.cosmetic-item:hover { background: rgba(255,255,255,0.05); }
.cosmetic-item.active {
  border-color: var(--accent-gold); background: rgba(255,215,0,0.07);
}
.cosmetic-item.locked { opacity: 0.5; cursor: default; }
.cosmetic-item-name { font-size: 11px; flex: 1; }
.cosmetic-item-badge {
  font-size: 9px; padding: 1px 5px; border-radius: 8px;
  background: rgba(0,0,0,0.3);
}
.cosmetic-item.active .cosmetic-item-badge { color: var(--accent-gold); }
/* 심화 업그레이드 */
.prestige-upgrade-item.deep {
  border-color: rgba(255,215,0,0.3);
  box-shadow: 0 0 6px rgba(255,215,0,0.1);
}

/* ══════════════════════════════════════════
   닉네임 이펙트
══════════════════════════════════════════ */
.ps-boat-nick--nick_glow_cyan {
  color: #7ec8e3 !important;
  text-shadow: 0 0 8px rgba(100,220,255,.7), 0 0 18px rgba(80,180,255,.35) !important;
}
.ps-boat-nick--nick_glow_gold {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255,215,0,.65), 0 0 20px rgba(255,180,0,.3) !important;
}
.ps-boat-nick--nick_glow_purple {
  color: #c9a7ff !important;
  text-shadow: 0 0 8px rgba(180,120,255,.65), 0 0 18px rgba(140,80,255,.3) !important;
  animation: nickPurplePulse 3s ease-in-out infinite;
}
@keyframes nickPurplePulse {
  0%,100% { text-shadow: 0 0 8px rgba(180,120,255,.65); }
  50%     { text-shadow: 0 0 14px rgba(200,150,255,.9), 0 0 28px rgba(160,100,255,.5); }
}
.ps-boat-nick--nick_rainbow {
  background: linear-gradient(90deg,#f55,#fa0,#ff0,#0f0,#0ff,#88f,#f5f,#f55);
  background-size: 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nickRainbow 3s linear infinite;
}
@keyframes nickRainbow { to { background-position: 200% center; } }
.ps-boat-nick--nick_sparkle {
  color: #fff !important;
  text-shadow: 0 0 6px rgba(255,255,255,.8), 0 0 14px rgba(200,230,255,.5) !important;
  animation: nickSparkle 2s ease-in-out infinite;
}
@keyframes nickSparkle {
  0%,100% { text-shadow: 0 0 6px rgba(255,255,255,.8); }
  50%     { text-shadow: 0 0 12px rgba(255,255,255,1), 0 0 24px rgba(200,240,255,.8), 0 0 36px rgba(180,220,255,.4); }
}
.ps-boat-nick--nick_aurora {
  background: linear-gradient(90deg,#00e5cc,#c9a7ff,#7ec8e3,#ffd700,#00e5cc);
  background-size: 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nickAurora 4s ease-in-out infinite;
}
@keyframes nickAurora { 0%,100%{background-position:0%} 50%{background-position:100%} }

/* 칭호 배지 */
.ps-boat-title {
  font-size: 9px; padding: 1px 5px; border-radius: 8px; margin-left: 3px;
  background: rgba(80,50,120,0.5); color: rgba(200,170,255,.9);
  border: 1px solid rgba(150,100,200,.35); white-space: nowrap;
}

/* ══════════════════════════════════════════
   레이아웃 테두리
══════════════════════════════════════════ */
[data-layout-border="border_gold"] .win-box {
  border-color: rgba(255,215,0,.45) !important;
  box-shadow: 0 0 10px rgba(255,215,0,.18), inset 0 0 3px rgba(255,215,0,.05) !important;
}
[data-layout-border="border_cyan"] .win-box {
  border-color: rgba(80,220,255,.5) !important;
  box-shadow: 0 0 12px rgba(80,220,255,.22), inset 0 0 3px rgba(60,200,255,.06) !important;
}
[data-layout-border="border_moon"] .win-box {
  border-color: rgba(210,230,255,.45) !important;
  box-shadow: 0 0 14px rgba(200,220,255,.18), inset 0 0 4px rgba(190,210,255,.06) !important;
}
[data-layout-border="border_ancient"] .win-box {
  border-color: rgba(180,140,60,.5) !important;
  box-shadow: 0 0 10px rgba(160,120,40,.25), inset 0 0 3px rgba(200,160,80,.05) !important;
}
[data-layout-border="border_rainbow"] .win-box {
  border-color: rgba(150,120,255,.5) !important;
  animation: borderRainbow 4s linear infinite;
}
@keyframes borderRainbow {
  0%   { border-color: rgba(255,100,100,.55); box-shadow: 0 0 10px rgba(255,80,80,.2); }
  16%  { border-color: rgba(255,180,50,.55);  box-shadow: 0 0 10px rgba(255,180,0,.2); }
  33%  { border-color: rgba(100,255,100,.55); box-shadow: 0 0 10px rgba(80,255,80,.2); }
  50%  { border-color: rgba(80,220,255,.55);  box-shadow: 0 0 10px rgba(60,200,255,.2); }
  66%  { border-color: rgba(120,120,255,.55); box-shadow: 0 0 10px rgba(100,100,255,.2); }
  83%  { border-color: rgba(200,100,255,.55); box-shadow: 0 0 10px rgba(180,80,255,.2); }
  100% { border-color: rgba(255,100,100,.55); box-shadow: 0 0 10px rgba(255,80,80,.2); }
}
[data-layout-border="border_void"] .win-box {
  border-color: rgba(140,80,255,.55) !important;
  box-shadow: 0 0 16px rgba(120,60,255,.3), 0 0 32px rgba(80,30,200,.12) !important;
  animation: borderVoid 6s ease-in-out infinite;
}
@keyframes borderVoid {
  0%,100% { box-shadow: 0 0 16px rgba(120,60,255,.3), 0 0 32px rgba(80,30,200,.12); }
  50%     { box-shadow: 0 0 24px rgba(160,100,255,.5), 0 0 48px rgba(100,50,220,.2); }
}

/* ══ 버프 HUD 투명도 상태 ══ */
#tukuBonusHud {
  transition: opacity 0.4s ease;
  opacity: 0.3;
  pointer-events: auto;
}
#tukuBonusHud:hover {
  opacity: 1;
}
/* 미니게임(캐스팅·릴링) 중: 거의 투명 + 호버도 반응 없음 */
#tukuBonusHud.hud-minigame {
  opacity: 0.06;
  pointer-events: none;
  transition: opacity 0.15s ease;
}