/* ============================================================
   UJENAMI — BASE.CSS
   Reset, variables CSS, fond eau, mini radio, chrome global
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --black:#0a0a0a;
  --white:#f5f5f0;
  --gray-mid:#999990;
  --gray-dark:#333330;
  --gray-light:#e8e8e3;
  --bar-h:72px;
  --mini-h:56px;
}

html,body{
  width:100%;height:100%;min-height:100dvh;
  background:var(--white);
  font-family:'Georgia',serif;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ── WATER CANVAS ── */
#waterCanvas{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:0.045;
}

/* ── FREQ BAR ── */
#freqBar{
  position:fixed;
  top:var(--mini-h);            /* juste sous la mini barre radio en haut */
  left:0;right:0;
  height:88px;
  pointer-events:none;
  z-index:55;
  opacity:0;
  transition:opacity 0.6s ease, height 0.3s ease;
}
#freqBar.show{opacity:1;}
#freqCanvas{width:100%;height:100%;display:block;}

/* ── WAVE OVERLAY — canvas géré dynamiquement par nav.js ── */
#waveOv{
  position:fixed;inset:0;z-index:800;
  pointer-events:none;
  display:none;
}

/* ── BARRE DE NAVIGATION ── */
/* ═══ NAV BAR — ZEN LINE style v42 ═══ */
#navBar{
  position:fixed;
  bottom:20px;
  left:20px;
  width:72px;
  background:rgba(248,246,242,0.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(200,190,170,0.35);
  border-radius:36px;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:0;
  z-index:200;
  padding:10px 0 12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.6) inset;
  cursor:grab;
  user-select:none;
  touch-action:none;
  transition:box-shadow 0.2s, opacity 0.3s;
}
#navBar:active{ cursor:grabbing; box-shadow:0 12px 40px rgba(0,0,0,0.18); }
#navBar.collapsed{ padding:6px; border-radius:50%; width:52px; }

/* Avatar circle at top */
.nav-collapse-btn{
  width:44px;height:44px;border-radius:50%;
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:2px;flex-shrink:0;
  transition:transform 0.2s;
  margin-bottom:4px;
}
.nav-collapse-btn:hover{ transform:scale(1.08); }
#navAvatarMini{ width:38px;height:38px;border-radius:50%;
  overflow:hidden;border:2px solid rgba(38,166,154,.4);
  display:flex;align-items:center;justify-content:center; }

/* Expanded section */
.nav-expanded{
  display:flex;flex-direction:column;align-items:center;gap:0;
  width:100%;
  overflow:hidden;
  transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
  max-height:300px;opacity:1;
}
#navBar.collapsed .nav-expanded{ max-height:0;opacity:0;pointer-events:none; }

/* Zen Line connector — vertical line between buttons */
.nav-divider{
  width:1px;height:20px;
  background:linear-gradient(to bottom,transparent,rgba(38,166,154,0.3),transparent);
  flex-shrink:0;
  margin:0 auto;
}

/* Button */
.nav-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;
  padding:8px 6px;
  width:100%;
  transition:opacity 0.2s, background 0.15s;
  -webkit-tap-highlight-color:transparent;
  font-family:'Georgia',serif;
  border-radius:18px;
  width:100%;
}
.nav-btn:hover{ background:rgba(38,166,154,0.05); }
.nav-btn:active .nav-btn-inner{ transform:scale(0.85); }
.nav-btn:active{ background:rgba(38,166,154,0.08); }

