/*
 * EUCHRE AFTER DARK - the phone cabinet (portrait)
 *
 * app.js adds body.portrait when the window is taller than it is wide and sizes the stage to
 * 600 px wide by 960-1400 px tall, so it fills the width even in Safari with its toolbars showing.
 * The same table elements are rearranged into one tall grid:
 *
 *   menu  speed  logo  jackpot  chat
 *     US     TRUMP     THEM
 *           partner
 *   left     cross     right
 *             you
 *          your hand
 *     turn line / bid buttons
 *
 * The cross's cards take whatever height the other rows leave (app.js sets --tcw / --tch / --tw).
 *
 * Chat moves into a drawer behind the header's chat button. Nothing here uses a filter that
 * changes while things move (see cabinet.css on why that matters).
 */

.phone-only { display: none; }
#safe-probe {
  position: fixed; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ---------- Cabinet ---------- */

body.portrait .bezel { border-width: 22px 20px 26px; }
body.portrait .screen { inset: 18px 16px 22px; border-radius: 14px; }
body.portrait .view { inset: 0; }

/* ---------- Table grid ---------- */

body.portrait #table-screen {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 120px;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "hdr    hdr    hdr"
    "score  score  score"
    "top    top    top"
    "left   cross  right"
    "me     me     me"
    "hand   hand   hand"
    "act    act    act";
  gap: 6px;
  padding: 6px 6px 8px;
}
/* The felt (cabinet.css .table-area, which has no box here) spans the play rows, top seat to your tray. */
body.portrait #table-screen::before {
  content: ""; grid-row: 3 / 7; grid-column: 1 / -1; margin: 0 -2px;
  background: url(../assets/felt-tile.webp) 0 0 / 512px repeat, #1d5a24;
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .55), inset 0 0 24px 4px rgba(0, 0, 0, .55), inset 0 0 60px rgba(0, 0, 0, .3);
}
body.portrait .table-area,
body.portrait .bottom-row,
body.portrait .side,
body.portrait .side-top,
body.portrait .controls { display: contents; }
body.portrait .side-top .round:not(.sound-btn) { display: none; }  /* help, settings, leave live in the Menu */
body.portrait #sound-btn { grid-area: top; justify-self: start; align-self: center; width: 52px; height: 52px; margin-left: 4px; }

