/* docs/23 phases 7–8: the first quarter of an hour and the feel on a phone held sideways — the First Watch's finger,
   the optional things kept shut, the sea's news out of a fight's field, and the screen's notches and gesture bar.
   Its own sheet beside styles.css (the windows' sheets are phase 6's). */

/* ---- the finger (client/src/ui/pointer.ts, docs/23 item 80): a hand drawn in code over the button the step wants */
#tut-finger { position: fixed; left: 0; top: 0; width: 44px; height: 44px; z-index: 2147483000; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75)); will-change: transform; }
#tut-finger.hidden { display: none; }
#tut-finger .tf-hand { display: block; width: 100%; height: 100%; rotate: 180deg; animation: tf-bob 900ms cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
#tut-finger.up .tf-hand { rotate: 0deg; animation-name: tf-bob-up; }
#tut-finger.right .tf-hand { rotate: 90deg; animation-name: tf-bob-right; }
@keyframes tf-bob { from { translate: 0 -6px; } to { translate: 0 1px; } }
@keyframes tf-bob-up { from { translate: 0 6px; } to { translate: 0 -1px; } }
@keyframes tf-bob-right { from { translate: -6px 0; } to { translate: 1px 0; } }
/* The button itself ringed in gold (an outline: it follows the round buttons and moves nothing). */
.tut-target { outline: 2px solid var(--gold, #e0b862); outline-offset: 3px; animation: tut-ring 1400ms ease-in-out infinite; }
@keyframes tut-ring { 50% { outline-color: rgba(224, 184, 98, 0.3); outline-offset: 6px; } }
body.reduce-motion #tut-finger .tf-hand, body.reduce-motion .tut-target { animation: none; }
@media (prefers-reduced-motion: reduce) { #tut-finger .tf-hand, .tut-target { animation: none; } }

/* ---- the step: its title and one short line (docs/23 item 79) — on a short screen one low row as wide as its words
   (it was a 600 px plate across the top band, a tenth of the screen): «3/5 Огонь! Нажмите «Огонь».» and the skips. */
#hud-watch .w-body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-watch .w-t { font-style: normal; }
#hud-watch .w-short { display: none; }
/* A desk's lesson in two rows: the count and the step's name, then its line beside the two short skips (three rows took
   95 px of the top band and pushed the toasts under it 25 px into the middle of a 1500×600 sea, QA 2026-10-09). */
@media (min-height: 521px) {
  #hud-watch:not(.hidden) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  #hud-watch .w-head { flex: 1 1 100%; }
  #hud-watch .w-body { flex: 1 1 0; min-width: 0; }
  #hud-watch .w-act { flex: none; margin-top: 0; }
  #hud-watch .w-long { display: none; }
  #hud-watch .w-short { display: inline; }
}
@media (max-height: 520px) {
  #hud-watch:not(.hidden) { flex-wrap: nowrap; justify-self: start; align-self: flex-start; padding: 3px 4px 3px 8px; }
  /* (the stack's children are all stretched to its width with !important, styles.css #hud #hud-stack > *) */
  #hud #hud-stack > #hud-watch:not(.hidden) { width: max-content !important; max-width: 100% !important; }
  #hud-watch .w-head { flex: none; margin-bottom: 0; }
  #hud-watch .w-head span { letter-spacing: 0.06em; }
  #hud-watch .w-body { flex: 0 1 auto; order: 0; min-width: 0; color: var(--fog, #b9b2a2); }
  #hud-watch .w-act { margin: 0 0 0 4px; gap: 4px; }
  #hud-watch .w-act .btn { height: 22px; padding: 0 6px; font-size: 10.5px; }
  #hud-watch .w-t, #hud-watch .w-long { display: none; }
  #hud-watch .w-short { display: inline; }
  /* A finger: the step's title and the finger over the button say it — the line «Нажмите «Атаковать».» was cut to
     «Нажмит…» between the title and the skips (73 of 134 px missing at 812×375, QA 2026-10-09). The skips reach a
     finger's 44 px past their 22 px plates. */
  body.touch #hud-watch .w-body { display: none; }
  body.touch #hud-watch .w-act .btn::after { inset: -11px -3px; }
}

/* In the First Watch the counter of news and goals keeps away: the lesson's row stood under it (the counter at 172 px
   from the left, the row from 55 px while the captain's plate is not yet in, QA 2026-10-07), and the watch is the news. */
body.touch:has(#hud-watch:not(.hidden)) #touch > .tc-news { display: none !important; }

/* The lesson steps aside while the decks fight: the hexes are the step («На абордаж… и победите»), and the battle's own
   top band and its end band are the screen's (with it the end stood at 21.7 % of a 812×375 screen). */
body.tac #hud-watch, body.boarding #hud-watch { display: none !important; }

/* ---- the first quarter of an hour (docs/23 item 83): tattoos, dice, the auction, the guilds open after it */
body.lock-dice .dice-card,
body.lock-auction .au-card, body.lock-auction #k-kind option[value="auction"],
/* The phase 6 windows (docs/23 items 65, 74): the harbour's second row and the Journal's rail. */
body.lock-tattoos [data-ptab="tattoo"], body.lock-dice [data-ptab="dice"], body.lock-auction [data-ptab="auction"],
body.lock-guilds [data-jtab="guild"],
/* …and the Journal's «Тату» chip (docs/23 item 94: the lock missed it). */
body.lock-tattoos [data-jchip="tattoos"] { display: none !important; }

/* ---- a fight on the screen (QA of phase 5): what the battle says stands in its top band, never over the field —
   at 640×360 the desk's band beside the round (50% + 136 px, as wide as 50% − 398 px) had no width left. */
@media (max-width: 1099px), (max-height: 520px) {
  body.tac #toasts { top: calc(var(--sa-t) + 8px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
    width: min(56vw, 340px); height: 44px; flex-flow: column wrap; }
}

/* ---- the fast start (docs/23 item 88): «Продолжить: <имя>» over the guest's form — one tap, no name to type */
.login-panel #login-continue { display: block; width: 100%; min-height: 48px; margin: 0 0 14px; font-size: 16px; }
.login-panel #login-continue.hidden { display: none; }

/* ---- the screen's notch and gesture bar (docs/23 item 89): a window on a phone fills the safe part of the screen and
   leaves the notch's side, the camera's side and the gesture bar to the dark behind it (its buttons stood 16–33 px into
   the 47 px of a notch, tools/mobile/safearea.mjs). The window's own layout is untouched. */
@media (max-width: 699px), (max-height: 520px) {
  #modal { padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); box-sizing: border-box; }
  /* 90% of the screen, the sheet's own height (window.css, docs/23 item 65): its scrim above to tap away, its grip in
     sight — the safe part of the screen only when that is less (this rule, later and as specific, had made every
     window full height, docs/23 item 94). */
  #modal-panel { width: calc(100vw - var(--sa-l) - var(--sa-r)); height: min(90dvh, calc(100dvh - var(--sa-t) - var(--sa-b))); }
}

/* ---- a ship striking her colours on a phone (docs/23 item 97): the terms in the bottom band between the wheel and the
   round buttons, not squeezed into the corner left of the toasts (its four choices were 34 px wide, «Отп за вык») —
   the title and how near she lies in one line, the four choices and «Позже» in one row of finger-high buttons. The
   top stack and the captain's plate stay where they are. */
@media (max-width: 1099px), (max-height: 520px) {
  /* (owner's QA list, 2026-10-08: 3 px from the helm's speed arc at 812×375, and laid over «Атаковать» — now 15 px
     clear of the arc, and the attack button waits while her terms are up: the terms are the act, «Позже» brings it back) */
  body.touch #surrender { top: auto; bottom: calc(var(--sa-b) + 8px); left: calc(var(--sa-l) + var(--stick) + 34px); right: auto; transform: none;
    width: min(460px, calc(100vw - var(--sa-l) - var(--sa-r) - var(--stick) - 206px)); min-width: 0; }
  body.touch:has(#surrender:not(.hidden)) #tc-act { visibility: hidden; }
  body.touch:has(#surrender:not(.hidden)) #hud-captain, body.touch:has(#surrender:not(.hidden)) #hud-stack { visibility: visible; }
  body.touch #surrender .enc-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 4px; padding: 5px 6px 6px; align-items: stretch; }
  body.touch #surrender .sur-head { grid-column: 1 / 4; grid-row: 1; min-width: 0; }
  body.touch #surrender .enc-h { font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  body.touch #surrender .enc-h .ico-md, body.touch #surrender .sur-ship, body.touch #surrender .sur-sub, body.touch #surrender .enc-text, body.touch #surrender .sur-left { display: none; }
  body.touch #surrender .sur-foot { display: contents; }
  body.touch #surrender .sur-dist { grid-column: 4 / -1; grid-row: 1; justify-self: end; align-self: center; margin: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body.touch #surrender .sur-choices { display: contents; }
  body.touch #surrender .sur-choice { grid-row: 2; min-height: 44px; padding: 2px 4px; justify-content: center; text-align: center; }
  body.touch #surrender .sur-choice .choice-ico, body.touch #surrender .sur-choice small { display: none; }
  body.touch #surrender .sur-choice b { font-size: 11px; line-height: 1.15; white-space: normal; }
  body.touch #surrender .sur-foot .btn { grid-column: 5; grid-row: 2; min-height: 44px; margin: 0; padding: 2px 8px; align-self: stretch; }
}