/* Zen circle style — outline circle */
.nav-btn-inner{
  width:42px;height:42px;
  border-radius:50%;
  border:1.5px solid rgba(180,170,155,0.6);
  background:rgba(255,255,255,0.5);
  display:flex;align-items:center;justify-content:center;
  transition:border-color 0.2s, box-shadow 0.2s, transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.nav-btn:hover .nav-btn-inner{
  border-color:rgba(38,166,154,0.5);
  box-shadow:0 0 0 4px rgba(38,166,154,0.1);
}
.nav-home-inner{
  border-color:rgba(38,166,154,0.6);
  background:rgba(38,166,154,0.08);
}
.nav-home svg{ stroke:#26A69A; }
.nav-profile-inner{
  border-color:rgba(38,166,154,0.4);
}
.nav-profile svg{ stroke:#26A69A; }
.nav-profile span{ color:#26A69A; }

.nav-btn span{
  font-size:8px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(80,70,60,0.65);
  font-weight:400;
  font-family:'Georgia',serif;
}
.nav-home span{ color:#26A69A; }

.nav-btn[data-disabled="true"]{
  opacity:0.28;
  pointer-events:none;
}

/* ── MINI RADIO BAR — zen/warm redesign ── */
#miniRadio{
  position:fixed;top:0;left:0;right:0;
  min-height:var(--mini-h);
  background:linear-gradient(90deg,rgba(34,18,6,.94),rgba(52,28,8,.94));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(230,200,138,.22);
  color:rgba(245,234,214,.95);
  display:none;align-items:center;
  justify-content:space-between;
  padding:0 16px;z-index:300;
  transition:opacity 0.4s;
  overflow:hidden;
}
#miniRadio.show{display:flex;}
.mini-l{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.mini-flag{font-size:clamp(16px,2.5vw,22px);flex-shrink:0;}
.mini-name{
  font-size:clamp(9px,1.3vw,12px);
  letter-spacing:0.18em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:rgba(245,234,214,.92);font-family:'Georgia',serif;
}
.mini-freq{
  font-size:clamp(9px,1.2vw,11px);
  opacity:.55;margin:0 10px;flex-shrink:0;
  font-family:monospace;color:rgba(230,200,138,.8);
}
.mini-ctrls{display:flex;gap:8px;flex-shrink:0;align-items:center;}
.mcb{
  width:36px;height:36px;
  border:1px solid rgba(230,200,138,.35);
  background:rgba(230,200,138,.08);
  color:rgba(245,234,214,.88);border-radius:50%;
  cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;flex-shrink:0;
}
.mcb:hover{background:rgba(230,200,138,.18);border-color:rgba(230,200,138,.55);}
.mcb:active{background:rgba(230,200,138,.28);}
#mcStop{
  border-color:rgba(230,200,138,.5);
  background:rgba(230,200,138,.12);
}
#mcCompact{font-size:10px;letter-spacing:.1em;width:32px;opacity:.7;}

/* Hide navBar on relax/home screen */
/* navBar always visible - duplicate inline navs removed */
body.relax-immersive #breadcrumbBar{ display:none !important; }

/* ── BREADCRUMB ── */
#breadcrumbBar{
  position:fixed;top:0;left:0;right:0;height:26px;
  background:rgba(10,10,10,0.055);
  display:flex;align-items:center;
  padding:0 14px;gap:10px;z-index:39;
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gray-mid);pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── REC INDICATOR ── */
#recIndicator{
  position:fixed;
  top:calc(var(--mini-h) + 10px);
  left:50%;transform:translateX(-50%);
  background:var(--black);color:var(--white);
  padding:7px 18px;border-radius:20px;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  z-index:400;display:none;align-items:center;gap:8px;
}
#recIndicator.show{display:flex;}
.rec-dot{
  width:7px;height:7px;background:white;
  border-radius:50%;animation:blink 0.9s ease infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

/* ── PAGE TITLE ── */
#pageTitle{
  position:fixed;
  top:calc(var(--mini-h) + 4px);
  left:50%;transform:translateX(-50%);
  font-size:clamp(9px,1.4vw,11px);
  letter-spacing:0.4em;text-transform:uppercase;
  color:var(--gray-mid);font-weight:300;
  z-index:54;pointer-events:none;white-space:nowrap;
}

/* ── TOAST NOTIFICATION ── */
#gNotif{
  position:fixed;
  bottom:calc(var(--bar-h) + 16px);
  left:50%;transform:translateX(-50%);
  background:var(--black);color:var(--white);
  padding:10px 24px;border-radius:24px;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  z-index:700;transition:opacity 0.5s;
  pointer-events:none;white-space:nowrap;
  max-width:90vw;text-align:center;opacity:0;
}

/* ── APP WRAPPER ── */
#app{
  position:fixed;top:0;left:0;
  width:100%;height:100%;height:100dvh;z-index:1;
}

