/* Elemental Planes: the door hub, sigils, plane entry with its totem, and
   farming combat. Values come from the Canvas plane screens. */

/* ---------- hub (Canvas Planes) ---------- */
.planes-hub { background: #251a29; }
/* The picture, doors and labels share one frame with the picture's shape (390 x 693),
   so the doors and labels stay on the art at any phone width. */
.hub-frame { position: absolute; left: 0; right: 0; top: var(--safe-top); aspect-ratio: 390 / 693; }
.hub-art { position: absolute; inset: 0; background: center top / 100% 100% no-repeat; }
.hub-fade { position: absolute; left: 0; right: 0; top: 80.8%; height: 22%; background: linear-gradient(to bottom, rgba(37, 26, 41, 0), #251a29); }
.hub-halo { top: calc(22px + var(--safe-top)); height: 110px; }
.hub-title { top: calc(60px + var(--safe-top)); font-size: min(36px, 9vw); }
.planes-hub .door, .planes-hub .plaque { position: absolute; }
.door { border-radius: 46px 46px 6px 6px; transition: box-shadow .15s ease, background .15s ease; }
@keyframes doorGlow { 0%, 100% { background: rgba(255, 255, 255, .02); box-shadow: 0 0 8px 0 var(--glow); } 50% { background: rgba(255, 255, 255, .1); box-shadow: 0 0 30px 6px var(--glow); } }
.door-alert { animation: doorGlow 1.25s ease-in-out infinite; }
.reduce-motion .door-alert { animation: none; box-shadow: 0 0 24px 4px var(--glow); }
.door:hover { background: rgba(255, 255, 255, .08); box-shadow: 0 0 22px 2px var(--glow); }
.plaque {
  padding: 8px 4px; border: 1px solid; border-radius: 12px; background: rgba(10, 14, 36, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  text-align: center; text-decoration: none; font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: 1.5px; color: var(--cream); text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  min-height: 44px; display: flex; align-items: center; justify-content: center; transition: box-shadow .15s ease, transform .15s ease;
}
.plaque:hover { box-shadow: 0 0 18px var(--glow); transform: translateY(-1px); }

/* ---------- sigil doors (Canvas SigilFire / SigilEarth) ---------- */
.sigil-aura { position: absolute; left: 0; right: 0; top: calc(150px + var(--safe-top)); height: 420px; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--glow), .22), rgba(var(--glow), 0)); }
.sigil-title { font-size: min(40px, 10vw); text-shadow: 0 0 18px rgba(var(--glow), .9), 0 2px 6px rgba(0, 0, 0, .85); }
.sigil-sub { position: absolute; top: calc(130px + var(--safe-top)); left: 40px; right: 40px; margin: 0; text-align: center; font-size: calc(17px * var(--ts)); line-height: 1.35; color: var(--muted); }
.sigil-card { position: absolute; left: 16px; right: 16px; top: calc(196px + var(--safe-top)); padding: 14px; display: flex; justify-content: center; border: 1px solid rgba(201, 161, 90, .4); border-radius: 16px; background: linear-gradient(160deg, #1d1840, #2b2456); transition: box-shadow .4s; }
.sigil-card.sigil-open { box-shadow: 0 0 30px rgba(var(--glow), .8); }
.sigil-box { position: relative; width: min(328px, calc(100vw - 64px), 40vh); aspect-ratio: 1 / 1; border-radius: 12px; background: rgba(16, 13, 36, .5); overflow: hidden; }
.sigil-icon { position: absolute; object-fit: contain; opacity: .2; transition: opacity .6s ease; pointer-events: none; }
.sigil-open .sigil-icon { opacity: 1; filter: drop-shadow(0 0 10px rgba(var(--glow), .9)); }
.sigil-pad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sigil-guide { fill: none; stroke: rgba(236, 205, 142, .55); stroke-width: 2; stroke-dasharray: 6 8; stroke-linejoin: round; pointer-events: none; }
.sigil-ink { fill: none; stroke: rgb(var(--glow)); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; filter: drop-shadow(0 0 3px rgb(var(--glow))); }
.sigil-msg, .sigil-hint { position: absolute; left: 24px; right: 24px; bottom: calc(196px + var(--safe-bottom)); margin: 0; text-align: center; line-height: 1.35; }
.sigil-msg { font-family: var(--f-display); font-size: 15px; color: #9089ad; }
.sigil-msg.ok { color: var(--gold-soft); }
.sigil-hint { font-style: italic; font-size: 16px; color: #9089ad; }
.sigil-controls { position: absolute; left: 16px; right: 16px; bottom: calc(136px + var(--safe-bottom)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
.sigil-controls .btn { padding: 0 8px; }
.sigil-step { position: absolute; left: 16px; right: 16px; bottom: calc(136px + var(--safe-bottom)); width: auto; border-color: rgb(var(--glow)); box-shadow: 0 0 18px rgba(var(--glow), .6); }

/* ---------- plane entry (Canvas Main / Earth) ---------- */
.plane-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 360px; background: linear-gradient(to top, rgba(var(--shade), .55), rgba(var(--shade), 0)); }
.plane-title { color: var(--cream); }
.gather-btn {
  position: absolute; left: 50%; margin-left: -140px; width: 280px; top: calc(252px + var(--safe-top)); z-index: 5; overflow: hidden; text-decoration: none;
  border: 2px solid; border-radius: 14px; background: rgba(24, 8, 4, .88); box-shadow: 0 0 20px rgba(255, 120, 30, .45), 0 6px 20px rgba(0, 0, 0, .6);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gather-btn:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(255, 140, 40, .65), 0 8px 24px rgba(0, 0, 0, .6); }
.gather-art { height: min(150px, 18vh); background: center / cover no-repeat; }
.gather-label { padding: 14px 16px; text-align: center; font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: 2px; color: var(--cream); }
@keyframes totemBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 1.045); } }
.totem-btn { position: absolute; left: 4px; bottom: calc(88px + var(--safe-bottom)); width: 220px; height: min(210px, 26vh); padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 4; transition: transform .15s ease, filter .15s ease; }
.totem-btn:hover { transform: scale(1.04); }
.totem-img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%; animation: totemBreathe 3.6s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); }
.totem-bubble { position: absolute; left: 24px; bottom: calc(304px + var(--safe-bottom)); width: 190px; padding: 12px 14px; border-radius: 14px; background: #fff3d6; color: #2a1208; font-size: 15px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); z-index: 6; }
.totem-bubble::after { content: ''; position: absolute; left: 44px; bottom: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #fff3d6; }
/* Dolphin (Canvas Water): on the right, mirrored to face the centre. */
.totem-btn.totem-right { left: auto; right: 4px; }
.totem-btn.totem-mirror .totem-img { transform-origin: 50% 100%; scale: -1 1; }
.totem-bubble.totem-right { left: auto; right: 24px; }
.totem-bubble.totem-right::after { left: auto; right: 44px; }
.totem-talk .convo { top: calc(200px + var(--safe-top)); bottom: auto; }
.totem-talk .dlg-box { max-height: 34vh; }

/* ---------- farming (Canvas FireCombat option A) ---------- */
.farm-scrim-top { position: absolute; left: 0; right: 0; top: 0; height: 180px; background: linear-gradient(to bottom, rgba(var(--shade), .55), rgba(var(--shade), 0)); }
.farm-scrim-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 330px; background: linear-gradient(to bottom, rgba(var(--shade), 0), rgba(var(--shade), .6)); }
.farm-halo { position: absolute; top: calc(40px + var(--safe-top)); left: 0; right: 0; height: 120px; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--shade), .5), rgba(var(--shade), 0)); }
.farm-title { text-shadow: 0 0 6px rgba(var(--shade), .95), 0 0 16px rgba(var(--shade), .85), 0 2px 4px rgba(0, 0, 0, .9); }
.creature { position: absolute; top: calc(152px + var(--safe-top)); bottom: calc(378px + var(--safe-bottom)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; }
.creature-name { font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: 2px; color: var(--cream); text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 10px rgba(var(--shade), .9); }
.creature-art { width: 280px; max-width: 80%; height: 173px; min-height: 60px; flex: 0 1 auto; }
.creature-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); }
@keyframes hitFlash { 0% { filter: brightness(2.2) drop-shadow(0 0 12px #fff); transform: translateX(-4px); } 40% { transform: translateX(4px); } 100% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); transform: none; } }
.creature-img.hit { animation: hitFlash .35s ease-out; }
.hp-bar, .en-bar { position: relative; width: min(300px, calc(100% - 64px)); border: 1px solid rgba(243, 220, 160, .55); overflow: hidden; background: rgba(10, 6, 4, .6); }
.hp-bar { height: 20px; border-radius: 6px; flex: none; }
.hp-fill { height: 100%; background: linear-gradient(to bottom, #ff6a4a, #c2231a); transition: width .2s ease; }
.bar-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-numbers); font-weight: 800; color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .8); }
.vial-row { position: absolute; left: 16px; right: 16px; bottom: calc(246px + var(--safe-bottom)); height: 118px; display: flex; align-items: center; justify-content: space-around; border: 1px solid rgba(243, 220, 160, .45); border-radius: 16px; background: rgba(10, 14, 36, .66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.vial { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; }
/* Taller than the Canvas (Steve, 2026-10-20: too small on a phone). */
.vial-glass { position: relative; width: 58px; height: 74px; } /* wide enough that the body stays round */
.vial-current .vial-glass { filter: drop-shadow(0 0 5px rgba(255, 233, 168, .95)); }
.vial-back, .vial-fill, .vial-rim { position: absolute; inset: 0; }
.vial-back svg, .vial-fill svg, .vial-rim svg { width: 100%; height: 100%; display: block; }
.vial-fill { transition: clip-path .3s ease; }
/* The element symbol on the vial's body, like a label (Steve, 2026-10-20). */
.vial-icon { position: absolute; left: 50%; top: 69%; width: 30px; height: 30px; transform: translate(-50%, -50%); object-fit: contain; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.vial-count { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--body-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vial-current .vial-count { color: var(--gold); }
.combat-panel { position: absolute; left: 16px; right: 16px; bottom: calc(90px + var(--safe-bottom)); padding: 14px 0 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; border: 1px solid rgba(243, 220, 160, .45); border-radius: 16px; background: rgba(10, 14, 36, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.spell-line { width: min(300px, calc(100% - 64px)); display: flex; align-items: center; gap: 8px; font-family: var(--f-numbers); font-size: 15px; color: var(--parchment); }
.spell-line img { width: 20px; height: 20px; }
.spell-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: .85; }
.spell-dmg { margin-left: auto; font-size: 14px; color: var(--parchment); }
.spell-name { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: 1px; color: var(--cream); }
/* Stripes 10px + 10px at 45 degrees repeat every 28.284px across, so the tile and the scroll use that. */
.en-bar { height: 24px; border-radius: 999px; }
.en-fill { height: 100%; background: linear-gradient(to bottom, #f6e6b0, #c9a24a); }
.en-text { font-size: 14px; text-shadow: 0 0 2px #2b1605, 0 0 2px #2b1605, 0 0 3px #2b1605, 0 1px 3px #2b1605, 0 0 8px #2b1605; }
/* The cast bar is the non-elemental tube (Canvas PlaneCombat, 2026-10-26). */
.tube.cast-tube { width: min(300px, calc(100% - 64px)); }