/* ============================================================================
   IMMERSIVE TABLE — the 3D island fills the whole window; the HUD floats over
   it. Active only with the 3D board up (body.immersive, set by
   applyBoardStyleClass in game.js) and on desktop widths — below 1001px the
   stacked layout in style.css stays in charge.

   The canvas is framed against the free area between the panels by
   Board3D.setSafeArea (camera view offset), so the island still sits dead
   centre of what the player can actually see.
   ============================================================================ */
@media (min-width:1001px){

  body.immersive{
    --imm-gap:16px;
    --imm-left:272px;   /* left roster + its gap  */
    --imm-right:328px;  /* right scroll + its gap */
    --imm-top:90px;     /* topbar block           */
    --imm-bottom:176px; /* hand dock              */
    --imm-ease:cubic-bezier(.2,.8,.2,1);
    background:#0e1418;
  }

  body.immersive #game-screen{position:relative;}

  /* ---- the island: full-bleed, under everything ---- */
  body.immersive .board-wrap{
    position:fixed;inset:0;z-index:0;margin:0;border-radius:0;
    background:#0f2e38;box-shadow:none;
  }
  body.immersive .board-wrap::before{display:none;}
  body.immersive .board-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;}
  /* a gentle cinematic vignette + a warm/cool grade at the edges so the
     panels sit on something darker than open sky */
  body.immersive .board-wrap::after{
    background:
      radial-gradient(ellipse 70% 62% at 50% 46%, rgba(0,0,0,0) 55%, rgba(8,14,18,.34) 100%),
      linear-gradient(180deg, rgba(10,14,18,.28) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 72%, rgba(10,8,4,.5) 100%);
  }

  /* .game-main must NOT form a stacking context (no z-index): the fixed
     .board-wrap inside it has to sink below every panel, including the
     topbar and roster that come before it in the DOM */
  body.immersive .topbar,
  body.immersive #bottom-bar,
  body.immersive .game-main > .sidebar{position:relative;z-index:2;}
  body.immersive .game-main > #chat-drawer{z-index:4;}
  body.immersive .board-wrap > .corner-ornament{display:none;}
  /* clicks fall through the empty middle to the canvas */
  body.immersive .game-main{pointer-events:none;background:none;}
  body.immersive .game-main > .sidebar,
  body.immersive .game-main > #chat-drawer,
  body.immersive .game-main > .board-wrap{pointer-events:auto;} /* the board sits under everything but must still take clicks */
  body.immersive .sidebar-right{grid-column:3;}
  body.immersive .game-main{grid-template-columns:256px 1fr 312px;}

  /* ---- glass-and-walnut panels ---- */
  body.immersive .topbar,
  body.immersive .sidebar{
    background-color:rgba(24,16,9,.72);
    background-image:
      linear-gradient(180deg, rgba(255,236,200,.07), rgba(255,236,200,0) 40%),
      linear-gradient(180deg, rgba(43,29,17,.55), rgba(15,10,5,.75));
    -webkit-backdrop-filter:blur(14px) saturate(1.25);
    backdrop-filter:blur(14px) saturate(1.25);
    box-shadow:
      inset 0 0 0 1px rgba(209,162,79,.55),
      inset 0 1px 0 rgba(255,240,210,.12),
      0 18px 40px rgba(6,10,14,.45), 0 2px 6px rgba(0,0,0,.35);
    border-radius:14px;
  }
  body.immersive .topbar::before,
  body.immersive .sidebar::before{opacity:.18;border-radius:inherit;}
  body.immersive .topbar{height:60px;}

  /* the right scroll keeps its parchment but floats like a card */
  body.immersive .sidebar-right{
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 22px 48px rgba(6,10,14,.5), 0 2px 6px rgba(0,0,0,.35);
  }

  /* roster: rows size to their content (fixes the squeezed, overlapping
     stat lines when four settlers share a short window) */
  body.immersive .sidebar-left .player-card{flex:0 0 auto;max-height:none;min-height:0;}
  body.immersive .sidebar-left #players-panel{overflow-y:auto;scrollbar-width:thin;}

  /* ---- hand dock: no plank, the cards float on a soft shadow ---- */
  body.immersive #bottom-bar{
    background:linear-gradient(0deg, rgba(8,6,3,.82) 0%, rgba(8,6,3,.55) 55%, rgba(8,6,3,0) 100%);
    box-shadow:none;margin-top:10px;padding-top:22px;
  }
  body.immersive #bottom-bar::before{display:none;}
  body.immersive #bottom-bar .resource-chip,
  body.immersive #bottom-bar .dev-card-item,
  body.immersive #bottom-bar .build-btn{
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));
  }
  body.immersive .bottom-bar-motto{text-shadow:0 1px 4px rgba(0,0,0,.9);}

  /* ---- board chrome: re-anchored to the free area ---- */
  body.immersive .board-toolbar{
    top:calc(var(--imm-top) + 12px);left:calc(var(--imm-left) + 12px);
    background:rgba(24,16,9,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-radius:999px;padding:4px 10px;
  }
  body.immersive .board-foot{bottom:calc(var(--imm-bottom) + 10px);}
  body.immersive .placement-pill{left:calc(var(--imm-left) + 12px);top:auto;bottom:calc(var(--imm-bottom) + 12px);border-radius:999px;}
  body.immersive .board-wrap .dice-area{right:calc(var(--imm-right) + 12px);bottom:calc(var(--imm-bottom) + 12px);}
  body.immersive .roll-pill{padding:9px 18px 9px 11px;font-size:.8rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px rgba(0,0,0,.45);}

  /* ---- opening shot: the HUD waits off-stage, then slides in ---- */
  body.immersive .topbar,
  body.immersive .sidebar,
  body.immersive #bottom-bar,
  body.immersive .board-toolbar,
  body.immersive .board-foot,
  body.immersive .dice-area{
    transition:transform .95s var(--imm-ease), opacity .8s ease;
  }
  body.immersive #game-screen.intro-playing .topbar{transform:translateY(-130%);opacity:0;}
  body.immersive #game-screen.intro-playing .sidebar-left{transform:translateX(-115%);opacity:0;}
  body.immersive #game-screen.intro-playing .sidebar-right{transform:translateX(115%);opacity:0;}
  body.immersive #game-screen.intro-playing #bottom-bar{transform:translateY(110%);opacity:0;}
  body.immersive #game-screen.intro-playing .board-toolbar,
  body.immersive #game-screen.intro-playing .board-foot,
  body.immersive #game-screen.intro-playing .dice-area,
  body.immersive #game-screen.intro-playing .placement-pill{opacity:0;pointer-events:none;}
  body.immersive #game-screen.intro-playing .board-wrap::after{opacity:0;}
  body.immersive .board-wrap::after{transition:opacity 1.2s ease;}
  /* staggered landing */
  body.immersive #game-screen.intro-landing .topbar{transition-delay:.05s;}
  body.immersive #game-screen.intro-landing .sidebar-left{transition-delay:.18s;}
  body.immersive #game-screen.intro-landing .sidebar-right{transition-delay:.28s;}
  body.immersive #game-screen.intro-landing #bottom-bar{transition-delay:.4s;}
  body.immersive #game-screen.intro-landing .board-foot,
  body.immersive #game-screen.intro-landing .dice-area{transition-delay:.6s;}
}

