/* One Piece Theme - Adventure on the Grand Line */
/* Design: Adventure scale, world-building, lore-first UI */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Merriweather:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

html[data-color="onepiece"]{ --brand-h:8; }

/* Core Palette */
html[data-theme="dark"][data-color="onepiece"]{
  --bg: #0B1D2A;                    /* Grand Line Navy */
  --card: #122F46;                  /* Deep Ocean Blue */
  --text: #FDFBF6;                  /* Weathered White */
  --muted: #F4C430;                 /* Treasure Gold */
  --line: #6B4E2E;                  /* Rope Brown */
  --surface-2: #0F2639;
  --surface-3: #163552;
  --straw-hat-red: #C62828;
  --treasure-gold: #F4C430;
  --parchment: #F5E9D0;
  --rope-brown: #6B4E2E;
}

html[data-theme="light"][data-color="onepiece"]{
  --bg: #F5E9D0;                    /* Parchment Light */
  --card: #FDFBF6;                  /* Weathered White */
  --text: #0B1D2A;                  /* Grand Line Navy */
  --muted: #C62828;                 /* Straw Hat Red */
  --line: #6B4E2E;                  /* Rope Brown */
  --surface-2: #EDE1CC;
  --surface-3: #E5D9C4;
  --straw-hat-red: #C62828;
  --treasure-gold: #F4C430;
  --parchment: #F5E9D0;
  --rope-brown: #6B4E2E;
}

/* Typography overrides for One Piece feel */
html[data-color="onepiece"] .clock,
html[data-color="onepiece"] #clockOut{
  font-family: 'Cinzel', serif !important;
  font-weight: 700;
  letter-spacing: 0.06em;
}

html[data-color="onepiece"] .countdown,
html[data-color="onepiece"] #elapsedOut,
html[data-color="onepiece"] #leftOut,
html[data-color="onepiece"] #nextInOut{
  font-family: 'JetBrains Mono', monospace !important;
}

html[data-color="onepiece"] .label,
html[data-color="onepiece"] .muted{
  font-family: 'Merriweather', serif;
}

/* Background - Grand Line Navy with layered gradient */
html[data-color="onepiece"] body{
  background: 
    linear-gradient(180deg, #0B1D2A 0%, #102A44 50%, #0B1D2A 100%),
    url('../backrounds/onepiece-backround-1.avif') center/cover no-repeat fixed;
  background-blend-mode: overlay;
}

html[data-theme="light"][data-color="onepiece"] body{
  background: 
    linear-gradient(180deg, rgba(245, 233, 208, 0.92) 0%, rgba(237, 225, 204, 0.95) 100%),
    url('../backrounds/onepiece-backround-1.avif') center/cover no-repeat fixed;
  background-blend-mode: overlay;
}

/* Container - old-world feel with visible borders */
html[data-color="onepiece"] .container{
  border: 2px solid #6B4E2E;
  border-radius: 8px;
  background: var(--card);
  box-shadow: 
    0 0 0 1px rgba(244, 196, 48, 0.1),
    0 20px 60px rgba(0, 0, 0, 0.4);
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Cards - Crew/Arcs style */
html[data-color="onepiece"] .card{
  border: 2px solid #6B4E2E;
  border-radius: 8px;
  background: #122F46;
  transition: all 180ms ease;
}

html[data-color="onepiece"] .card:hover{
  border-color: #F4C430;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

html[data-theme="light"][data-color="onepiece"] .card{
  background: #FDFBF6;
}

/* Themed cards - treasure chest style */
html[data-color="onepiece"] .themed-card::before{
  background: linear-gradient(135deg, rgba(198, 40, 40, 0.95), rgba(139, 30, 30, 0.9));
}

html[data-color="onepiece"] .themed-card{
  color: #FDFBF6;
  border: 2px solid #F4C430;
  border-radius: 8px;
  box-shadow: 
    0 0 20px rgba(244, 196, 48, 0.15),
    0 15px 40px rgba(0, 0, 0, 0.3);
}

html[data-color="onepiece"] .themed-card .label,
html[data-color="onepiece"] .themed-card .muted,
html[data-color="onepiece"] .themed-card #currentName,
html[data-color="onepiece"] .themed-card #currentRoom,
html[data-color="onepiece"] .themed-card #currentTimeRange,
html[data-color="onepiece"] .themed-card #elapsedOut,
html[data-color="onepiece"] .themed-card #leftOut,
html[data-color="onepiece"] .themed-card #nextName,
html[data-color="onepiece"] .themed-card #nextRoom,
html[data-color="onepiece"] .themed-card #nextTimeRange,
html[data-color="onepiece"] .themed-card #nextInOut,
html[data-color="onepiece"] .themed-card #untilOut{
  color: #F5E9D0 !important;
}

/* Dark mode clock styling */
html[data-theme="dark"][data-color="onepiece"] #clockOut{
  color: #F4C430;
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(244, 196, 48, 0.3);
}

html[data-theme="dark"][data-color="onepiece"] .label,
html[data-theme="dark"][data-color="onepiece"] .muted,
html[data-theme="dark"][data-color="onepiece"] #dateOut,
html[data-theme="dark"][data-color="onepiece"] #schoolState{
  color: #F4C430;
}

