/* Our frames: Style.Shell, the angled ends and unit frames (Style.lua, UnitFrames). */

/* ---- Style.Shell: outline, warm band with its lit line, inner line, bevel, background, shadow ---- */
.shell { position: relative; --t: 8px; --r: 6px; }
.shell > .sh { position: absolute; inset: 0; pointer-events: none; border-radius: var(--r); }
.shell > .sh.o { border: 1px solid var(--border); box-shadow: 0 0 4px 1px var(--shadow); }
.shell > .sh.b { inset: 1px; border: calc(var(--t) - 2px) solid var(--band); border-radius: calc(var(--r) - 1px); }
.shell > .sh.b::before { content: ""; position: absolute; left: 0; right: 0; top: calc(2px - var(--t)); height: 1px; background: var(--band-lit); }
.shell > .sh.k { inset: calc(var(--t) - 1px); border: 1px solid var(--border); border-radius: max(0px, calc(var(--r) - var(--t) + 1px)); }
.shell > .sh.bg {
  inset: var(--t); border-radius: max(0px, calc(var(--r) - var(--t))); background: var(--bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.shell.window > .sh.bg { background: var(--bg-window); }
.shell.window > .accentline { position: absolute; z-index: 2; left: 6px; right: 6px; top: 2px; height: 2px; background: var(--accent); opacity: 0.7; pointer-events: none; }
.shell.flat { --t: 1px; }
.shell.flat > .sh.b { display: none; }
.shell.noband > .sh.b { display: none; }
.shell > .in { position: absolute; inset: var(--t); }

/* angled end: every layer solid and cut on its own line (js/frames.js sets the polygons) */
.shell.solid > .sh.o { background: var(--border); box-shadow: none; }
.shell.solid > .sh.b { border: 0; background: var(--band); }
.shell.solid > .sh.b::before { top: 0; }
.shell.solid > .sh.k { inset: calc(var(--t) - 1px); border: 0; background: var(--border); border-radius: max(0px, calc(var(--r) - var(--t) + 1px)); }
.shell.slant-r > .sh { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.shell.slant-l > .sh { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---- unit frames (187 x 43, power 11 inside, 2 px separator, name in a 16 px tab) ---- */
.uf { position: absolute; font-family: var(--font-game); }
.uf .hp { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; }
.uf .hp .back { position: absolute; inset: 0; opacity: 0.8; }
.uf .fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--v, 100%); transition: width 0.35s var(--ease-expo); }
@media (prefers-reduced-motion: reduce) { .uf .fill { transition: none; } }
.uf .fill.rev { left: auto; right: 0; }
.uf .sep { position: absolute; left: 0; right: 0; height: 2px; background: rgba(6, 6, 7, 0.9); z-index: 1; }
.uf .pwback { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(16, 32, 70, 0.8); }
.uf .pw { position: absolute; bottom: 0; left: 0; background: linear-gradient(90deg, #1c3f8a, #4f8dff); }
.uf .pw.rev { left: auto; right: 0; background: linear-gradient(270deg, #1c3f8a, #4f8dff); }
.uf .big { position: absolute; z-index: 2; right: 10px; top: -5px; font: 600 20px var(--font-game); color: var(--ink-value); text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.6), 0 0 2px #000; white-space: nowrap; }
.uf.mirror .big { right: auto; left: 10px; }
.uf .pct { position: absolute; z-index: 2; left: 8px; top: 1px; font: 600 11px var(--font-game); color: var(--ink-value); text-shadow: 0 0 2px #000; }
.uf.mirror .pct { left: auto; right: 8px; }
.uf .tab { position: absolute; left: 50%; top: -16px; height: 16px; transform: translateX(-50%); padding: 0 10px; --t: 4px; --r: 4px; z-index: 1; display: flex; align-items: center; }
.uf .tab .nm { position: relative; z-index: 1; font: 600 12px/16px var(--font-game); color: var(--ink-value); white-space: nowrap; text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.6); }

/* ---- the screen ---- */
.screen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #1f2c1d;
  box-shadow: 0 0 0 1px var(--line), 0 50px 100px -30px rgba(0, 0, 0, 0.7), 0 0 120px -50px var(--hi); }
.screen > img.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen .veil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity var(--normal) var(--ease); }
.screen.focus .veil { opacity: 1; }
.screen .zone { position: absolute; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 4px; -webkit-tap-highlight-color: transparent; }
.screen .zone::after { content: ""; position: absolute; inset: -3px; border-radius: 6px; padding: 2px; background: var(--accent); opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: 0 0 18px color-mix(in srgb, var(--lo) 60%, transparent); transition: opacity var(--normal) var(--ease); }
.screen .zone.lit::after, .screen .zone:focus-visible::after { opacity: 1; }
.screen .zone:focus-visible { outline: none; }
.screen .tip { position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; white-space: nowrap; z-index: 5;
  transition: opacity var(--open) var(--ease-sine), transform var(--open) var(--ease); }
.screen .tip > .in { position: relative; inset: auto; margin: var(--t); padding: 9px 16px; font: 14px var(--font-body); color: var(--ink-text); }
.screen .tip b { color: var(--ink-value); font-weight: 600; }
.screen.focus .tip { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 600px) {
  .screen .tip { bottom: 8px; white-space: normal; width: max-content; max-width: calc(100% - 16px); text-align: center; }
  .screen .tip > .in { padding: 6px 10px; font-size: 12px; line-height: 1.35; }
}
/* on touch, every piece gets at least a 28 px hit area around its middle */
@media (hover: none) {
  .screen .zone::before { content: ""; position: absolute; top: min(0px, calc((100% - 28px) / 2)); bottom: min(0px, calc((100% - 28px) / 2)); left: min(0px, calc((100% - 28px) / 2)); right: min(0px, calc((100% - 28px) / 2)); }
}