/* ---- island title card (opening shot) ---- */
.island-title{
  position:fixed;left:50%;top:26%;z-index:60;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  pointer-events:none;color:#fff8ea;opacity:0;
  transition:opacity 1.1s ease, transform 1.4s cubic-bezier(.2,.8,.2,1), filter 1.1s ease;
  filter:blur(8px);
}
.island-title.in{opacity:1;filter:blur(0);}
.island-title.out{opacity:0;transform:translate(-50%,-62%);filter:blur(6px);transition-duration:.8s;}
.island-title-kicker{
  font-family:"IBM Plex Sans",sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(255,244,222,.85);text-shadow:0 1px 8px rgba(40,24,8,.55);
}
.island-title-name{
  margin:0;font-family:"Cormorant Garamond","IM Fell English",Georgia,serif;font-weight:600;font-style:italic;
  font-size:clamp(2.6rem, 6.4vw, 5.6rem);line-height:1;letter-spacing:.01em;
  color:#fffaf0;
  text-shadow:0 2px 0 rgba(90,56,20,.35), 0 6px 30px rgba(60,34,10,.55), 0 0 60px rgba(255,214,150,.45);
  animation:islandTitleTrack 7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes islandTitleTrack{from{letter-spacing:.14em;}to{letter-spacing:.01em;}}
.island-title-rule{
  width:min(340px,60vw);height:1px;margin:8px 0 4px;
  background:linear-gradient(90deg,transparent,rgba(255,226,170,.95),transparent);
  box-shadow:0 0 12px rgba(255,210,140,.8);
}
.island-title-sub{
  margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.25rem;font-weight:500;
  color:rgba(255,248,232,.95);text-shadow:0 1px 10px rgba(40,24,8,.7);
}
.island-title-loading{
  margin:10px 0 0;font-family:"IBM Plex Sans",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,244,222,.8);text-shadow:0 1px 6px rgba(40,24,8,.6);
  animation:islandLoad 1.6s ease-in-out infinite;transition:opacity .6s ease;
}
.island-title.flying .island-title-loading{opacity:0;animation:none;}
@keyframes islandLoad{0%,100%{opacity:.35;}50%{opacity:.95;}}
.island-title-skip{
  position:fixed;left:50%;bottom:48px;z-index:61;transform:translateX(-50%);
  animation:skipIn .8s ease both 1.2s;
  pointer-events:auto;padding:6px 14px;border-radius:999px;cursor:pointer;
  font-family:"IBM Plex Sans",sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#fff8ea;background:rgba(20,14,8,.35);border:1px solid rgba(255,230,190,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .2s ease;
}
.island-title-skip:hover{background:rgba(20,14,8,.6);}
@keyframes skipIn{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .island-title-name{animation:none;}
  .island-title{transition-duration:.3s;}
}

