/* Desktop and tablet layout: the same game as the phone, laid out for a big screen. desktop.js puts the
   "desktop" class on <html> only on screens with a short side of at least 600 and a long side of at least 900, so
   none of this reaches a phone, and "desktop-portrait" when the screen is taller than wide.

   The game screen is designed at 1920 x 1080 (1080 x 1440 upright) and scaled to the window with zoom (--dz, set
   by desktop.js); #gameContainer is sized so it always covers the window. The table is --ts across, its top at
   --tt, sized to fill the space above the hand tray.
   Side by side: three columns, the players down the left, the table and your hand in the middle, the Round /
   Turn / timer box and the Active Melds (kept open) on the right.
   Upright: the phone's top bar, the players in a row beneath it, the table, your hand; Active Melds opens in its
   window as on the phone. In-game buttons keep their look; they are only placed. */

html.desktop #gameContainer:not([style*="display: none"]) {
    position: fixed; left: 0; top: 0; zoom: var(--dz, 1);
    width: var(--gw, 1920px); height: var(--gh, 1080px); overflow: hidden;
}

/* full-screen overlays inside the game screen fill it, not the unscaled viewport (vw/vh and fixed positions
   don't follow the zoom) */
html.desktop #gameContainer > .esc-menu, html.desktop #gameContainer > .modal,
html.desktop #gameContainer > .winner-popup, html.desktop #gameContainer > .rules-popup {
    position: absolute; inset: 0; width: auto; height: auto;
}
html.desktop #gameContainer > .turn-announcement { position: absolute; }

/* the old desktop's tower hall, lit (the phone darkens its hall much more) */
html.desktop .game-background { background: url('assets/desktop/hall.png?v=5be78357') center / cover no-repeat; }
html.desktop .game-background::after { background: radial-gradient(circle, rgba(20, 14, 8, .05) 0%, rgba(10, 8, 6, .35) 75%); }

/* the menus over the old desktop's mountain sunset */
html.desktop #modeSelectionScreen { background: url('assets/desktop/mountains.png?v=0e9a24b4') center / cover no-repeat !important; }

/* ---------- right: the Round / Turn / timer box, then the Active Melds panel ---------- */
html.desktop:not(.desktop-portrait) .game-header {
    left: auto; right: 18px; top: 18px; width: 420px; height: auto; padding: 14px 16px;
    flex-direction: column; align-items: stretch; gap: 8px;
    border: 2px solid rgba(212, 175, 55, .75); border-radius: 10px; background: rgba(26, 15, 10, .92);
    box-shadow: 0 0 18px rgba(0, 0, 0, .6);
}
html.desktop:not(.desktop-portrait) .game-header .header-left, html.desktop:not(.desktop-portrait) .game-header .header-right, html.desktop:not(.desktop-portrait) .game-header .header-center { justify-content: center; flex-shrink: 0; }
html.desktop:not(.desktop-portrait) .game-header .header-left { position: relative; }
html.desktop:not(.desktop-portrait) .game-header .menu-btn { position: absolute; left: 0; }
html.desktop:not(.desktop-portrait) .game-header .timer-display { flex-direction: column; gap: 6px; }
html.desktop:not(.desktop-portrait) .game-header .timer-text { border: 1px solid rgba(212, 175, 55, .7); border-radius: 6px; padding: 4px 0; width: 100%; }

html.desktop:not(.desktop-portrait) #meldsOverlay, html.desktop:not(.desktop-portrait) #meldsOverlay.hidden {
    display: flex !important; position: absolute; inset: 200px 18px 18px auto; width: 420px; height: auto;
    background: none; z-index: 30; align-items: stretch; justify-content: flex-start; cursor: default;
}
html.desktop:not(.desktop-portrait) #meldsOverlay .window-ribbon { width: 320px; animation: none; z-index: 25002; margin-bottom: -40px; }
html.desktop:not(.desktop-portrait) #meldsOverlay .melds-overlay-content {
    width: 100%; max-width: none; max-height: none; flex: 1; border-width: 2px;
    background: rgba(26, 15, 10, .92); border-color: rgba(212, 175, 55, .75); box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}