/* ── SPLASH / LOGIN ── */
/* ── SPLASH — ONDES EAU ── */
#splash{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#2D1A06 0%,#4A2E0A 35%,#3D2408 65%,#1E1004 100%);
  z-index:100;
  transition:opacity 0.8s;
  overflow:hidden;
}
#splash.hidden{ opacity:0; pointer-events:none; }

/* Subtle warm texture overlay */
#splash::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 30%,
    rgba(230,196,100,.18) 0%,
    rgba(184,136,64,.08) 40%,
    transparent 75%);
  pointer-events:none;
}

/* Splash animations */
@keyframes splash-pulse{
  0%,100%{opacity:.45;}50%{opacity:.85;}
}
/* Horizontal coin-flip: 2 full rotations on Y axis */
@keyframes emoji-hflip{
  0%  { transform:translateX(-50%) scaleX(0) scaleY(0); opacity:0; }
  15% { transform:translateX(-50%) scaleX(1.15) scaleY(1.15); opacity:1; }
  30% { transform:translateX(-50%) scaleX(-1) scaleY(1); }
  50% { transform:translateX(-50%) scaleX(1) scaleY(1); }
  70% { transform:translateX(-50%) scaleX(-1) scaleY(1); }
  88% { transform:translateX(-50%) scaleX(1.05) scaleY(1.05); }
  100%{ transform:translateX(-50%) scaleX(1) scaleY(1); opacity:1; }
}
@keyframes name-fade{
  from{opacity:0;transform:translateX(-50%) translateY(8px);}
  to  {opacity:1;transform:translateX(-50%) translateY(0);}
}
@keyframes tapPulse{
  0%,100%{ opacity:0.35; transform:scale(1); }
  50%{ opacity:0.75; transform:scale(1.03); }
}
#splash.hidden{opacity:0;pointer-events:none;}

/* Canvas eau en fond du splash */
#splashWaterCanvas{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;
}

/* Conteneur des ondes */
.splash-waves{
  position:relative;
  width:clamp(140px,38vw,220px);height:clamp(140px,38vw,220px);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* Chaque onde = cercle bleu transparent qui s'agrandit */
/* wave rings removed - new splash v40 */

.splash-title{
  position:absolute;
  top:calc(50% + 108px);
  left:50%;transform:translateX(-50%);
  font-size:clamp(13px,2.5vw,20px);
  letter-spacing:0.6em;color:rgba(80,150,200,0.7);
  font-weight:300;text-transform:uppercase;
  pointer-events:none;
  white-space:nowrap;
}

/* Ancien .dot-origin — garde compatibilité mais invisible */
.dot-origin{ display:none; }

#splash .tao-input{
  font-size:15px;width:100%;max-width:290px;
  text-align:left;padding:10px 14px;
}
#splash .tao-btn{width:100%;max-width:290px;text-align:center;}

/* ── HOME SCREEN ── */
#homeScreen{
  position:absolute;width:100%;height:100%;
  opacity:0;pointer-events:none;transition:opacity 0.6s;
}
#homeScreen.active{opacity:1;pointer-events:all;}
#radialLayer{
  position:absolute;top:0;left:0;
  width:100%;height:calc(100% - var(--bar-h));
  pointer-events:none;z-index:20;
}
#contentLayer{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  z-index:10;display:flex;align-items:flex-start;justify-content:center;
  align-content:flex-start;
  padding:calc(var(--mini-h) + clamp(60px,10vh,100px) + clamp(50px,7vh,80px) + 12px) var(--side-pad) clamp(100px,15vh,140px) var(--side-pad);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  transform-origin:center center;
  will-change:transform,opacity;
  box-sizing:border-box;
}
/* Mobile: no padding needed when using position:fixed layouts */
@media(max-width:767px){
  #contentLayer.mob-active{
    padding:0 !important;
    overflow:hidden !important;
  }
}
.center-dot{display:none !important;}
.center-label{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,calc(-50% + 26px));
  font-size:clamp(9px,1.5vw,13px);
  letter-spacing:0.4em;color:var(--gray-dark);
  text-transform:uppercase;font-weight:300;
  opacity:0;animation:fadeL 1s 0.5s forwards;
  pointer-events:none;white-space:nowrap;z-index:22;
}
@keyframes fadeL{to{opacity:0.4;}}