/* ============================================================================
   MENU OVER THE ISLAND — body.menu-live (desktop + 3D board, see
   initMenuBackdrop in game.js). The game screen is laid out but invisible;
   only its board canvas shows, orbiting the island that will be played.
   ============================================================================ */
.menu-hero{display:none;}
@media (min-width:1001px){
  body.menu-live #game-screen.hidden{display:flex !important;visibility:hidden;position:fixed;inset:0;}
  body.menu-live #game-screen.hidden .board-wrap{visibility:visible;}
  body.menu-live #game-screen.hidden .board-wrap > :not(#board-container):not(.board-veil){visibility:hidden;}
  body.menu-live #game-screen.hidden .board-wrap::after{
    visibility:visible;
    background:
      linear-gradient(90deg, rgba(8,10,12,0) 45%, rgba(8,10,12,.42) 100%),
      linear-gradient(0deg, rgba(8,10,12,.45) 0%, rgba(8,10,12,0) 32%);
  }

  body.menu-live #setup-screen{
    position:relative;z-index:5;background:none;
    justify-content:flex-end;padding:32px 48px;
  }
  body.menu-live .setup-card.chart-table{
    max-width:800px;grid-template-columns:minmax(0,1fr) minmax(300px,.95fr);
    animation:menuCardIn 1.1s cubic-bezier(.2,.8,.2,1) both .2s;
  }
  @keyframes menuCardIn{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:none;}}
  /* the 3D island IS the preview now — drop the paper chart and title */
  body.menu-live .chart-map-frame,
  body.menu-live .chart-cartouche{display:none;}
  body.menu-live .chart{padding:24px 26px 18px;display:flex;flex-direction:column;}
  body.menu-live .chart-body{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;}
  body.menu-live .chart-legend{order:1;width:100%;}
  body.menu-live .chart-legend .segmented{width:100%;}
  body.menu-live .chart-legend::before{
    content:"La traversée";display:block;margin:0 0 14px;padding-bottom:12px;
    font-family:var(--font-display);font-weight:600;font-size:2rem;line-height:1;color:var(--ink);
    border-bottom:1px solid rgba(58,42,24,.2);
  }
  body.menu-live .chart-map{order:2;margin-top:18px;}
  body.menu-live .setup-card.chart-table{align-items:start;}
  body.menu-live .chart-map-caption{padding-top:14px;border-top:1px solid rgba(58,42,24,.2);}
  body.menu-live .crew{
    background-color:rgba(24,16,9,.78);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  }

  body.menu-live .menu-hero{
    display:block;position:fixed;left:64px;bottom:64px;z-index:5;pointer-events:none;
    color:#fffaf0;animation:menuHeroIn 1.6s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes menuHeroIn{from{opacity:0;transform:translateY(18px);filter:blur(6px);}to{opacity:1;transform:none;filter:none;}}
  .menu-hero-kicker{
    font-family:"IBM Plex Sans",sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;
    color:rgba(255,244,222,.85);text-shadow:0 1px 8px rgba(20,12,4,.6);margin-left:6px;
  }
  .menu-hero-title{
    font-family:"Cormorant Garamond","IM Fell English",Georgia,serif;font-weight:600;
    font-size:clamp(4.5rem, 10vw, 9rem);line-height:.9;letter-spacing:.01em;
    text-shadow:0 2px 0 rgba(90,56,20,.3), 0 10px 40px rgba(20,12,4,.55), 0 0 80px rgba(255,214,150,.35);
  }
  .menu-hero-island{
    font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.6rem;margin:6px 0 0 6px;
    color:rgba(255,246,228,.95);text-shadow:0 1px 10px rgba(20,12,4,.75);
  }
  .menu-hero-island:not(:empty)::before{content:"— ";color:rgba(255,220,160,.9);}
}