html.desktop:not(.desktop-portrait) #meldsOverlay .melds-overlay-content.ribboned { padding-top: 46px !important; }
html.desktop:not(.desktop-portrait) #meldsOverlay .melds-close-btn, html.desktop:not(.desktop-portrait) #meldsOverlay .melds-overlay-header { display: none; }
/* the panel replaces the Active Melds button; the strip of melds over the hand goes either way round */
html.desktop:not(.desktop-portrait) .phase-buttons-bar #activeMeldsBtn, html.desktop:not(.desktop-portrait) .phase-buttons-bar [onclick*="toggleMeldsOverlay"],
html.desktop .melds-header-display { display: none !important; }

/* ---------- left: the players, filling the column top to bottom ---------- */
html.desktop:not(.desktop-portrait) .portraits-container {
    top: 18px !important; bottom: 18px !important; left: 18px; right: auto; width: 322px; height: auto !important;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 12px;
    background: none; border: none; padding: 0;
}
html.desktop .portrait-wrapper {
    flex: 1 1 0; min-height: 0; max-height: 360px; display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    border-radius: 12px; border: 2px solid rgba(212, 175, 55, .55);
    background: linear-gradient(135deg, rgba(44, 24, 16, .92), rgba(26, 15, 10, .92));
}
html.desktop .portrait-wrapper.active { border-color: rgba(255, 215, 0, .85); box-shadow: 0 0 18px rgba(255, 215, 0, .35); }
html.desktop .portrait-wrapper:not(.active) { opacity: .72; }
html.desktop .portrait-frame { width: 136px !important; height: 162px !important; flex: none; }
html.desktop .player-score-badge { width: 34px; height: 34px; font-size: 15px; bottom: 4px; right: 4px; border: 2px solid #3a2410; }
.portrait-plate { display: none; }
html.desktop .portrait-plate { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-family: 'Cinzel', serif; color: #f4e4bc; font-size: 15px; line-height: 1.4; }
html.desktop .portrait-plate b { color: #ffd700; font-size: 15px; line-height: 1.25; }
html.desktop .portrait-plate span:last-child { color: #b8a27a; font-size: 14px; }

/* ---------- middle: the table ---------- */
html.desktop .table-section, html.desktop body.npc-mode .table-section {
    top: var(--tt, -12px) !important; left: 358px !important; right: 460px !important; height: var(--ts, 1020px) !important;
    padding: 0; overflow: visible;
}
html.desktop .round-table-compact, html.desktop body.npc-gatekeeper .round-table-compact,
html.desktop body.npc-mode .round-table-compact, html.desktop body.room-decor.room-has-table .round-table-compact {
    width: var(--ts, 1020px) !important; height: var(--ts, 1020px) !important;
    max-width: none !important; max-height: none !important;
    min-width: 0 !important; min-height: 0 !important; /* iPhone/iPad Safari's own minimum (102vmin) */
    transform: none !important; /* the phone's fitTableToScreen scaling */
}
/* each table shown whole, as a full circle (the phone zooms the art in so its rim bleeds off the screen; iPhone
   and iPad Safari zoom it further, with !important) */
html.desktop .round-table-compact { background-size: cover, cover !important; background-position: center, center !important; }
html.desktop body.npc-gatekeeper .round-table-compact, html.desktop body.room-decor.room-has-table .round-table-compact {
    background-size: contain, 0 0 !important; background-position: center, center !important;
}

/* the deck and the four draw cards, about the old desktop's size */
html.desktop .deck-pile, html.desktop .draw-card { width: 76px !important; height: 106px !important; border-radius: 6px; margin-top: 0 !important; }
html.desktop .draw-card-top { top: 30%; }
html.desktop .draw-card-bottom { bottom: 30%; }
html.desktop .draw-card-left { left: calc(30% + 6px); }
html.desktop .draw-card-right { right: calc(30% + 6px); }
html.desktop .draw-card.special-card.face-up::before { width: 62px; height: 62px; }
html.desktop .pile-label { font-size: 12px; }

/* the items in the phone's spots, the diagonal gaps between the draw cards, grown with the cards (137px
   instead of 76px). The phone's layoutArtifactIcons sets these inline; these win. */
html.desktop .opponent-artifact-display, html.desktop .player-artifact-display {
    width: 137px !important; height: 137px !important; right: auto !important; bottom: auto !important; transform: none !important;
}
html.desktop .opponent-artifact-display .opponent-artifact-card, html.desktop .player-artifact-display .player-artifact-card,
html.desktop .opponent-artifact-card img, html.desktop .player-artifact-card img { width: 137px !important; height: 137px !important; object-fit: contain; }
html.desktop #opponentArtifactPlayer2 { left: calc(30% + 6px - 68.5px) !important; top: calc(40% - 127.5px) !important; }
html.desktop #opponentArtifactPlayer3 { left: calc(70% - 74.5px) !important; top: calc(40% - 127.5px) !important; }
html.desktop #opponentArtifactPlayer1 { left: calc(30% + 6px - 68.5px) !important; top: calc(60% - 9.5px) !important; }
html.desktop #playerArtifactDisplay { left: calc(70% - 74.5px) !important; top: calc(60% - 9.5px) !important; }

/* a gatekeeper's weapon beside the table, grown with the cards */
html.desktop .npc-decor-staff { width: 216px; left: calc(22% - 35px); }

/* the opponents' mats in the mat art's own proportions (692 x 321), name and cards centred */
html.desktop .player-area {
    width: 380px !important; height: 176px !important; padding: 18px 26px !important; gap: 10px; border-width: 2px;
    background-size: 100% 100% !important; background-position: center !important;
    align-items: center !important; justify-content: center !important;
}
html.desktop .player-area:not([style*="display: none"]) { display: flex !important; }
html.desktop .player-1 { left: calc(10% + 30px) !important; }
html.desktop .player-3 { right: calc(10% + 30px) !important; }
html.desktop .player-2, html.desktop body.npc-mode .player-2 { top: calc(5% - 10px) !important; }
html.desktop .player-info { font-size: 13px; padding: 4px 12px; }
html.desktop .player-hand { gap: 2px; }
html.desktop .opponent-card { width: 38px; height: 53px; border-radius: 4px; }

/* ---------- middle: your hand, in the old gold tray, the buttons inside its foot ---------- */
html.desktop .enhanced-cards-section, html.desktop body.npc-mode .enhanced-cards-section {
    left: 358px !important; right: 460px !important; bottom: 14px !important; height: 290px; z-index: 20000;
    padding-top: 34px; padding-bottom: 64px;
    border: 3px solid #e2b93b !important; border-radius: 12px !important;
    box-shadow: 0 0 22px rgba(255, 200, 60, .45), inset 0 0 40px rgba(0, 0, 0, .5) !important;
}
html.desktop .hand-scroll-container { gap: 2px; padding: 10px 4px; }
/* the tray has room for the whole hand: no phone-style overlap (it stacked a short hand into a small pile) */
html.desktop .hand-scroll-container[class*="collapsed-"] .player-card { margin-left: 0; }
.tray-label { display: none; }
html.desktop .tray-label {
    position: absolute; top: 8px; left: 18px; right: 18px; display: flex; justify-content: space-between;
    font-family: 'Cinzel', serif; font-size: 14px; color: #ffd700; text-shadow: 0 1px 2px #000; pointer-events: none;
}
html.desktop .tray-label span { color: #e8d6a8; }
html.desktop .phase-buttons-bar, html.desktop body.npc-mode .phase-buttons-bar {
    left: calc(358px + (100% - 818px) / 2) !important; width: min(720px, calc(100% - 858px)); bottom: 30px !important;
}
html.desktop .phase-buttons-bar .phase-btn { flex: 1 1 0; }

/* ---------- Adventure: the world map and the zone map side by side, each shown whole ---------- */
html.desktop body:has(> .map-container) { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
html.desktop body:has(> .map-container) > .header { grid-column: 1 / -1; }
html.desktop .map-container { border-bottom: none; display: flex; align-items: center; justify-content: center; background: #120c08; min-height: 0; }
html.desktop .map-container + .map-container { border-left: 2px solid rgba(255, 215, 0, .3); }
html.desktop .map-viewport { width: min(100%, calc(100vh - 70px)); height: min(100%, calc(50vw - 2px)); aspect-ratio: 1; flex: none; cursor: default; }
html.desktop .world-map-container, html.desktop .zone-map { width: 100%; transform: none !important; }
html.desktop #worldMapImage, html.desktop #zoneMapImage { transform: none !important; }
html.desktop body:has(> .map-container) > .divider { display: none; }

/* ---------- upright (a tablet held in portrait): top bar, players in a row, the table, your hand ---------- */
html.desktop-portrait .game-header { zoom: 1.4; }
html.desktop-portrait .portraits-container {
    top: 70px !important; left: 18px; right: 18px; bottom: auto !important; height: 206px !important;
    flex-direction: row; justify-content: center; align-items: stretch; gap: 12px;
    background: none; border: none; padding: 0;
}
html.desktop-portrait .portrait-wrapper { max-width: 300px; max-height: none; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 8px; }
html.desktop-portrait .portrait-frame { width: 100px !important; height: 119px !important; }
html.desktop-portrait .player-score-badge { width: 28px; height: 28px; font-size: 13px; }
html.desktop-portrait .portrait-plate { align-items: center; text-align: center; gap: 1px; font-size: 13px; line-height: 1.3; }
html.desktop-portrait .portrait-plate b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html.desktop-portrait .portrait-plate span:last-child { font-size: 12px; }
html.desktop-portrait .table-section, html.desktop-portrait body.npc-mode .table-section { left: 18px !important; right: 18px !important; }
html.desktop-portrait .enhanced-cards-section, html.desktop-portrait body.npc-mode .enhanced-cards-section { left: 18px !important; right: 18px !important; }
html.desktop-portrait .phase-buttons-bar, html.desktop-portrait body.npc-mode .phase-buttons-bar {
    left: 50% !important; width: min(860px, calc(100% - 80px));
}
/* ten cards fit across the narrower tray (more scroll, as on the phone) */
html.desktop-portrait #hand0 .player-card { width: 96px; height: 134px; }
/* Active Melds opens over the game, as on the phone */
html.desktop-portrait #meldsOverlay { position: absolute; inset: 0; width: auto; height: auto; }

/* ---------- Adventure upright: the world map above the zone map ---------- */
html.desktop-portrait body:has(> .map-container) { grid-template-columns: 1fr; grid-template-rows: auto 1fr 1fr; }
html.desktop-portrait .map-container + .map-container { border-left: none; border-top: 2px solid rgba(255, 215, 0, .3); }
html.desktop-portrait .map-viewport { width: min(100%, calc(50vh - 37px)); height: min(100%, 100vw); }

/* ---------- Profile: the category column at a fixed width, each category with its icon and a readable name ---------- */
html.desktop .profile-modal:not(.nav-collapsed) .profile-left-column { flex-basis: 300px; }
html.desktop .profile-modal:not(.nav-collapsed) .profile-category-icon { display: block; }
html.desktop .profile-category-item {
    background: linear-gradient(135deg, rgba(44, 24, 16, .92), rgba(26, 15, 10, .92));
    border-color: rgba(212, 175, 55, .45); color: #efe2c2; font-size: 15px; letter-spacing: .03em;
}
html.desktop .profile-category-item:hover { border-color: #d4af37; color: #ffd877; }
html.desktop .profile-category-item.active {
    background: linear-gradient(135deg, rgba(110, 72, 24, .95), rgba(60, 36, 14, .95));
    border-color: #ffd700; color: #ffd877;
}