/*
 * 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;
}
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; }

/* ---------- 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;
}
body.portrait .cross-bar { background-size: 150px; border-radius: 10px; }
body.portrait .cross-bar.h { left: -8px; right: -8px; top: calc(50% - var(--mid) / 2 - 28px); bottom: calc(50% - var(--mid) / 2 - 28px); }
body.portrait .cross-bar.v { top: -8px; bottom: -8px; left: calc(50% - var(--slot-w) / 2 - 8px); right: calc(50% - var(--slot-w) / 2 - 8px); }
body.portrait .slot.trump { width: 62px; height: 62px; }
body.portrait #trump-mark { width: 36px; height: 36px; }
body.portrait .cross::after { width: 98px; height: 98px; }
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 .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); }
}