/* The game screen at the Huntica design's places (ARC-DEC-070 items 6 and 7): the game area is the container less a
   236 px right column, every floating panel sits 12 px from the area's edges, and below 1395 x 772 px the screen stops
   shrinking and the container scrolls. Game only (ARC-DEC-067) shows the world over the whole container. */
.release-screen { overflow: auto; }
#release-thais:not([data-step="OFF"]) { min-width: 1395px; min-height: 772px; justify-content: flex-end; align-items: center; padding: 12px 248px 110px 12px; }
.release-screen #release-thais-stage { container-type: size; }
#release-thais:not([data-step="OFF"]) > #release-thais-stage { right: 236px; }
.release-screen[data-game-only] > #release-thais { min-width: 0; min-height: 0; }
.release-screen[data-game-only] > #release-thais > #release-thais-stage { right: 0; }
/* Thais's own lines stand at the foot of the area, where the design writes its placeholder; its title is for assistive
   technology only. */
#release-thais > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#release-thais > p, #release-thais-report { box-sizing: border-box; max-width: 380px; margin: 0; padding: 4px 8px; font: 11px/1.5 Verdana, Tahoma, "DejaVu Sans", sans-serif; text-align: center; color: #c8ccd8; }
#release-thais > p { background: rgba(12, 17, 33, 0.85); }
#release-thais-report h3 { margin: 4px 0; color: #f0cf6a; font: 600 16px Georgia, serif; }
#release-thais-report > * { margin: 4px 0; padding: 0; list-style: none; }
#release-thais-hunt, #release-thais-bot { position: absolute; z-index: 5; left: calc((100% - 236px) / 2); top: 50%; transform: translate(-50%, -50%); max-height: calc(100% - 24px); }
#release-game { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#release-game > * { position: absolute; pointer-events: auto; }
#release-thais > #release-chat { left: 12px; bottom: 12px; z-index: 2; width: 380px; height: 290px; }
#release-thais > #release-chat:has([aria-expanded="false"]) { height: auto; }
#release-chat .tb-chat { box-sizing: border-box; width: 100%; height: 100%; }
#release-chat .tb-chat-body { flex: 1; min-height: 0; }
#release-chat .tb-chat-log { flex: 1; height: auto; min-height: 0; }
/* The panels: Status top left, the toolbar centred on the area, the column, the line that says why a control is locked
   under the toolbar, and Skills at the right of the area 100 px down. */
#release-game > .release-hud { left: 12px; top: 12px; box-sizing: border-box; width: 400px; height: 132px; }
#release-game > .hx-toolbar { top: 12px; left: calc((100% - 236px) / 2); transform: translateX(-50%); flex-direction: row; gap: 3px; padding: 5px; }
#release-game > .hx-side { top: 0; right: 0; bottom: 0; box-sizing: border-box; width: 236px; padding: 6px; gap: 8px; align-items: center; }
#release-game > .release-hud-said { top: 56px; left: calc((100% - 236px) / 2); transform: translateX(-50%); max-width: 560px; padding: 4px 8px; color: #ff9c8f; background: #0c1121; box-shadow: inset 1px 1px 0 #000, 0 0 0 1px #34406c; }
#release-game > .release-hud-said:empty { padding: 0; background: none; box-shadow: none; }
#release-game > .tb-skills-window { right: 248px; top: 100px; }
/* The top-right cluster: the rates, the gold, Discord, Suporte and STORE over the tool window, right-aligned. */
#release-game > .hx-cluster { top: 12px; right: 248px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hx-row { display: flex; align-items: center; gap: 4px; }
#release-game .hx-tools { flex-direction: row; gap: 3px; padding: 4px; }
.tb-hud-stats { display: flex; align-items: center; gap: 12px; }
.hx-slot { display: contents; }
.hx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; }
/* The column's minimap (222 x 214) and Equipamento (220 x 340), its version at the foot, and the hotbar centred at the
   area's foot. The map's 20 px tools and the stances' 26 x 22 grow to the 24 px target (ARC-DEC-070 item 6). */