/* ── MINI RADIO FLOTTANTE ── */
#miniRadio.bar-floating{
  /* Position et taille gérées par JS */
  border-radius:28px !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.35);
  right:auto !important;
  transition:box-shadow 0.2s;
  cursor:grab;
  padding:0 12px;
}
#miniRadio.bar-floating:active{ cursor:grabbing; }
#miniRadio.bar-floating .mini-freq{ display:none; }
#miniRadio.bar-floating #mcVolD,
#miniRadio.bar-floating #mcVolU{ display:none; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — adapts to any screen
   Phone (320-480px) / Tablet (481-1024px) / Desktop / Car screen (1024px+)
   ════════════════════════════════════════════════════════════ */

/* ── CSS variables that scale with screen ── */
:root {
  --content-max: 560px;
  --side-pad: clamp(14px, 4vw, 48px);
  --font-base: clamp(13px, 1.6vw, 16px);
  --font-lg: clamp(18px, 2.8vw, 32px);
  --tile-min: clamp(130px, 28vw, 240px);
  --card-radius: clamp(12px, 2vw, 20px);
  --nav-scale: 1;
}

/* ── TABLET — side-by-side layout ── */
@media (min-width: 600px) {
  :root {
    --content-max: 720px;
    --font-base: clamp(14px, 1.4vw, 17px);
    --font-lg: clamp(22px, 3vw, 36px);
  }
  #contentLayer {
    align-items: flex-start;
    padding-left: clamp(32px, 6vw, 80px);
    padding-right: clamp(32px, 6vw, 80px);
  }
  .scroll-wrapper {
    max-width: var(--content-max);
  }
  .home-tiles {
    gap: 16px;
  }
  .home-tile {
    min-height: 160px;
    padding: 24px 16px 18px;
  }
}

/* ── DESKTOP / LARGE TABLET (1024px+) ── */
@media (min-width: 1024px) {
  :root {
    --content-max: 860px;
    --font-base: 16px;
    --font-lg: 38px;
    --tile-min: 200px;
  }
  #app {
    display: flex;
    align-items: stretch;
  }
  /* Left sidebar for nav on large screens */
  #navBar {
    position: fixed;
    left: 24px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 0;
    border-radius: 28px;
    padding: 6px 0;
  }
  .nav-divider {
    width: 60%;
    height: 1px;
    margin: 2px auto;
  }
  .nav-btn {
    padding: 14px 22px;
    width: 100%;
  }
  #contentLayer {
    padding-left: clamp(80px, 10vw, 140px);
    padding-right: clamp(32px, 5vw, 64px);
  }
  /* Home grid: 2x2 stays but bigger */
  .home-tiles {
    max-width: 680px;
    gap: 20px;
  }
  .home-tile {
    min-height: 200px;
    padding: 28px 20px 22px;
  }
  .ht-icon { width: 100px; height: 90px; }
  .ht-label { font-size: 14px; }
  /* Cards bigger */
  .radio-card {
    width: clamp(180px, 20vw, 260px) !important;
    height: clamp(180px, 20vw, 255px) !important;
  }
  .room-card {
    width: clamp(200px, 22vw, 280px) !important;
    height: clamp(190px, 20vw, 260px) !important;
  }
  /* Mini radio bar bigger */
  #miniRadio { min-height: 64px; }
  .mini-name { font-size: 14px; }
}

