/* Everything drawn inside a hex is a share of the tile, never a pixel count:
   a tile is ~200px wide on a desktop and ~96px on a landscape iPhone SE, and
   fixed sizes tuned for the big case spill out of the small one. */

/* A cell's contents arrive in a lazy turbo-frame, which is an inline element
   with no box of its own — anything absolute inside it would otherwise be
   placed against a 0x0 box instead of the tile. Every wrapper between the
   tile and its contents fills the tile, so the contents can be placed as a
   share of it. */
.hexContent turbo-frame,
.hexContent .blank-move-link,
.hexContent .move-to-grass-link,
.hexContent .grass-container {
    position: absolute;
    inset: 0;
    display: block;
}

/* Centred on the tile and drawn over whatever is standing in it. It never
   takes the tap: the move link underneath it has to stay clickable. */
.tall-grass {
    position: absolute;
    bottom: 30%;
    left: 50%;
    width: 84%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
}

/* Down the right-hand edge rather than above the team: they are glanceable
   arrows towards bosses and campfires, and the vertical space they used to
   take at the top is the space the team's buttons need. */
.direction-indicators {
    position: absolute;
    top: 50%;
    right: 4%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.boss-dir-highlight {
    color: red;
    font-weight: bold;
}

.campfire-dir-highlight {
    color: green;
    font-weight: bold;
}


.wild-team {
    height: 85%;
}

.wild-team img {
    width: 40%;
}
.boss-team img {
    width: 70%;
}

.battle-link {
    cursor: url(data:image/png;base64,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)
    7 0,
    pointer;
}

::view-transition-group(team-on-tile) {
    z-index: 100;
}

/* The team sits in the middle of its tile with its buttons (Ascend, Rest)
   directly underneath, the pair centred together so neither leaves the hex. */
/* Scoped under .hexContent so it outranks the generic turbo-frame rule
   above, which would otherwise turn this frame back into a block and drop
   the centring. */
.hexContent .team-container-on-tile {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2%;
    padding: 0;
}

/* Square, because the art is: a tile is taller than it is wide, so sizing
   both axes off it stretched every team into a lamppost. */
.team-on-tile {
    width: 52%;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
}

.debug-team-on-tile {
    width: 100%;
    height: 100%;
}

/* prevent it from being overlapped by grass */
/* Narrower than the tile is wide: a hexagon pinches in towards its bottom
   vertex, and a full-width button crosses the slanted edges. */
.in-world-actions {
    z-index: 3;
    width: 72%;
    display: flex;
    flex-direction: row;
    gap: 2%;
}

.in-world-link {
    flex: 1;
    padding: 0 2px;
    font-size: 0.7em;
    white-space: nowrap;
}

.boss-tile-badge {
    color: #e76e55;
}

.wild-player-badge {
    color: #ff9100;
}

.extra-team-count {
    display: inline-block;
    color: black;
    padding-top: 20px;
    height: 64px;
}

.hex-cell-obscured {
  backdrop-filter: blur(5px);
}

.hex-cell-target {
    backdrop-filter: saturate(150%);
}

/* The move is in flight: a second tap on the same tile would run it twice on
   the server while the browser only renders the last response. The Stimulus
   guard swallows those clicks, but taking the links out of reach means an
   impatient double tap never starts one. */
.hex-cell-target a {
    pointer-events: none;
}

.hex-cell-loading {
    backdrop-filter: grayscale(1);
}