#release-game .hx-minimap { box-sizing: border-box; width: 100%; height: 214px; flex: none; }
#release-game .hx-minimap .tb-bar > h2 { letter-spacing: 2px; text-transform: uppercase; }
.hx-map-row { flex: 1; display: flex; gap: 4px; padding: 6px; }
.hx-map { flex: 1; display: grid; place-items: center; padding: 8px; text-align: center; font-size: 10px; color: #a8a8a8; }
.hx-map > p { margin: 0; }
.hx-map-tools { display: flex; flex-direction: column; gap: 4px; }
#release-game .hx-equipment { box-sizing: border-box; width: 220px; height: 340px; flex: none; align-items: center; gap: 10px; }
#release-game .hx-equipment > .tb-bar { align-self: stretch; }
.hx-eq-grid { display: grid; grid-template-columns: repeat(3, 42px); gap: 6px; margin-top: 2px; }
#release-game .hx-eq { width: 42px; height: 42px; color: #555; background: #0a0e1b; box-shadow: inset 1px 1px 0 #000, 0 0 0 1px #7a6020; }
.hx-cap { margin: 0; color: #f0cf6a; font: 600 16px Georgia, serif; }
.hx-stances { display: flex; justify-content: center; gap: 4px; align-self: stretch; margin: 0 10px; padding-top: 8px; border-top: 1px solid #0a0e1c; box-shadow: inset 0 1px 0 #3d4a78; }
.hx-col-version { margin: auto 0 1px; font-size: 10px; color: #a8a8a8; }
#release-game > .hx-hotbar { bottom: 12px; left: calc((100% - 236px) / 2); transform: translateX(-50%); flex-direction: row; gap: 4px; padding: 5px; }
#release-thais #release-game .hx-hotbar > .hx-hot { position: relative; width: 40px; height: 40px; padding: 0; color: #7c8299; background: #1b2140; box-shadow: inset 1px 1px 0 #2c3660, inset -1px -1px 0 #10162f; }
.hx-hot > span { position: absolute; top: 1px; right: 3px; font-size: 9px; font-weight: bold; }
/* The Huntica theme over the layout's classes: blue buttons with gold glyphs in the game screen and its windows. */
#release-screen :is(#release-thais, .tb-options, #release-hunt-controls) button, #release-screen > .tb-options-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 24px;
  min-height: 24px;
  padding: 0 12px;
  font: 11px Verdana, Tahoma, "DejaVu Sans", sans-serif;
  color: #e6e8f0;
  background: #253060;
  border: 1px solid #05070d;
  box-shadow: inset 1px 1px 0 #5468a8, inset -1px -1px 0 #10162f;
  cursor: pointer;
}
#release-screen :is(#release-thais, .tb-options, #release-hunt-controls) button:hover { color: #fff; background: #2e3a70; }
#release-screen :is(#release-thais, .tb-options, #release-hunt-controls) button.icon { width: 26px; height: 26px; padding: 0; color: #f0cf6a; background: #253262; box-shadow: inset 1px 1px 0 #5a70b8, inset -1px -1px 0 #0f1734; }
#release-thais #release-game .hx-toolbar button { min-width: 76px; min-height: 26px; }
#release-thais #release-game .hx-toolbar > .hx-slot:first-child > button { min-width: 84px; font-weight: bold; }
#release-screen :is(#release-thais, .tb-options, #release-hunt-controls) button[aria-expanded="true"] { color: #f0cf6a; background: #10162c; box-shadow: inset 1px 1px 0 #05070d, inset -1px -1px 0 #3c4a7c; outline: 1px solid #b8902c; outline-offset: -3px; }
#release-screen :is(#release-thais, .tb-options, #release-hunt-controls) :is(button[aria-disabled="true"], button:disabled) { cursor: default; color: #7c8299; background: #1b2140; box-shadow: inset 1px 1px 0 #2c3660, inset -1px -1px 0 #10162f; }
/* The cluster's sunk readouts, the locked gold STORE and the Status panel's stats, whose 24 px targets keep the row 13 px tall. */
#release-thais #release-game .hx-row > .hx-sunk { box-sizing: border-box; height: 24px; padding: 0 9px; gap: 5px; font-size: 10px; color: #f2f2f2; background: #0c1121; border: 1px solid #05070d; box-shadow: inset 1px 1px 0 #000, 0 0 0 1px #34406c; }
.hx-gold { display: inline-flex; align-items: center; font-weight: bold; }
#release-thais #release-game .hx-row > .hx-store { min-height: 26px; padding: 0 12px; gap: 7px; letter-spacing: 1px; font-weight: bold; color: #2a2210; background: #5e5232; box-shadow: inset 1px 1px 0 #7a6a3e, inset -1px -1px 0 #3a3018; }
#release-thais #release-game .tb-hud-stats > .hx-stat { min-width: 24px; min-height: 24px; margin: -5.5px 0; padding: 0; color: #7c8299; background: none; border: 0; box-shadow: none; }
#release-screen :is(#release-thais, .tb-options, #release-hunt-controls) :focus-visible { outline: 1px dotted #f0f0f0; outline-offset: -4px; }
#release-game .tb-hud-name > h3 { color: #f0cf6a; font: 600 17px Georgia, serif; }
#release-game .tb-portrait { background: #0a0e1b; border-color: #05070d; box-shadow: inset 1px 1px 0 #000, 0 0 0 1px #7a6020; }
#release-game .tb-level { color: #1a1306; background: #c9a23a; border-color: #05070d; box-shadow: inset 1px 1px 0 #f6dc84; }
#release-game .tb-gauge { background: #070a14; border-color: #05070d; box-shadow: 0 0 0 1px #6b5418; }
/* The game area wears the login's scene (./huntica.css) with the design's lighter vignette and glow. */
#release-thais:not([data-step="OFF"]) > #release-thais-stage { --hx-vignette-from: 35%; --hx-vignette: 0.65; --hx-glow: 0.22; }
/* The options menu: its own button shows only while the column, which holds Opções, does not; the hunt's header sits
   under that button. */
.release-screen:has(> #release-thais:not([data-step="OFF"])):not([data-game-only]) > .tb-options-open { display: none; }
.release-screen:has(> #release-thais:not([data-step="OFF"])):not([data-game-only]) > .tb-options { top: 100px; right: 248px; }
.release-screen > #release-hunt { padding-top: 40px; }
.release-screen > #release-hunt > * { max-width: 100%; overflow-wrap: anywhere; }
/* The hunt's status line, returns, watch controls and log (./play.mjs) at the top of the hunt's column, legible over the world. */
#release-hunt-controls { box-sizing: border-box; width: min(28rem, 100%); display: grid; gap: 6px; padding: 6px 8px; color: #c8ccd8; background: rgba(12, 17, 33, 0.85); font: 11px/1.5 Verdana, sans-serif; }
#release-hunt-controls:empty { display: none; }
#release-hunt-controls :is(p, ol) { margin: 0; }
#release-hunt-controls > div { display: flex; flex-wrap: wrap; gap: 6px; }
#release-hunt-controls [data-tone="bad"] { color: #ff9c8f; }

/* The windows over the game area wear the Huntica theme too (ARC-DEC-070 item 1): Skills, the chat, the Bot window, the
   Hunt dialog, the options menu and the report, over the layout classes of ./tibia-ui.css, in the window skin of
   ./huntica.css. The dim behind the Bot window is only drawn: a click passes through it (item 6). */
#release-screen .tb-win, #release-thais-hunt, #release-thais-report { color: #c8ccd8; }
#release-screen .tb-bar { min-height: 26px; background: #1b2c66; border: 1px solid #05070d; border-bottom-color: #b8902c; box-shadow: inset 0 1px 0 #4560b0, inset 0 -1px 0 #0d1533; }
#release-screen .tb-bar > :is(h2, h3), #release-thais-hunt > h3 { color: #f0cf6a; font: 600 16px Georgia, serif; letter-spacing: 0.4px; }
#release-screen .tb-sunk { background: #0c1121; border-color: #05070d; box-shadow: inset 1px 1px 0 #000, 0 0 0 1px #34406c; }
#release-screen .tb-grp { border: 1px solid #0a0e1c; box-shadow: 1px 1px 0 #3d4a78, inset 1px 1px 0 #3d4a78; }
#release-screen .tb-grp > legend { color: #f0cf6a; font: 600 15px Georgia, serif; letter-spacing: 0.3px; }
#release-screen .tb-bot-panel { background: #161d38; border-color: #05070d; box-shadow: inset 1px 1px 0 #3d4a78, inset -1px -1px 0 #0a0e1c; }
#release-screen .tb-tile { background: #212a50; border-color: #05070d; box-shadow: inset 1px 1px 0 #3d4a78, inset -1px -1px 0 #0a0e1c; }
#release-screen .tb-foot, #release-screen .tb-skills hr { border-top: 1px solid #0a0e1c; box-shadow: inset 0 1px 0 #3d4a78; }
#release-screen .tb .warn { color: #ff9c8f; }
#release-screen .tb-gauge.skill { height: 4px; background: #070a14; box-shadow: 0 0 0 1px #2f3a62; }
#release-screen #release-thais-bot :is(select, input[type="text"]) { color: #f0f0f0; background: #0a0e1b; border: 1px solid #05070d; box-shadow: 0 0 0 1px #34406c; }
/* Tabs: the shown one gold on the panel's blue, merged into it; the others raised blue, at least 24 px tall. */
#release-screen #release-thais button.tb-tab { min-height: 24px; padding: 0 10px; color: #c8ccd8; background: #202a52; border-bottom: none; box-shadow: inset 1px 1px 0 #4a5c9c; }
#release-screen #release-thais button.tb-tab[aria-selected="true"] { min-height: 26px; color: #f0cf6a; font-weight: bold; background: #161d38; box-shadow: inset 1px 1px 0 #e0bd5c; }
#release-screen #release-chat button.tb-tab[aria-selected="true"] { background: #0c1121; }
/* The design's sizes: Skills 300 x 660, the Bot window 900 x 660, both inside the area. */
#release-game > .tb-skills-window { box-sizing: border-box; height: 660px; max-height: calc(100% - 112px); }
#release-thais > #release-thais-bot { box-sizing: border-box; height: 660px; max-height: calc(100% - 24px); display: flex; flex-direction: column; overflow: hidden; }
#release-thais-bot > div:not(.tb-bar, .tb-foot) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#release-thais-bot .tb-bot-panel { flex: 1; min-height: 0; overflow: auto; }
.release-screen:not([data-game-only]) > #release-thais:has(> #release-thais-bot:not([hidden]))::before { content: ""; position: absolute; inset: 0 236px 0 0; z-index: 4; background: rgba(0, 0, 0, 0.35); pointer-events: none; }
#release-thais-hunt { padding: 10px 14px; font: 11px/1.5 Verdana, Tahoma, "DejaVu Sans", sans-serif; }
#release-thais-hunt ul { margin: 0; padding-left: 18px; }
/* A phone (REQ-DEC-004, ARC-DEC-071 item 6). */
@container (max-width: 700px) and (max-aspect-ratio: 1 / 1), (max-height: 500px) and (min-aspect-ratio: 1 / 1) {
  #release-thais, #release-thais:not([data-step="OFF"]) { min-width: 0; min-height: 0; justify-content: flex-start; align-items: stretch; padding: 0 0 8px; }
  #release-thais > #release-game { position: static; order: -1; display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
  #release-thais > #release-game > * { position: static; transform: none; max-width: none; }
  #release-thais > #release-game > :is(.release-hud, .hx-side, .tb-skills-window) { width: auto; height: auto; max-height: none; }
  #release-thais > #release-game > :is(.hx-toolbar, .hx-hotbar) { flex-wrap: wrap; justify-content: center; }
  #release-thais > #release-game > .hx-cluster { align-items: stretch; }
  #release-thais > :is(p, #release-thais-report) { max-width: none; margin: 0 8px; }
  #release-thais > #release-chat { position: static; flex: none; width: auto; height: 240px; margin: 0 8px; }
  #release-thais-hunt, #release-thais-bot { left: 50%; width: calc(100% - 16px); }
  .release-screen:not([data-game-only]) > #release-thais:has(> #release-thais-bot:not([hidden]))::before { inset: 0; }
  .release-screen:not([data-game-only]):has(> #release-hunt:not([hidden])) > #release-thais > #release-thais-stage { right: auto; }
  .release-screen > #release-hunt { width: auto; align-items: stretch; padding-top: 8px; }
}
@container (max-width: 700px) and (max-aspect-ratio: 1 / 1) {
  .release-screen > * { --world-height: calc(100cqw * 352 / 480); }
  #release-thais > #release-thais-stage, #release-thais:not([data-step="OFF"]) > #release-thais-stage { position: relative; inset: auto; flex: none; order: -2; height: var(--world-height); }
  .release-screen > #release-hunt { top: var(--world-height); left: 0; }
}
@container (max-height: 500px) and (min-aspect-ratio: 1 / 1) {
  .release-screen > * { --world-width: calc(100cqh * 480 / 352); }
  #release-thais, #release-thais:not([data-step="OFF"]) { padding: 8px 0 8px var(--world-width); }
  #release-thais > #release-thais-stage, #release-thais:not([data-step="OFF"]) > #release-thais-stage { position: fixed; inset: 0 auto 0 0; width: var(--world-width); }
  .release-screen > #release-hunt { left: var(--world-width); }
}