/* Header: menu, a small logo, chat (the big logo is for the title screen) */
body.portrait .phone-header {
  grid-area: hdr; display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 2px;
}
body.portrait .phone-logo { height: 62px; max-width: 124px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 85, 68, .45)); }
body.portrait .phone-header .round { width: 58px; height: 58px; position: relative; }
.chat-btn::after {
  /* Blue face over the base button's "?", with the same glossy highlight. */
  content: ""; position: absolute; inset: 20%; border-radius: 50%; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 16%, rgba(255, 255, 255, .6) 0 20%, transparent 42%),
    radial-gradient(circle at 50% 40%, #4a8cff 0%, #1450d8 55%, #0a2f8f 100%);
}
.chat-btn .chat-icon {
  position: absolute; left: 27%; top: 30%; width: 46%; height: 42%; z-index: 2;
  fill: #f6f1e6; stroke: #0b1d4d; stroke-width: 1.4px;
}
.chat-btn .chat-icon circle { fill: #1450d8; stroke: none; }
.chat-btn .badge {
  position: absolute; right: -4px; top: -4px; z-index: 3; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 999px; background: #e3261b; border: 2px solid #fff;
  font: 400 15px/24px var(--display); color: #fff; text-align: center;
}

/* Scoreboard: one panel across the top, trump in the middle between the two teams */
body.portrait .scoreboard {
  grid-area: score; grid-template-columns: 1fr auto 1fr; column-gap: 8px; align-items: center;
  border-width: 8px 14px; padding: 0 2px;
}
body.portrait .scoreboard .team.us { grid-column: 1; grid-row: 1; padding-right: 8px; }
body.portrait .scoreboard .team.them { grid-column: 3; grid-row: 1; border-left: 1px solid rgba(242, 193, 78, .22); padding-left: 8px; }
body.portrait .scoreboard .trump-line {
  grid-column: 2; grid-row: 1; flex-direction: column; justify-content: center; gap: 4px;
  border-top: 0; padding: 0 2px; margin: 0; min-width: 110px;
}
body.portrait .scoreboard .team b { font-size: 26px; line-height: 1; }
body.portrait .scoreboard .names { font-size: 14px; }
body.portrait .scoreboard .pips i { width: 8px; height: 8px; }
body.portrait .scoreboard .trump-line b { font-size: 15px; max-width: 130px; }
body.portrait .scoreboard .trump-line b img { width: 22px; height: 22px; }

/* Speed bonus and jackpot sit in the header, either side of the logo */
body.portrait .readout span, body.portrait .readout b,
body.portrait .readout-clock span, body.portrait .readout-clock b { margin: 0; }
body.portrait .readout-clock {
  grid-area: hdr; justify-self: start; align-self: center; width: 148px; height: 52px; margin-left: 64px;
  padding-left: 6px; border-width: 12px 12px 12px 48px;
}
body.portrait .readout-clock span { display: none; }
body.portrait .readout-clock b { font-size: 22px; }
body.portrait .readout.jackpot {
  grid-area: hdr; justify-self: end; align-self: center; width: 148px; height: 56px; margin-right: 64px;
  flex-direction: column; justify-content: center; border-width: 11px 12px; padding: 0;
}
body.portrait .readout.jackpot span { font-size: 11px; }
body.portrait .readout.jackpot b { font-size: 19px; }

/* ← The Bar and the jukebox: at the table they sit in the header beside the menu, in the logo's place
   (the wide table has no logo either), and the clock and tonight's record close up to make room. */
body.portrait #table-screen:not([hidden]) ~ .corner { top: 16px; left: 70px; gap: 6px; }
body.portrait #table-screen:not([hidden]) ~ .corner .door { height: 36px; }
body.portrait #table-screen:not([hidden]) ~ .corner .door.plain { height: 44px; padding: 0 2px; }
body.portrait #table-screen:not([hidden]) ~ .corner .door b { font-size: 14px; }
body.portrait .phone-logo { display: none; }
body.portrait .readout-clock { width: 132px; margin-left: 238px; }
body.portrait .readout.jackpot { width: 118px; }

/* ---------- Seats ---------- */

body.portrait .seat { position: relative; inset: auto; transform: none; }
body.portrait .seat[data-pos="2"] { grid-area: top; justify-self: center; flex-direction: row; align-items: center; }
body.portrait .seat[data-pos="0"] { grid-area: me; justify-self: center; align-self: center; margin: 0; }
body.portrait .seat[data-pos="1"] { grid-area: left; align-self: center; justify-self: start; align-items: center; }
body.portrait .seat[data-pos="3"] { grid-area: right; align-self: center; justify-self: end; align-items: center; }

body.portrait .plate { width: 226px; height: 80px; border-width: 17px 21px; padding-right: 56px; }
body.portrait .plate .name { font-size: 22px; margin: -4px 0 0 -4px; }
body.portrait .plate .tricks { font-size: 16px; margin: 5px 0 -4px -4px; }
body.portrait .plate .avatar { width: 92px; height: 92px; right: -36px; }
body.portrait .plate::after { inset: -19px -23px; }
body.portrait .chip { left: -20px; top: -50px; width: 52px; height: 52px; font-size: 21px; }
body.portrait .seat[data-pos="2"] .chip { left: -64px; margin-top: -26px; }
body.portrait .alone-badge { width: 150px; height: 32px; bottom: -34px; font-size: 12px; }
/* Your own seat has your cards right below it, so the ribbon sits on the open felt to the plate's left. */
body.portrait .seat[data-pos="0"] .alone-badge {
  left: auto; right: calc(100% + 16px); bottom: auto; top: 50%; transform: translateY(-50%); animation: none;
}
body.portrait .seat.out .plate::before { inset: -17px -21px; font-size: 14px; }
body.portrait .seat[data-pos="1"].out .plate::before,
body.portrait .seat[data-pos="3"].out .plate::before { inset: -13px -13px; font-size: 12px; }

/* Side seats: a narrow plate, the face below it, then the cards */
body.portrait .seat[data-pos="1"] .plate,
body.portrait .seat[data-pos="3"] .plate { width: 120px; height: 64px; border-width: 13px 13px; padding-right: 0; }
body.portrait .seat[data-pos="1"] .plate .name,
body.portrait .seat[data-pos="3"] .plate .name { font-size: 18px; }
body.portrait .seat[data-pos="1"] .plate .tricks,
body.portrait .seat[data-pos="3"] .plate .tricks { font-size: 14px; }
body.portrait .seat[data-pos="1"] .plate .avatar,
body.portrait .seat[data-pos="3"] .plate .avatar {
  right: auto; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: 104px; height: 104px;
}
body.portrait .seat[data-pos="1"] .backs,
body.portrait .seat[data-pos="3"] .backs { margin: 118px 0 0; }
body.portrait .seat[data-pos="1"] .chip,
body.portrait .seat[data-pos="3"] .chip { left: 4px; top: -60px; }

body.portrait .backs { height: 48px; }
body.portrait .backs img { width: 33px; height: 46px; margin-left: -24px; }
body.portrait .backs img:first-child { margin-left: 0; }
body.portrait .seat[data-pos="2"] .backs { margin-left: 46px; }

/* ---------- Trick cross ---------- */

body.portrait {
  --tcw: 96px; --tch: 134px; --tw: 96;   /* fallbacks; app.js fits these to the screen */
  --card-w: var(--tcw);
  --card-h: var(--tch);
}
body.portrait .card { --w: var(--tw); }
body.portrait .cross {
  --slot-w: calc(var(--tcw) + 8px); --slot-h: calc(var(--tch) + 10px); --mid: 72px; --gap: 4px;
  position: relative; left: auto; top: auto; transform: none;
  grid-area: cross; align-self: center; justify-self: center;
}
/* The phone's cross is tight enough that the side slots overlap the top and bottom ones at the corners;
   cloth inside each outline lets them lie over one another instead of crossing lines. */
body.portrait .slot { background: url(../assets/felt-tile.webp) 0 0 / 512px repeat, #1d5a24; }
body.portrait .slot.trump { width: 62px; height: 62px; border-radius: 12px; }
body.portrait #trump-mark { width: 36px; height: 36px; }
body.portrait #trick .card[data-pos="2"], body.portrait #kitty[data-pos="2"] { top: 6px; }
body.portrait #trick .card[data-pos="0"], body.portrait #kitty[data-pos="0"] { bottom: 6px; }
body.portrait #trick .card[data-pos="1"], body.portrait #kitty[data-pos="1"] { left: 4px; }
body.portrait #trick .card[data-pos="3"], body.portrait #kitty[data-pos="3"] { right: 4px; }

/* ---------- Big-print cards ----------
   At phone size the desktop card face is too small to read: corners about 1.6x bigger,
   no upside-down bottom corner, one big suit on 9s and 10s instead of a pip grid, and the
   face art and ace tucked toward the bottom right, clear of the corner. */
body.portrait .card .idx { left: .22em; top: .16em; font-size: 1.55em; line-height: .9; letter-spacing: -.06em; }
body.portrait .card .idx small { display: none; }
/* Glossy suit art instead of the font's thin ♠/♣: spades and clubs, hearts and diamonds tell apart at a glance. */
body.portrait .card .idx-suit { display: block; width: .82em; margin-top: .1em; }
body.portrait .card .face-suit { display: block; position: absolute; top: 6%; right: 8%; width: 30%; }
body.portrait .card .idx.b { display: none; }
body.portrait .card .pip { display: none; }
body.portrait .card .big-suit {
  display: block; position: absolute; left: 60%; top: 62%; transform: translate(-50%, -50%);
  font: 400 3.4em/1 "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", sans-serif;
}
body.portrait .card .art { left: auto; right: 5%; top: auto; bottom: 5%; width: 64%; transform: none; }
body.portrait .card .ace { left: 60%; top: 62%; width: 50%; }

/* ---------- Your hand ---------- */

/* Headroom over the tray: your cards stand 75px above it and lift 12px more when playable, clear of your plate. */
body.portrait .tray { grid-area: hand; height: 94px; margin: 100px 0 0; border-width: 17px 21px; }
body.portrait .hand { bottom: 4px; }
body.portrait .hand .card { --w: 118; width: 118px; height: 165px; margin-left: -12px; }
body.portrait .hand .card:first-child { margin-left: 0; }
body.portrait .hand[data-count="6"] .card { margin-left: -36px; }
body.portrait .hand[data-count="6"] .card:first-child { margin-left: 0; }
/* Cards you can't play stay readable for planning ahead; the playable ones still lift. */
body.portrait .hand .card.dim::before { background: rgba(16, 11, 8, .26); }
body.portrait .hand .card.playable { transform: translateY(-12px); }
/* The bigger lift is for a mouse; on a touch screen "hover" just sticks after a tap. */
@media (hover: hover) { body.portrait .hand .card.playable:hover { transform: translateY(-24px); } }
@media (hover: none) { body.portrait .hand .card.playable:hover { transform: translateY(-12px); } }

/* ---------- Prompt and buttons ---------- */

/* One slot at the bottom: the turn line, or your bid buttons in its place, so nothing shifts. */
body.portrait #prompt { grid-area: act; align-self: center; min-height: 58px; border-width: 13px 16px; font-size: 21px; }
body.portrait #actions { grid-area: act; display: flex; gap: 8px; height: 70px; align-items: center; }
body.portrait #actions > .arcade-btn.small {
  flex: 1 1 0; min-width: 0; width: auto; height: 70px; font-size: 21px; border-width: 17px 21px;
}
body.portrait #actions .suits { flex: 0 0 auto; gap: 8px; }
body.portrait .suit-btn { width: 70px; height: 70px; padding: 15px; }
body.portrait .controls:has(#actions > *) #prompt { visibility: hidden; }
/* ...except "Still there?" and warnings, which float just above the buttons. */
body.portrait .controls:has(#actions > *) #prompt:has(.nudge, .flash, .alone-warn) {
  font-size: 18px;
  visibility: visible; align-self: start; transform: translateY(calc(-100% - 6px)); z-index: 5;
}

/* Your call: the table dims and your hand, the turned-up card and the buttons stay lit.
   Taps still go through (plates, chat); panels and banners sit above it. */
body.portrait #table-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: rgba(6, 4, 3, .6); opacity: 0; transition: opacity .25s ease;
}
body.portrait #table-screen.your-call::after { opacity: 1; }
body.portrait #actions, body.portrait #prompt { position: relative; }
body.portrait #table-screen.your-call :is(.tray, #kitty, #actions, #prompt) { z-index: 21; }

/* ---------- Moments ---------- */

body.portrait .banner { top: 46%; }
body.portrait .banner .big { font-size: 52px; -webkit-text-stroke: 2px #1a0503; }
body.portrait .banner .sub { font-size: 18px; }
body.portrait .banner img { width: 110px; }
body.portrait .hand-summary { top: 46%; width: 470px; }
body.portrait .panel { width: min(540px, 94%); max-height: 980px; }  /* the phone cabinet is tall: room for the face picker's Done */
body.portrait .panel:has(.avatar-grid.all) { width: min(540px, 94%); }
body.portrait .avatar-grid.all { grid-template-columns: repeat(5, 76px); grid-auto-rows: 76px; height: calc(7 * 76px + 6 * 8px); }  /* 5 x 7: all 32 icons */
body.portrait .panel p, body.portrait .panel li { font-size: 20px; }

body.portrait .away-panel { top: 46%; width: 440px; }
body.portrait .bar-wait { top: 10px; padding: 8px 18px; }
body.portrait #bar-name { width: 330px; }
body.portrait .panel p.bar-note { font-size: 17px; }
/* The phone's Multiplayer panel scrolls as a whole, open tables first; the list doesn't scroll inside it. */
body.portrait .panel:has(.bar-open) { width: min(560px, 94%); max-height: 1000px; }
body.portrait .bar-open ul { max-height: none; overflow: visible; }
/* Name over seat count, so a name gets the row's whole middle. */
body.portrait .panel .bar-open li[data-code] { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-areas: "face name btn" "face seats btn"; column-gap: 12px; row-gap: 0; }
body.portrait .bar-open li[data-code] img { grid-area: face; width: 50px; height: 50px; }
body.portrait .bar-open li[data-code] b { grid-area: name; font-size: 24px; }
body.portrait .bar-open li[data-code] span { grid-area: seats; font-size: 16px; }
body.portrait .bar-open li[data-code] .arcade-btn { grid-area: btn; }
body.portrait .bar-blocked li b { font-size: 22px; }
body.portrait .report-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.portrait .react-menu .rm-tools b { font-size: 17px; }
body.portrait .lobby-bobby { font-size: 18px; max-width: 94%; }
body.portrait .react-menu { width: 520px; }
body.portrait .react-menu button { font-size: 16px; padding: 8px 2px; }
body.portrait .react-menu button img { width: 62px; height: 62px; }
body.portrait .react-menu .rm-head b { font-size: 22px; }
body.portrait .fx-icon { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
body.portrait .away-tag { right: 10px; top: -14px; font-size: 11px; }

/* ---------- Chat drawer ---------- */

body.portrait .phone-header.phone-only { display: flex; }
body.portrait .chat-toast.phone-only { display: block; }
body.portrait .chat {
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: 64%; z-index: 45;
  transform: translateY(calc(100% + 40px));
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
body.portrait.chat-open .chat { transform: none; }
body.portrait .chat-log { font-size: 19px; gap: 6px; }
body.portrait .chat-filter button { height: 40px; font-size: 16px; }
body.portrait .chat-log .msg img { width: 32px; height: 32px; }
body.portrait .chat-log .msg.sys { font-size: 17px; }
body.portrait .quick-chat button { font-size: 17px; padding: 5px 12px; }
body.portrait .chat-form input { height: 48px; font-size: 19px; }
body.portrait .chat-form button { height: 48px; font-size: 15px; padding: 0 16px; }

.chat-toast {
  /* Floats over the scoreboard for a moment, clear of the cards. */
  position: absolute; left: 50%; top: 96px; z-index: 35; transform: translateX(-50%);
  max-width: 92%; padding: 8px 16px; border-radius: 999px;
  background: rgba(5, 5, 5, .92); border: 2px solid var(--gold-deep);
  font: 600 18px/1.2 var(--ui); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.chat-toast b { color: var(--gold); margin-right: 6px; }
.chat-toast.show { opacity: 1; }

/* ---------- Title ---------- */

body.portrait #title-screen {
  grid-template-columns: 1fr; grid-template-rows: auto auto;
  align-content: center; justify-items: center; gap: 14px; padding: 20px 16px;
}
body.portrait .title-logo { max-width: 470px; }
body.portrait .title-panel { width: 100%; max-width: 536px; padding: 16px 18px 20px; gap: 16px; }

/* ---------- Lobby ---------- */

body.portrait #lobby-screen { padding: 22px 0; }
body.portrait .lobby {
  grid-template-columns: 172px 172px 172px;
  grid-template-areas: "code code code" ". top ." "left . right" ". bottom .";
  gap: 18px 4px;
}
body.portrait .lobby-code { width: 380px; }
/* Deal, Invite, Leave share the width */
body.portrait .lobby-actions { align-self: stretch; padding: 0 14px; }
body.portrait .lobby-actions .arcade-btn { flex: 1 1 0; min-width: 0; width: auto; }
body.portrait .lobby-seat .plate { width: 168px; height: 70px; border-width: 15px 18px; padding-right: 40px; }
body.portrait .lobby-seat .plate .name { font-size: 16px; }
body.portrait .lobby-seat .plate .tag { font-size: 11px; }
body.portrait .lobby-seat .plate .avatar { width: 74px; height: 74px; right: -28px; }
body.portrait .lobby-seat .arcade-btn.small { min-width: 140px; height: 56px; font-size: 15px; }
body.portrait .lobby-status { max-width: 90%; font-size: 19px; }

/* ---------- Phone held sideways ----------
   Landscape on a phone would shrink the desktop cabinet to ~40px cards. Ask for portrait instead
   (touch screens only, and only when short, so tablets and small desktop windows are untouched). */
#rotate-hint { display: none; }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  #rotate-hint {
    display: grid; position: fixed; inset: 0; z-index: 100; place-content: center; justify-items: center; gap: 10px;
    padding: 20px; text-align: center; background: #0d0a09 url(../assets/felt.webp) center / cover;
  }
  #rotate-hint img { width: 96px; }
  #rotate-hint b { font: 400 26px var(--display); color: var(--gold); }
  #rotate-hint span { font: 600 16px var(--ui); color: var(--text); }
}

/* Feedback panel on a phone: the four kinds in two rows, bigger type */
body.portrait .fb-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.portrait .fb-types button { font-size: 16px; height: 50px; }
body.portrait .fb textarea, body.portrait .fb input { font-size: 19px; }
body.portrait .early-tag { font-size: 16px; right: 1%; bottom: 1%; }
body.portrait .early-line { font-size: 16px; }