/* ── CAR SCREEN / LANDSCAPE TABLET (wider than tall) ── */
@media (min-width: 700px) and (orientation: landscape) {
  :root { --content-max: 900px; }
  #navBar {
    position: fixed;
    left: 20px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: column;
    border-radius: 28px;
    padding: 6px 0;
  }
  .nav-divider { width: 60%; height: 1px; margin: 2px auto; }
  .nav-btn { padding: 16px 22px; }
  /* Landscape: home grid becomes 4 in a row */
  .home-tiles {
    grid-template-columns: repeat(4, 1fr);
    max-width: 860px;
    gap: 14px;
  }
  .home-tile { min-height: 140px; }
  #contentLayer {
    padding-left: clamp(80px, 9vw, 120px);
    padding-right: clamp(24px, 4vw, 48px);
    padding-top: calc(var(--mini-h) + 16px) !important;
  }
  /* Horizontal scroll cards bigger in landscape */
  .h-scroll { gap: 12px; }
}

/* ── SMALL PHONE (< 360px) — Samsung Galaxy A series etc ── */
@media (max-width: 359px) {
  :root { --font-base: 12px; }
  .home-tile { min-height: 110px; padding: 14px 8px 10px; }
  .ht-icon { width: 60px; height: 56px; }
  .ht-label { font-size: 9px; letter-spacing: 0.12em; }
  .nav-btn { padding: 10px 16px; }
  #miniRadio .mini-name { font-size: 11px; }
  .radio-card { min-width: 130px !important; }
}

/* ── TOUCH SCREEN SPECIFIC (phones & tablets & car) ── */
@media (pointer: coarse) {
  /* Bigger tap targets */
  .tao-btn { min-height: 48px; }
  .ra-btn { min-height: 48px; padding: 12px 20px; }
  input, select { font-size: 16px !important; } /* prevents zoom on iOS */
  /* Scrollbars hidden on touch */
  .h-scroll::-webkit-scrollbar { display: none; }
  .h-scroll { scrollbar-width: none; -ms-overflow-style: none; }
}

/* ── MOUSE/DESKTOP — show scrollbars, hover effects ── */
@media (pointer: fine) {
  .home-tile:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  }
  .radio-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
  .room-card:hover  { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
  .nav-btn:hover .nav-btn-inner { background: rgba(0,0,0,0.06); }
  .h-scroll::-webkit-scrollbar { height: 4px; }
  .h-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
}

/* ── HIGH DPR SCREENS (Retina, 4K car displays) ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Already handled by canvas DPR scaling in JS */
  .relax-img { image-rendering: -webkit-optimize-contrast; }
}

/* ── DARK MODE ── */
@media (prefers-color-scheme: dark) {
  :root {
    --black: #f0f0eb;
    --white: #111110;
    --gray-mid: #777770;
    --gray-dark: #ccccC8;
    --gray-light: #2a2a28;
  }
  #miniRadio { background: linear-gradient(90deg, #060f14, #091e28); }
  .qr-panel  { background: #1a1a18; }
}

/* ─── SPLASH TITLE (v40 - warm/zen) ─── */
.splash-title{
  position:absolute;
  top:calc(50% + 108px);
  left:50%;transform:translateX(-50%);
  font-size:clamp(13px,2.5vw,20px);
  letter-spacing:0.6em;color:rgba(245,234,214,.5);
  font-weight:300;text-transform:uppercase;
  pointer-events:none;
  white-space:nowrap;
  font-family:Georgia,serif;
}

/* ─── LOGIN SCREEN — black text, warm design ─── */
.tao-input{
  color:#0A0A0A !important;
}
.tao-input::placeholder{
  color:rgba(10,10,10,.45) !important;
}

/* ─── RESPONSIVE SPLASH ─── */
@media(max-width:480px){
  #splash-drop-fall{ width:20px !important; height:26px !important; }
  #splash-emoji-drop{ width:70px !important; height:70px !important; }
  #splash-appname > div:first-child{ font-size:28px !important; }
}