/*
 * Kraken level 10: ONE final, responsive composition. Designed for the real
 * adventure game screen, not the standalone artwork mockup.
 *
 * Keep the familiar dark photographic face, bright three painted tentacles,
 * 8x8 board, movable tray and active boosters. Nothing in this sheet changes
 * level rules, touch handling, scores or a saved session.
 *
 * This is linked after adventure-v6.css and adventure-boosters.css so that old
 * cinematic layout experiments cannot override the approved composition.
 */
html[data-world="reef"] .game-screen.boss-mode{
  --kraken-board-width:min(78vw,340px,max(250px,calc(100svh - 315px)));
  min-height:0;
  gap:0;
}

/* The existing browser/Telegram bars occupy real space: make the game's last
   controls scroll clear of a floating bottom toolbar, instead of hiding them. */
html[data-world="reef"][data-screen="game-screen"] .adventure-shell{
  overflow:visible;
  padding-bottom:max(76px,calc(60px + env(safe-area-inset-bottom)));
}
html[data-world="reef"] .game-screen.boss-mode .game-topline{
  margin:0 4px 5px;
  min-height:35px;
  align-items:center;
}
html[data-world="reef"] .game-screen.boss-mode .level-heading{
  gap:1px;
}
html[data-world="reef"] .game-screen.boss-mode .level-heading strong{
  font-size:19px;
  line-height:1.1;
}
html[data-world="reef"] .game-screen.boss-mode .game-topline .text-button{
  padding:6px;
  min-height:33px;
}
/* Compact objective keeps saved-run metadata and 3-heart legacy HP readable.
   Never pretend an old save uses the new 9-HP rules. */
html[data-world="reef"] .game-screen.boss-mode .objective{
  border-radius:16px;
  padding:7px 11px 6px;
  margin:0;
  z-index:4;
}
html[data-world="reef"] .game-screen.boss-mode .edition-note{
  margin:0 0 4px;
  font-size:9px;
  letter-spacing:1.05px;
}
html[data-world="reef"] .game-screen.boss-mode .goal-details{
  gap:4px;
  padding-right:70px;
}
html[data-world="reef"] .game-screen.boss-mode .goal-chip{
  font-size:11px;
  padding:3px 7px;
}
html[data-world="reef"] .game-screen.boss-mode .boss-health{
  top:7px;
  right:10px;
}
html[data-world="reef"] .game-screen.boss-mode .boss-health strong{
  font-size:12px;
}
html[data-world="reef"] .game-screen.boss-mode .meter{
  height:4px;
  margin:5px 0;
}
html[data-world="reef"] .game-screen.boss-mode .objective-bottom{
  font-size:11px;
  line-height:1.2;
}

/* The actual approved monster photograph. Its eyes must remain FULLY visible,
   not covered by the progress bar, clipped by the portrait or blacked out. */
