/* TCGCOMPETITIVE — shared visual finish. Loaded after page styles. */
:root {
  --color-bg-primary: #0d0d11;
  --color-bg-secondary: #17171e;
  --color-bg-card: #1b1b23;
  --color-bg-card-hover: #24242f;
  --color-bg-elevated: #23232e;
  --color-bg-sidebar: #111116;
  --color-gray-400: #adadc2;
  --color-gray-500: #9797b0;
  --color-gray-600: #8282a0;
  --border-color: rgba(196,196,211,.13);
  --border-radius: 12px;
  --border-radius-lg: 20px;
  --shadow-md: 0 16px 38px rgba(0,0,0,.23);
  --surface-edge: inset 0 1px 0 rgba(238,238,242,.07);
}
body {
  background: radial-gradient(ellipse at 0% 5%, rgba(200,47,73,.17), transparent 42rem),
    radial-gradient(ellipse at 100% 28%, rgba(179,139,20,.10), transparent 38rem), #0d0d11;
}
::selection { background: #e2576e; color: #fff; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid #f2d376; outline-offset: 4px;
}
.main-content { min-width: 0; }
.main-content::before { opacity: .42; background-size: 80px 80px; }
.page-content { padding: clamp(20px,2.5vw,40px); }
.sidebar {
  background: radial-gradient(ellipse at 0 0, #571f2945, transparent 400px), linear-gradient(180deg,#16161e,#0f0f15);
  border-right-color: #c7c7d518;
  box-shadow: 10px 0 50px #06060733;
}
.sidebar-logo { border-bottom-color: #cbcbd815; padding-top: 23px; padding-bottom: 23px; }
.sidebar-logo img { filter: drop-shadow(0 0 10px #e1bb492e); }
.sidebar-section-label { color: #8989a6; letter-spacing: .14em; font-size: .63rem; margin-top: 22px; }
.sidebar-item { margin-bottom: 5px; border: 1px solid transparent; border-radius: 12px; color: #b7b7c9; transition: background .2s,border-color .2s,color .2s; }
.sidebar-item.active {
  background: linear-gradient(100deg,#e1355238,#8484a316);
  border-color: #f37d9138; color: #fff;
  box-shadow: inset 3px 0 #f591a2, 0 4px 18px #08080b36;
}
.sidebar-item.active .sidebar-icon { color: #f8b4bf; }
.sidebar-footer { border-top-color: #cbcbd815; background: #0f0f1455; }
.sidebar-user { border: 1px solid #d5d5df13; background: #d5d5df05; border-radius: 14px; }
.app-header {
  background: linear-gradient(100deg,#14141bef,#1a1a23ea 55%,#1e1e28e8);
  border-bottom-color: #d4d4de1b; box-shadow: 0 8px 30px #0a0a0d24;
}
.header-greeting span { color: #f7a4b2; }
.header-stat-card { border-color: #cdcdd926; box-shadow: var(--surface-edge),0 5px 20px #09090c33; }
.header-stat-card-points { background: linear-gradient(125deg,#282834,#1f1f28); }
.header-stat-card-rank { background: linear-gradient(125deg,#262633,#20202b); }
.header-avatar-wrapper { background: #d3d3dd09; border-color: #d9d9e324; }
.card, .stat-widget,
.page-content :is(.class-card,.reward-card-premium,.team-panel,.community-chat-card) {
  background: linear-gradient(145deg,rgba(37,37,50,.95),rgba(23,23,30,.97));
  border-color: #c8c8d527;
  box-shadow: var(--surface-edge),0 12px 36px #06060833;
  backdrop-filter: none;
}
.card-header { border-bottom-color: #ccccd816; padding: 20px 24px; background: linear-gradient(90deg,#d2d2dd05,transparent); }
.card-title { letter-spacing: .01em; }
.card-title .icon { color: #f6a3b1; }
.card-action { color: #f8b3bf; font-size: .7rem; letter-spacing: .06em; }
.stat-widget { border-radius: 18px; }
.stat-widget-value { letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stat-widget-label { color: #b9b9ca; font-size: .7rem; letter-spacing: .06em; }
.stat-widget-icon { border: 1px solid #cdcdd920; box-shadow: inset 0 1px #ffffff0d; }
.banner,
.page-content :is(.academy-hero,.tournament-hero,.ranking-hero,.community-hero,.member-team-hero,.shop-vault) {
  background: radial-gradient(ellipse at 100% 0,#a081242e,transparent 55%),
    radial-gradient(ellipse at 0 100%,#de314e3b,transparent 65%),linear-gradient(125deg,#22222c,#191922);
  border: 1px solid #cbcbd830; box-shadow: var(--surface-edge),0 22px 60px #0606083b;
}
.banner { border-radius: 24px; }
.banner-overlay { background: linear-gradient(90deg,#19192277,transparent); }
.banner-pretitle { color: #eed68c; letter-spacing: .16em; font-size: .72rem; }
.banner-title { letter-spacing: -.025em; }
.banner-description { color: #c5c5d3; }
.banner-character-art { max-width: 30%; }
.banner-character-art img { width: 100%; }
.btn { min-height: 42px; border-radius: 12px; transition: transform .18s,box-shadow .18s,background .18s,border-color .18s; }
.btn-primary {
  background: linear-gradient(135deg,#ef506b,#d62845);
  border-color: #f7aab742;
  box-shadow: inset 0 1px #ffffff26,0 4px 16px #e7304f33;
}
.btn-gold { background: linear-gradient(135deg,#f0b832,#d9ab22); border-color: #f7e4aa55; color: #111116; box-shadow: inset 0 1px #ffffff55,0 4px 16px #d4a01716; }
.btn-outline { border-color: #cdcdda36; color: #e2e2e9; background: #cfcfdb05; }
.btn-outline-red { color: #f8b6c1; border-color: #f37c9066; }
.btn-sm { min-height: 34px; border-radius: 9px; }
.form-control { background: #14141b; color: #eeeef2; min-height: 46px; border-color: #bfbfce30; border-radius: 11px; transition: border-color .2s, box-shadow .2s; }
.form-control::placeholder { color: #8b8ba7; }
.form-control:focus { background: #1b1b23; border-color: #f48a9c; box-shadow: 0 0 0 4px #f273881c; }
.form-label { color: #d5d5df; font-size: .78rem; }
input[type="checkbox"],input[type="radio"] { accent-color: #f1667d; }
.table-wrapper { border-radius: 12px; scrollbar-color: #884c56 #1a1a22; }
.table th { background: #1a1a22; color: #acacc1; border-bottom-color: #d0d0dc20; padding-top: 16px; padding-bottom: 16px; font-size: .65rem; letter-spacing: .09em; }
.table td { border-bottom-color: #c5c5d40e; padding-top: 17px; padding-bottom: 17px; color: #dcdce4; }
.table tbody tr:nth-child(even) { background: #d3d3dd03; }
.badge-red { color: #f8b6c1; background: #f0627920; border-color: #f590a140; }
.modal { border: 1px solid #c8c8d53b; box-shadow: 0 32px 100px #0009; background: #1c1c24; }
.modal-header,.modal-footer { border-color: #cfcfda1c; }
.modal-overlay { backdrop-filter: blur(7px); }
/* Public pages: clearer rhythm and luminous, restrained surfaces. */
.public-shell { background: transparent; }
.public-nav { border-bottom: 1px solid #d8d8e212; }
.public-links { background: #191920c9; border-color: #d5d5e022; box-shadow: inset 0 1px #ffffff08; }
.public-links a { color: #c8c8d6; }
.public-kicker { color: #f0d78d; background: #e1bb490b; border-color: #edc85a33; letter-spacing: .1em; }
.public-title { text-shadow: 0 10px 60px #0003; }
.public-title .accent { color: #f594a4; }
.public-copy { color: #babacb; line-height: 1.85; }
.public-section { padding-top: 48px; padding-bottom: 48px; scroll-margin-top: 24px; }
.section-head h2 { letter-spacing: -.025em; }
.section-head p { color: #b3b3c5; line-height: 1.8; }
.public-metric,.path-step,.feature-item,.public-plan {
  border-color: #d0d0dc26; background: linear-gradient(145deg,#272733c7,#1a1a23e8);
  box-shadow: var(--surface-edge),0 12px 36px #06060829;
}
.public-plan { border-radius: 24px; }
.public-plan.featured { border-color: #f6a3b17a; box-shadow: var(--surface-edge),0 0 40px #f0627916; }
.feature-stage { border: 1px solid #c5c5d325; background: radial-gradient(ellipse at top right,#bc9c3c26,transparent 70%),linear-gradient(140deg,#39394b,#1f1f28); }
.path-icon,.feature-icon { border: 1px solid #cbcbd82b; box-shadow: inset 0 1px #ffffff0e; }
.deck-panel { border-color: #d2d2dd3d; box-shadow: var(--surface-edge),0 24px 60px #09090d55; }
.final-strip { border-color: #d5d5df2a; background: radial-gradient(ellipse at 90% 0,#af944128,transparent 55%),linear-gradient(115deg,#481d24,#1d1d26); }
.public-footer { border-top-color: #d4d4de20; color: #a4a4ba; }
.auth-right { background: linear-gradient(145deg,#282836c7,#14141ae8); border-left-color: #d9d9e324; }
.auth-form-title { letter-spacing: -.03em; }
.auth-feature-icon { background: #f69fad14; border: 1px solid #f69ead33; }
.auth-left-logo { filter: drop-shadow(0 12px 32px #ecca6525); }
@media (hover:hover) and (pointer:fine) {
  .sidebar-item:hover { color: #fff; border-color: #ccccd922; background: #cacad70b; }
  .card:hover,.stat-widget:hover,.public-plan:hover,.path-step:hover,.feature-item:hover,
  .page-content :is(.class-card,.reward-card-premium):hover { border-color: #c8c8d64d; box-shadow: var(--surface-edge),0 16px 42px #09090d55,0 0 24px #ef556f09; }
  .btn-primary:hover { background: linear-gradient(135deg,#f27086,#ec3654); box-shadow: inset 0 1px #ffffff30,0 7px 26px #f0627940; }
  .table tr:hover td { background: #c1c1d008; }
}
@media (min-width:1025px) {
  .public-hero { padding-top: 40px; padding-bottom: 60px; }
}
@media (max-width:1024px) {
  .banner-character-art { opacity: .28 !important; }
  .banner-content { position: relative; z-index: 3; }
}
@media (max-width:768px) {
  .page-content { padding: 18px 14px 28px; }
  .card-header,.card-body { padding: 18px; }
  .banner { border-radius: 20px; }
  .banner-character-art { display: none !important; }
  .table th:nth-child(n+4),.table td:nth-child(n+4) { display: table-cell; }
  .table { min-width: 560px; }
  .table-wrapper { max-width: 100%; }
  .public-section { padding-top: 32px; padding-bottom: 32px; }
  .public-nav-actions .btn { min-height: 46px; }
  .auth-right { border-left: 0; }
  .modal-overlay { backdrop-filter: none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  body { background: white; color: black; }
  .card,.stat-widget { box-shadow: none; }
}
/* Keep the fixed navigation usable on smaller laptop and tablet widths. */
.header-left { min-width: 0; }
.header-left > div { min-width: 0; }
.header-greeting { overflow: hidden; text-overflow: ellipsis; }
@media (max-width:1280px) {
  .header-stats { display: none; }
  .banner-character-art { display: none !important; }
}
@media (min-width:1281px) {
  .banner-content { max-width: 72%; }
}
@media (max-width:768px) {
  .admin-header .header-left > div > div:first-child { font-size: .95rem !important; }
  .admin-header .header-left > div > div:nth-child(2) { display: none; }
  .admin-header { gap: 8px; padding: 0 14px; }
  .admin-header .header-right { gap: 5px; }
}
/* Fit the complete opening composition to laptop height, without clipping content. */
@media (min-width:981px) {
  .public-nav { padding-block: 8px; min-height: 98px; }
  .public-brand img { width: 140px; height: 80px; }
  .public-hero {
    min-height: calc(100svh - 98px);
    padding-block: 20px;
    gap: 28px;
  }
  .public-title { font-size: clamp(44px,min(6.5vw,8.5svh),90px); margin-top: 12px; }
  .public-copy { margin-top: 12px; font-size: .94rem; line-height: 1.65; }
  .public-actions { margin-top: 16px; gap: 10px; }
  .public-actions .btn { padding: 12px 22px; min-height: 48px; font-size: .9rem; }
  .public-metrics { margin-top: 16px; }
  .public-metric { min-height: 0; padding: 12px; }
  .public-metric strong { font-size: 1.5rem; }
  .public-metric span { margin-top: 6px; font-size: .74rem; }
  .command-deck { min-height: clamp(360px,calc(100svh - 210px),500px); }
  .deck-logo { top: 30%; }
}
@media (min-width:981px) and (max-height:850px) {
  .whatsapp-float { grid-template-columns: 46px; min-width: 0; min-height: 0; padding: 7px; right: 16px; bottom: 16px; }
  .whatsapp-copy { display: none; }
}
/* Readable legal documents and contextual communication notices. */
.legal-card section,.policy-item { scroll-margin-top: 24px; }
.legal-card p + p,.policy-item p + p { margin-top: 12px; }
.legal-card a:not(.btn),.policy-item a { color: #f8b4bf; text-decoration: underline; text-underline-offset: 3px; }
.legal-toc { max-height: calc(100svh - 36px); overflow-y: auto; }
.legal-identity { margin: 16px 0; padding: 16px; border: 1px solid var(--border-color); border-radius: 12px; }
.legal-identity > div { margin-bottom: 10px; }
.legal-identity > div:last-child { margin-bottom: 0; }
.legal-identity dt { color: #e9d28d; font-size: .75rem; }
.legal-identity dd { color: #dfdfe6; overflow-wrap: anywhere; font-size: .92rem; }
.policy-card .policy-item { display: block; }
.policy-item ul { list-style: disc; padding-left: 20px; color: var(--color-gray-400); font-size: .92rem; line-height: 1.75; }
.policy-item li + li { margin-top: 10px; }
.policy-item ul + p { margin-top: 12px; }
.policy-toc { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 24px; }
.policy-toc a { color: #c4c4d2; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: .8rem; }
.policy-toc a:hover { border-color: #f4889a88; color: white; }
.chat-legal-notice { padding: 12px 16px; margin: 0 0 18px; border: 1px solid #d5c28a2a; border-radius: 12px; color: #b8b8ca; background: #21212b; font-size: .78rem; line-height: 1.7; }
.chat-legal-notice a { color: #f8afbb; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.chat-legal-notice span { display: block; }
@media(max-width:760px) {
 .legal-toc { max-height: none; }
 .policy-toc { grid-template-columns: 1fr; }
 .legal-brand,.policy-brand { min-width: 0; gap: 8px; }
 .legal-brand strong,.policy-brand strong { font-size: .85rem; overflow-wrap: anywhere; }
 .legal-nav .btn,.policy-nav .btn { padding-inline: 10px; flex-shrink: 0; }
}

/* Original Ichiraku brand colors. */
:root {
 --color-bg-primary:#0a0a0f; --color-bg-secondary:#111118;
 --color-bg-card:#16161f; --color-bg-card-hover:#1e1e2a;
 --color-bg-elevated:#1a1a25; --color-bg-sidebar:#0d0d15;
 --color-red:#c41230; --color-red-dark:#9e0f27; --color-red-light:#e01535;
 --color-gold:#d4a017; --color-gold-dark:#b8890f; --color-gold-light:#f0b832;
}
.btn-primary { background:linear-gradient(135deg,#c41230,#9e0f27); border-color:#c41230; }
.btn-gold { background:linear-gradient(135deg,#d4a017,#b8890f); }
@media(hover:hover) { .btn-primary:hover { background:linear-gradient(135deg,#e01535,#c41230); } }