/* style-theme_public.css - Environment themes + modal readability overrides */

html, body { background: var(--page-bg, #0b0c10); }
#bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
#bg::before, #bg::after { content: ""; position: absolute; }
#game-stage { position: relative; isolation: isolate; z-index: 1; background: transparent; }

/* ==========================================================================
   BUTTON & UI OVERRIDES
   ========================================================================== */
#game-stage button.ui-btn { background: var(--ui-pri); color: var(--ui-pri-fg); border: 1px solid var(--ui-pri); }
#game-stage button.ui-btn.secondary, #game-stage button.ui-btn.small-btn { background: var(--ui-sec-bg); color: var(--ui-sec-fg); border: 1px solid var(--ui-border); }
#game-stage button.ui-btn.danger { background: var(--ui-danger); color: #fff; border: 1px solid var(--ui-danger); }
#game-stage button.ui-btn:hover { filter: brightness(1.1); }
#game-stage button.ui-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#game-stage .tab-btn { color: var(--m-sub); background: transparent; border: 1px solid transparent; }
#game-stage .tab-btn.active { background: var(--ui-pri); color: var(--ui-pri-fg); border-color: var(--ui-pri); }
#game-stage .tab-btn:hover:not(.active) { color: var(--m-fg); background: var(--ui-sec-bg); }

#game-stage .pag-btn { background: var(--ui-sec-bg); color: var(--ui-sec-fg); border: 1px solid var(--ui-border); }
#game-stage .pag-btn:hover:not(:disabled) { filter: brightness(1.1); }

#game-stage .auth-input { background: var(--ui-sec-bg); color: var(--ui-sec-fg); border: 1px solid var(--ui-border); }
#game-stage .auth-box, #game-stage .room-list-box, #game-stage .room-info { background: var(--ui-sec-bg); border: 1px solid var(--ui-border); color: var(--ui-fg); }
#game-stage .room-item { background: rgba(0,0,0,0.1); border: 1px solid var(--ui-border); }

/* ==========================================================================
   CLASSIC
   ========================================================================== */
#game-stage[data-theme="classic"] {
  --page-bg: #0b0c10;
  --ui-fg: #eceef2; --ui-bg: #1f2126; --ui-border: rgba(255,255,255,0.1);
  --ui-pri: #4c8dff; --ui-pri-fg: #fff;
  --ui-sec-bg: #2a2d33; --ui-sec-fg: #fff;
  --ui-danger: #da373c;
  --ui-pos: #8ef98e; --ui-neg: #ff8e8e;
  --panel-hilite: #ffce00;
}
body:has(#game-stage[data-theme="classic"]) #bg { background: radial-gradient(ellipse at 50% 30%, #23262d, #14161a 70%, #0b0c10); }
#game-stage[data-theme="classic"] .game-table { background: repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.012) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, #2f8a5a, #1d6a43 60%, #0f4a2c); border-color: #4a2f1c; }
#game-stage[data-theme="classic"] .modal-content {
  --m-bg: #1f2126; --m-fg: #eceef2; --m-sub: #9aa0ad; --m-line: rgba(255,255,255,0.08); --m-ac: #4c8dff;
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
#game-stage[data-theme="classic"] .modal-title { font-family: system-ui, -apple-system, sans-serif; font-weight: 650; font-size: 20px; letter-spacing: 0; }

/* ==========================================================================
   SUBTLE
   ========================================================================== */
#game-stage[data-theme="subtle"] {
  --page-bg: #161b26;
  --ui-fg: #2a2622; --ui-bg: #f4efe3; --ui-border: #b9a67f;
  --ui-pri: #2a2622; --ui-pri-fg: #fff;
  --ui-sec-bg: #e8dfcf; --ui-sec-fg: #2a2622;
  --ui-danger: #c8372d;
  --ui-pos: #2e7d32; --ui-neg: #b71c1c;
  --panel-hilite: #8a2c1f;
}
body:has(#game-stage[data-theme="subtle"]) #bg { background: radial-gradient(ellipse at 50% 0, #2a3342, #161b26 70%); }
body:has(#game-stage[data-theme="subtle"]) #bg::before { inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 30px, transparent 30px 90px); }
body:has(#game-stage[data-theme="subtle"]) #bg::after { inset: 0; background: linear-gradient(transparent 50%, rgba(180,195,215,.1)); }
#game-stage[data-theme="subtle"] .game-table { background: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.02) 21% 34%, transparent 35%) 0 0/56px 72px, radial-gradient(circle at 0 50%, transparent 20%, rgba(255,255,255,.02) 21% 34%, transparent 35%) 0 -36px/56px 72px, radial-gradient(ellipse at 50% 45%, #2e323b, #1f2228 65%, #15171c); border-color: rgba(201,164,92,.5); }
#game-stage[data-theme="subtle"] .modal-content {
  --m-bg: #f4efe3; --m-fg: #2a2622; --m-sub: #6a6258; --m-line: #d8cfbc; --m-ac: #8a2c1f;
  border-radius: 4px; border: 1px solid #d8cfbc; box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
#game-stage[data-theme="subtle"] .modal-title { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 22px; letter-spacing: 0.02em; }

/* ==========================================================================
   SHINOBI
   ========================================================================== */
#game-stage[data-theme="shinobi"] {
  --page-bg: #0b0c10;
  --ui-fg: #2a1f18; --ui-bg: #efe6d2; --ui-border: #b9a67f;
  --ui-pri: #c8372d; --ui-pri-fg: #fff;
  --ui-sec-bg: #e2d7c0; --ui-sec-fg: #2a1f18;
  --ui-danger: #c8372d;
  --ui-pos: #2e7d32; --ui-neg: #b71c1c;
  --panel-hilite: #c8372d;
}
body:has(#game-stage[data-theme="shinobi"]) #bg { background: radial-gradient(ellipse at 50% 0, #1d2335, #12141b 60%, #0b0c10); }
body:has(#game-stage[data-theme="shinobi"]) #bg::before { right: 9%; top: 6%; width: 150px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #c8372d, #8f2822); opacity: .26; }
body:has(#game-stage[data-theme="shinobi"]) #bg::after { left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(#262d44, #12141a); opacity: .5; clip-path: polygon(0 70%, 12% 45%, 22% 62%, 38% 28%, 52% 58%, 66% 40%, 80% 62%, 92% 44%, 100% 60%, 100% 100%, 0 100%); }
#game-stage[data-theme="shinobi"] .game-table { background: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.045) 21% 34%, transparent 35%) 0 0/56px 72px, radial-gradient(circle at 0 50%, transparent 20%, rgba(255,255,255,.045) 21% 34%, transparent 35%) 0 -36px/56px 72px, radial-gradient(ellipse at 50% 45%, #2d3d68, #1a2342 60%, #0e1226); border-color: #c9a45c; }
#game-stage[data-theme="shinobi"] .modal-content {
  --m-bg: #efe6d2; --m-fg: #2a1f18; --m-sub: #5a4a3a; --m-line: #b9a67f; --m-ac: #c8372d;
  border-radius: 6px; border: 1px solid rgba(160,60,45,0.3); box-shadow: 0 26px 60px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(120,90,50,0.28);
}
#game-stage[data-theme="shinobi"] .modal-title { font-family: Georgia, "Times New Roman", serif; font-weight: 600; font-size: 22px; letter-spacing: 0.03em; }

/* ==========================================================================
   LOBBY PANELS - highlight text must be readable on light panel backgrounds
   ========================================================================== */

#game-stage .auth-box .auth-title,
#game-stage .room-list-box .highlight-text,
#game-stage .room-info .highlight-text,
#game-stage .room-info .clickable-name {
  color: var(--panel-hilite);
}

/* ==========================================================================
   MODAL CONTENT - theme-aware text and backgrounds
   ========================================================================== */

.modal-content { color: var(--m-fg); }

.modal-content .shop-item-name,
.modal-content .history-date,
.modal-content .lb-row,
.modal-content .title-action-heading,
.modal-content .swish-history-card-row,
.modal-content .profile-section .stat-row,
.modal-content .stat-row,
.modal-content .settings-row label,
.modal-content .swish-form-label,
.modal-content .shop-balance,
.modal-content .history-filter,
.modal-content .swish-input,
.modal-content .swish-receiver-input {
  color: var(--m-fg);
}

.modal-content .shop-item-status,
.modal-content .profile-section-title,
.modal-content .swish-history-date,
.modal-content .title-action-sub,
.modal-content .lb-rank,
.modal-content .pagination-row .pag-info,
.modal-content .profile-record-label {
  color: var(--m-sub);
}

.modal-content .highlight-text { color: var(--m-ac); }
.modal-content .profile-title-badge { color: var(--m-ac); border-color: var(--m-ac); }

.modal-content .tab-row { border-bottom-color: var(--m-line); }
.modal-content .tab-btn { color: var(--m-sub); }
.modal-content .tab-btn.active { color: var(--ui-pri-fg); }

.modal-content .shop-item,
.modal-content .history-card,
.modal-content .profile-section,
.modal-content .swish-form-card,
.modal-content .swish-history-card,
.modal-content .title-action-card,
.modal-content .lb-row-me {
  background: rgba(128, 128, 128, 0.08);
  border-color: var(--m-line);
}
.modal-content .shop-item.equipped { border-color: var(--m-ac); background: rgba(128, 128, 128, 0.12); }
.modal-content .shop-item.equipped .shop-item-status { color: var(--m-ac); }
.modal-content .shop-item.owned { border-color: var(--m-line); }

.modal-content .stat-row,
.modal-content .profile-section .stat-row,
.modal-content .lb-row,
.modal-content .profile-section-title,
.modal-content .history-filter,
.modal-content .swish-input,
.modal-content .swish-receiver-input {
  border-color: var(--m-line);
}

.modal-content .history-winner-pill { color: var(--m-ac); border: 1px solid var(--m-ac); background: rgba(128, 128, 128, 0.1); }
.modal-content .lb-you { color: var(--m-ac); border-color: var(--m-ac); }
.modal-content .clickable-name { color: var(--m-ac); }
.modal-content .lb-row-me { border-left-color: var(--m-ac); }

.modal-content .pag-btn { color: var(--ui-sec-fg); }
.modal-content .pag-btn:hover:not(:disabled) { border-color: var(--m-ac); }

.modal-content .swish-history-amount { color: var(--m-ac); }