html[data-world="reef"] .game-screen.boss-mode .boss-portrait{
  height:clamp(119px,18svh,154px);
  min-height:119px;
  margin:1px -10px -17px;
  z-index:1;
  overflow:hidden;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:none!important;
  background-image:
    linear-gradient(180deg,#06152b12 0%,#04152d04 55%,#04192c66 100%),
    url('art/kraken-approved-face-v1.svg')!important;
  background-color:#071628;
  background-repeat:no-repeat,no-repeat!important;
  background-position:center,center 49%!important;
  background-size:cover,cover!important;
  -webkit-mask-image:linear-gradient(black 78%,transparent 100%);
  mask-image:linear-gradient(black 78%,transparent 100%);
}
html[data-world="reef"] .game-screen.boss-mode .boss-portrait::before{
  background:linear-gradient(180deg,transparent 0%,#061c2f18 67%,#04192b44);
}
html[data-world="reef"] .game-screen.boss-mode .boss-portrait::after{
  opacity:.16;
}
html[data-world="reef"] .game-screen.boss-mode .boss-portrait-phase{
  z-index:3;
  bottom:17px;
  left:19px;
  padding:4px 10px;
  font-size:10px;
  border-radius:15px;
  color:#fff3d7;
  background:#071f36c4;
  border:0;
}
html[data-world="reef"] .game-screen.boss-mode .boss-portrait-version{
  display:none;
}

/* Three curls: upper-left and upper-right at eyebrow level, the third
   deliberately mid-LEFT beside board rows 5–7. Never over active cells. */
html[data-world="reef"] .game-screen.boss-mode .play-field{
  flex:0 0 auto;
  padding:3px 7px 1px;
  margin:0!important;
  isolation:isolate;
  position:relative;
  overflow:visible;
}
html[data-world="reef"] .game-screen.boss-mode .board-frame{
  width:var(--kraken-board-width)!important;
  max-width:100%;
  min-width:0;
  padding:5px;
  margin:0 auto;
  z-index:2;
}
html[data-world="reef"] .game-screen.boss-mode .boss-limb-stage{
  z-index:0!important;
  pointer-events:none!important;
  overflow:visible;
  clip-path:inset(-155px -38px -15px);
}
html[data-world="reef"] .game-screen.boss-mode .boss-limb{
  width:clamp(124px,34vw,166px);
  height:clamp(186px,52vw,244px);
  pointer-events:none!important;
  filter:drop-shadow(0 0 7px #72efff52);
}
html[data-world="reef"] .game-screen.boss-mode .boss-limb-left{
  top:-118px;
  left:-32px;
  right:auto;
  bottom:auto;
  transform-origin:30% 85%;
  --rest:rotate(-5deg);
  --tuck:translate(-80px,175px) rotate(-23deg);
}
html[data-world="reef"] .game-screen.boss-mode .boss-limb-right{
  top:-112px;
  right:-32px;
  left:auto;
  bottom:auto;
  transform-origin:50% 85%;
  --rest:scaleX(-1) rotate(-5deg);
  --tuck:translate(80px,175px) rotate(23deg);
}
html[data-world="reef"] .game-screen.boss-mode .boss-limb-low{
  top:40%;
  left:-69px;
  right:auto;
  bottom:auto;
  width:clamp(139px,36vw,176px);
  height:clamp(198px,55vw,262px);
  transform-origin:50% 50%;
  --rest:rotate(90deg);
  --tuck:translate(-95px,145px) rotate(125deg);
}

/* Everything below the board remains tappable and close to the fingers. */
html[data-world="reef"] .game-screen.boss-mode .play-guidance{
  position:relative;
  z-index:4;
  min-height:35px;
  margin:5px 2px 4px;
  padding:2px 4px;
  gap:6px;
  border-radius:11px;
  background:#062b43d9;
}
html[data-world="reef"] .game-screen.boss-mode .play-hint{
  min-width:0;
  font-size:10px;
  line-height:1.3;
}
html[data-world="reef"] .game-screen.boss-mode .hint-action{
  flex:0 0 auto;
  border-radius:99px;
  padding:8px 10px;
  min-height:34px;
}
html[data-world="reef"] .game-screen.boss-mode > .piece-tray{
  z-index:4;
  min-height:58px;
  margin:2px 3px 4px;
  border-radius:16px;
}
html[data-world="reef"] .game-screen.boss-mode .piece-slot{
  height:clamp(59px,8.2svh,70px);
  min-height:57px;
}
html[data-world="reef"] .game-screen.boss-mode > .boosters-bar{
  position:relative;
  z-index:4;
  margin:5px 2px 4px;
  padding:7px 8px;
  border-radius:16px;
}
html[data-world="reef"] .game-screen.boss-mode .boosters-heading{
  margin-bottom:5px;
}
html[data-world="reef"] .game-screen.boss-mode .booster-button{
  min-height:40px;
  padding:5px 4px;
  gap:3px;
}
html[data-world="reef"] .game-screen.boss-mode .booster-icon{
  font-size:19px;
}
html[data-world="reef"] .game-screen.boss-mode .booster-tip{
  min-height:0;
  font-size:9px;
  margin:5px 2px 0;
  line-height:1.3;
}
html[data-world="reef"] .game-screen.boss-mode #map-bottom{
  position:relative;
  z-index:4;
  margin-top:5px;
}

/* Small iPhone and reduced-height in-app browsers. Preserve real gameplay
   controls over decoration; no horizontal scrolling or floating overlays. */
@media (max-height:690px){
  html[data-world="reef"] .game-screen.boss-mode{
    --kraken-board-width:min(78vw,318px,max(245px,calc(100svh - 307px)));
  }
  html[data-world="reef"] .game-screen.boss-mode .boss-portrait{
    height:clamp(105px,16svh,133px);min-height:105px;
    margin-bottom:-16px;
  }
  html[data-world="reef"] .game-screen.boss-mode .boss-limb-left{top:-111px}
  html[data-world="reef"] .game-screen.boss-mode .boss-limb-right{top:-105px}
  html[data-world="reef"] .game-screen.boss-mode .boss-limb-low{top:40%;left:-65px}
  html[data-world="reef"] .game-screen.boss-mode .piece-slot{height:59px}
  html[data-world="reef"] .game-screen.boss-mode .booster-button{min-height:38px}
}
@media (max-width:355px){
  html[data-world="reef"] .game-screen.boss-mode{
    --kraken-board-width:min(80vw,285px);
  }
  html[data-world="reef"] .game-screen.boss-mode .boss-limb-left{left:-29px}
  html[data-world="reef"] .game-screen.boss-mode .boss-limb-right{right:-29px}
  html[data-world="reef"] .game-screen.boss-mode .boss-limb-low{left:-67px}
  html[data-world="reef"] .game-screen.boss-mode .boosters-heading span{font-size:8px}
  html[data-world="reef"] .game-screen.boss-mode .booster-count{min-width:18px}
}
@media (prefers-reduced-motion:reduce){
  html[data-world="reef"] .game-screen.boss-mode .boss-limb{
    animation:none!important;
    transform:var(--rest);
  }
  html[data-world="reef"] .game-screen.boss-mode .boss-portrait::after{
    animation:none!important;
  }
}