/* ---- turn call-out: a cinematic strip across the sea, not a paper box ---- */
@media (min-width:1001px){
  body.immersive .turn-banner{
    width:100vw;max-width:none;border:none;border-radius:0;box-shadow:none;
    padding:22px 0 24px;margin-top:-8vh;
    font-family:"Cormorant Garamond","IM Fell English",Georgia,serif;font-style:italic;font-weight:600;
    font-size:3.2rem;letter-spacing:.02em;color:#fffaf0;
    background:
      linear-gradient(90deg, transparent 0%, rgba(209,162,79,.9) 30%, rgba(209,162,79,.9) 70%, transparent 100%) top/100% 1px no-repeat,
      linear-gradient(90deg, transparent 0%, rgba(209,162,79,.9) 30%, rgba(209,162,79,.9) 70%, transparent 100%) bottom/100% 1px no-repeat,
      linear-gradient(90deg, rgba(14,10,5,0) 0%, rgba(14,10,5,.62) 25%, rgba(14,10,5,.62) 75%, rgba(14,10,5,0) 100%);
    text-shadow:0 2px 18px rgba(0,0,0,.7), 0 0 40px rgba(255,210,140,.35);
    animation:turnStripIn .9s cubic-bezier(.2,.8,.2,1), turnStripOut .6s ease 2.4s forwards;
  }
  @keyframes turnStripIn{from{opacity:0;letter-spacing:.2em;clip-path:inset(0 50% 0 50%);}to{opacity:1;letter-spacing:.02em;clip-path:inset(0 0 0 0);}}
  @keyframes turnStripOut{to{opacity:0;transform:translateY(-12px);}}
}

/* ---- game over over the island (body.outro-live, see openWinModal) ---- */
@media (min-width:1001px){
  body.outro-live #game-screen.hidden{display:flex !important;visibility:hidden;position:fixed;inset:0;}
  body.outro-live #game-screen.hidden .board-wrap{visibility:visible;}
  body.outro-live #game-screen.hidden .board-wrap > :not(#board-container){visibility:hidden;}
  body.outro-live #gameover-screen{position:relative;z-index:5;background:none;}
  body.outro-live .gameover-card{
    box-shadow:0 30px 80px rgba(10,6,2,.55), 0 0 0 1px rgba(209,162,79,.6);
    animation:menuCardIn 1.2s cubic-bezier(.2,.8,.2,1) both .8s;
  }
}

@media (min-width:1001px){
  body.outro-live #gameover-screen{justify-content:flex-end;padding:24px 48px;}
  body.outro-live .gameover-card{margin:auto 0;}
}

/* ---- 3D loading veil (updateBoardVeil in game.js) ---- */
body.board-loading #board-container canvas{opacity:0;}
#board-container canvas{transition:opacity .8s ease;}
.board-veil{
  position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%, #1d5563 0%, #0f2e38 60%, #0a1c22 100%);
  transition:opacity .7s ease;
}
.board-veil.out{opacity:0;pointer-events:none;}
body.menu-live .board-veil{padding-right:52%;}
body.menu-live .board-veil-inner{margin-top:-18vh;}
.board-veil-inner{display:flex;flex-direction:column;align-items:center;gap:12px;color:#f6ead0;text-align:center;}
.board-veil-compass{width:54px;height:54px;color:#f2cf7a;animation:veilSpin 6s linear infinite;filter:drop-shadow(0 0 12px rgba(242,207,122,.45));}
.board-veil-compass .ico{width:100%;height:100%;}
@keyframes veilSpin{to{transform:rotate(360deg);}}
.board-veil-title{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.5rem;font-weight:600;}
.board-veil-bar{width:220px;height:4px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden;}
.board-veil-bar span{display:block;height:100%;width:4%;background:linear-gradient(90deg,#b8893a,#f2cf7a);transition:width .4s ease;}
.board-veil-count{font-family:"IBM Plex Sans",sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;}
@media (prefers-reduced-motion:reduce){.board-veil-compass{animation:none;}}