/* Light mode clock styling */
html[data-theme="light"][data-color="onepiece"] #clockOut{
  color: #C62828;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"][data-color="onepiece"] .label,
html[data-theme="light"][data-color="onepiece"] .muted,
html[data-theme="light"][data-color="onepiece"] #dateOut,
html[data-theme="light"][data-color="onepiece"] #schoolState{
  color: #C62828;
}

/* Pills - bounty poster style */
html[data-color="onepiece"] .pill{
  border: 2px solid #6B4E2E;
  background: rgba(18, 47, 70, 0.8);
  color: #F4C430;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

html[data-theme="light"][data-color="onepiece"] .pill{
  background: rgba(11, 29, 42, 0.1);
  color: #C62828;
  border-color: #C62828;
}

/* Progress bar - Straw Hat Red to Treasure Gold */
html[data-color="onepiece"] .progress{
  background: linear-gradient(90deg, #C62828, #A91F1F, #F4C430);
  box-shadow: 0 0 15px rgba(198, 40, 40, 0.4);
}

html[data-color="onepiece"] .progress-wrap{
  background: rgba(107, 78, 46, 0.3);
  border: 2px solid #6B4E2E;
  border-radius: 4px;
}

/* Buttons - Primary Action style */
html[data-color="onepiece"] .btn{
  background: #C62828;
  color: #FDFBF6;
  border: 2px solid #F4C430;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 150ms ease;
}

html[data-color="onepiece"] .btn:hover{
  background: #A91F1F;
  box-shadow: 0 0 20px rgba(198, 40, 40, 0.4);
  transform: translateY(-2px);
}

/* Secondary buttons */
html[data-color="onepiece"] .icon-btn{
  border: 2px solid transparent;
  transition: all 150ms ease;
}

html[data-color="onepiece"] .icon-btn:hover{
  background: rgba(244, 196, 48, 0.12);
  border-color: #6B4E2E;
  transform: translateY(-2px);
}

/* Status badges - bounty style */
html[data-color="onepiece"] .status--current{
  background: linear-gradient(135deg, #C62828, #A91F1F);
  color: #FDFBF6;
  border: 2px solid #F4C430;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 0 15px rgba(244, 196, 48, 0.2);
}

html[data-color="onepiece"] .status--next{
  background: linear-gradient(135deg, #122F46, #0B1D2A);
  color: #F4C430;
  border: 2px solid #6B4E2E;
  font-family: 'Cinzel', serif;
  font-weight: 700;
}

html[data-color="onepiece"] .status--done{
  background: rgba(107, 78, 46, 0.3);
  color: #6B4E2E;
  text-decoration: line-through;
}

/* Chips - treasure map feel */
html[data-color="onepiece"] .chip{
  border: 2px solid #6B4E2E;
  font-family: 'Merriweather', serif;
  transition: all 150ms ease;
}

html[data-color="onepiece"] .chip[aria-pressed="true"]{
  background: rgba(244, 196, 48, 0.15);
  border-color: #F4C430;
  color: #F4C430;
}

html[data-color="onepiece"] .chip:hover{
  border-color: #F4C430;
  transform: translateY(-2px);
}

/* Schedule table - log pose style */
html[data-color="onepiece"] .schedule{
  font-family: 'Merriweather', serif;
}

html[data-color="onepiece"] .schedule th{
  border-bottom: 2px solid #F4C430;
  color: #F4C430;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-color="onepiece"] .schedule tr.active{
  background: linear-gradient(90deg, rgba(198, 40, 40, 0.15), rgba(244, 196, 48, 0.05), transparent);
  border-left: 3px solid #C62828;
}

html[data-color="onepiece"] .schedule td{
  border-bottom: 1px solid rgba(107, 78, 46, 0.3);
}

/* Dialogs/Modals - wanted poster frame */
html[data-color="onepiece"] dialog{
  border: 2px solid #6B4E2E;
  border-radius: 8px;
  background: var(--card);
  box-shadow: 
    0 0 0 4px #0B1D2A,
    0 0 0 6px #F4C430,
    0 25px 80px rgba(0, 0, 0, 0.5);
}

html[data-color="onepiece"] dialog::backdrop{
  background: rgba(11, 29, 42, 0.9);
}

html[data-color="onepiece"] .modal-header{
  border-bottom: 2px solid #6B4E2E;
}

html[data-color="onepiece"] .modal-header strong{
  font-family: 'Cinzel', serif;
  color: #F4C430;
  letter-spacing: 0.04em;
}

/* Onboarding - adventure beginning */
html[data-color="onepiece"] .onboard-title{
  font-family: 'Cinzel', serif !important;
  color: #F4C430 !important;
  letter-spacing: 0.06em;
}

html[data-color="onepiece"] .onboard-card{
  border: 2px solid #6B4E2E;
  box-shadow: 
    0 0 0 2px #F4C430,
    0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Scrollbar - rope brown */
html[data-color="onepiece"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #6B4E2E, #4A3520);
  border: 1px solid #F4C430;
  border-radius: 4px;
}

html[data-color="onepiece"] ::-webkit-scrollbar-track{
  background: rgba(11, 29, 42, 0.5);
}

/* Section alternating pattern */
html[data-color="onepiece"] section:nth-child(odd){
  background: rgba(11, 29, 42, 0.3);
}

html[data-color="onepiece"] section:nth-child(even){
  background: rgba(18, 47, 70, 0.3);
}

/* Navigation-style elements */
html[data-color="onepiece"] .tabs,
html[data-color="onepiece"] nav{
  border-bottom: 2px solid #F4C430;
}

html[data-color="onepiece"] .tab{
  color: #FDFBF6;
  font-family: 'Merriweather', serif;
  transition: all 150ms ease;
}

html[data-color="onepiece"] .tab:hover{
  color: #F4C430;
}

html[data-color="onepiece"] .tab[aria-selected="true"]{
  color: #F4C430;
  border-bottom: 3px solid #C62828;
}

/* Quick action buttons - crew style */
html[data-color="onepiece"] .quick-action{
  border: 2px solid #6B4E2E;
  background: transparent;
  color: #F4C430;
  font-family: 'Merriweather', serif;
  transition: all 150ms ease;
}

html[data-color="onepiece"] .quick-action:hover{
  background: rgba(244, 196, 48, 0.12);
  border-color: #F4C430;
  transform: translateY(-2px);
}

html[data-color="onepiece"] .quick-action.danger{
  border-color: #C62828;
  color: #C62828;
}

html[data-color="onepiece"] .quick-action.danger:hover{
  background: rgba(198, 40, 40, 0.12);
}

/* Tips section */
html[data-color="onepiece"] section:last-of-type{
  border: 2px solid #6B4E2E;
  border-radius: 8px;
}

/* Kiosk mode styling */
html[data-color="onepiece"] .kiosk-modal-content{
  border: 2px solid #F4C430;
  background: #0B1D2A;
}

html[data-color="onepiece"] .kiosk-modal-title{
  font-family: 'Cinzel', serif;
  color: #F4C430;
}

html[data-color="onepiece"] .kiosk-key{
  background: #122F46;
  border: 2px solid #6B4E2E;
  color: #FDFBF6;
  font-family: 'JetBrains Mono', monospace;
  transition: all 150ms ease;
}

html[data-color="onepiece"] .kiosk-key:hover{
  background: #C62828;
  border-color: #F4C430;
  transform: translateY(-2px);
}

html[data-color="onepiece"] .kiosk-pin-dot{
  background: #6B4E2E;
  border-color: #F4C430;
}

html[data-color="onepiece"] .kiosk-pin-dot.filled{
  background: #F4C430;
}

/* Editor blocks */
html[data-color="onepiece"] .blocks-container{
  border: 2px dashed #6B4E2E;
  background: rgba(18, 47, 70, 0.5);
}

/* Day over message */
html[data-color="onepiece"] .dayover-message{
  border: 2px solid #F4C430;
  background: linear-gradient(135deg, #0B1D2A, #122F46);
  font-family: 'Cinzel', serif;
}

/* Adventure scale - larger typography for titles */
html[data-color="onepiece"] h1,
html[data-color="onepiece"] h2,
html[data-color="onepiece"] h3{
  font-family: 'Cinzel', serif;
  letter-spacing: 0.06em;
}