/* PrizeSkillz Marketplace v2: cabinet (shared touchscreen) layout.
   Design: Ali, designer of the Prize Vault screens and art.
   Only applies under html.cabinet, which js/cabinet.js sets for ?mode=cabinet.
   Primary target: 1080x1920 portrait, matching the Prize Vault cabinet screens
   (header 0-180, tabs 180-300, content from 312, status line above a 96 px legal
   footer with nothing tappable in it; 48 px side margins; text 28 / 32 / 44 / 56;
   touch targets 88 px; primary buttons 984x120). 1920x1080 landscape also supported.
   Nothing depends on hover. Base touch target below is 64px; both cabinet
   orientations raise it to the Vault's 88px. */

html.cabinet { --tap: 64px; --cab-margin: 48px; --cab-footer: 96px; font-size: 28px; -webkit-text-size-adjust: 100%; touch-action: pan-x pan-y; }
html.cabinet.cabinet-portrait, html.cabinet.cabinet-landscape { --tap: 88px; }
html.cabinet body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; font-size: 28px; line-height: 1.35; background-attachment: scroll; }
html.cabinet input, html.cabinet textarea { -webkit-user-select: text; user-select: text; }
html.cabinet.cabinet-nocursor, html.cabinet.cabinet-nocursor * { cursor: none !important; }

/* ---- no hover reliance: hover looks like rest; feedback comes from :active ---- */
html.cabinet a:hover { text-decoration: none; }
html.cabinet .btn:hover { border-color: var(--line); filter: none; }
html.cabinet .btn.primary:hover { border-color: #f2d159; filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 2px -2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(212, 176, 56, 0.25); }
html.cabinet .btn.outline:hover { border-color: var(--gold-lo); background: rgba(5, 5, 8, 0.4); }
html.cabinet .card:hover, html.cabinet .cat-tile:hover, html.cabinet .sell-option:hover, html.cabinet .vault-item:hover { transform: none; }
html.cabinet .card:hover { border-color: var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), var(--bevel); }
html.cabinet .card.is-vault:hover { border-color: rgba(140, 115, 46, 0.75); }
html.cabinet .card:hover .photo img { transform: none; }
html.cabinet .thread-list a:hover, html.cabinet .menu-row:hover { background: transparent; }
html.cabinet .vault-item:hover { border-color: rgba(140, 115, 46, 0.6); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), var(--bevel); }
html.cabinet .btn:active, html.cabinet .cat-tile:active, html.cabinet .card:active, html.cabinet .tabbar a:active, html.cabinet .sell-option:active, html.cabinet .menu-row:active,
html.cabinet .topnav a:active, html.cabinet .vault-item:active, html.cabinet .thread-list a:active, html.cabinet .gthumb:active { transform: scale(0.98); filter: brightness(1.2); }
html.cabinet *:focus-visible { outline: 4px solid var(--gold-hi); outline-offset: 3px; }

/* ---- 88px touch targets (Vault cabinet rule) ---- */
html.cabinet .btn, html.cabinet .btn.small, html.cabinet input, html.cabinet select, html.cabinet .topnav a, html.cabinet .tabbar a, html.cabinet .linkish,
html.cabinet .vault-item, html.cabinet .thread-list a, html.cabinet .menu-row, html.cabinet .back-link, html.cabinet .gthumb { min-height: var(--tap); }
html.cabinet .btn { padding: 0 36px; font-size: 1rem; border-radius: 16px; min-width: var(--tap); gap: 14px; }
html.cabinet .btn.small { padding: 0 28px; font-size: 1rem; border-radius: 16px; }
html.cabinet .btn.lg, html.cabinet .btn.primary.block { min-height: 120px; font-size: 1.15rem; border-radius: 16px; }
html.cabinet .btn .ico { width: 34px; height: 34px; }
html.cabinet input, html.cabinet select, html.cabinet textarea { font-size: 1rem; padding: 0 28px; border-radius: 16px; }
html.cabinet textarea { padding: 20px 28px; min-height: 200px; }
html.cabinet select { padding-right: 72px; background-position: calc(100% - 40px) 50%, calc(100% - 28px) 50%, 0 0; background-size: 12px 12px, 12px 12px, 100% 100%; }
html.cabinet .composer textarea { min-height: var(--tap); height: var(--tap); padding-top: 24px; }
html.cabinet label { font-size: 1rem; margin: 28px 0 12px; }
html.cabinet .check { min-height: var(--tap); align-items: center; font-size: 1rem; gap: 20px; }
html.cabinet .check input { width: 48px; height: 48px; min-height: 0; margin: 0; accent-color: var(--gold); flex: 0 0 48px; }
html.cabinet .linkish { display: inline-flex; align-items: center; padding: 0 16px; font-size: 1rem; }
html.cabinet .footer a, html.cabinet .muted a, html.cabinet .empty a:not(.btn), html.cabinet p a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 8px; }
html.cabinet .row2 { gap: 24px; }

/* ---- type scale: body 28, subheading 32, heading 44, hero 56; nothing under 28 ---- */
html.cabinet h1, html.cabinet .detail-title { font-size: 44px; }
html.cabinet h2, html.cabinet .section-title { font-size: 32px; gap: 14px; }
html.cabinet .display { font-size: 44px; }
html.cabinet .display.sm { font-size: 44px; }
html.cabinet .hero-title { font-size: 56px; }
html.cabinet .eyebrow, html.cabinet .lede, html.cabinet .result-meta, html.cabinet .muted, html.cabinet .small, html.cabinet .where, html.cabinet .cond-tag, html.cabinet .cat-tag,
html.cabinet .status-pill, html.cabinet .role-tag, html.cabinet .vault-badge, html.cabinet .price-chip, html.cabinet .card .title, html.cabinet .tlisting, html.cabinet .tpreview,
html.cabinet .bubble time, html.cabinet .menu-row .grow .muted, html.cabinet .hero-points, html.cabinet .cat-tile, html.cabinet .tab-label, html.cabinet .notice-box,
html.cabinet .kv, html.cabinet .footer, html.cabinet .staging-pill, html.cabinet .brand-tagline, html.cabinet .badge-dot, html.cabinet .back-link, html.cabinet .toast, html.cabinet .table,
html.cabinet .ph, html.cabinet .field-error, html.cabinet .step-chip, html.cabinet .sort-select { font-size: 28px; }
html.cabinet .ico { width: 30px; height: 30px; }

/* ---- header zone 0-180 and tab zone 180-300 ---- */
html.cabinet .topbar-inner { max-width: none; padding: 0 var(--cab-margin); }
html.cabinet .brand-logo { height: 52px; }
html.cabinet .brand-divider { height: 64px; }
html.cabinet .brand-name { font-size: 44px; letter-spacing: 0.12em; }
html.cabinet .brand-tagline { letter-spacing: 0.24em; margin-top: 10px; }
html.cabinet .staging-pill { padding: 6px 20px; border-width: 2px; letter-spacing: 0.16em; }
html.cabinet .topnav { display: flex; gap: 0; }
html.cabinet .topnav a { justify-content: center; gap: 12px; padding: 0 20px; border-radius: 0; color: var(--muted); font-size: 28px; background: transparent; }
html.cabinet .topnav a.active { color: var(--gold-hi); background: linear-gradient(180deg, transparent, rgba(212, 176, 56, 0.08)); }
html.cabinet .topnav a.active::after { left: 20px; right: 20px; bottom: 0; height: 6px; }
html.cabinet .topnav .badge-dot { min-width: 40px; height: 40px; padding: 0 10px; }
html.cabinet .tabbar { display: none; }
html.cabinet .view { max-width: none; padding: 12px var(--cab-margin) calc(var(--cab-footer) + 210px); }
html.cabinet .footer-inner { max-width: none; padding: 32px var(--cab-margin) calc(var(--cab-footer) + 220px); gap: 24px; }
html.cabinet .footer-emblem { width: 72px; height: 72px; }
html.cabinet .footer .credit { display: none; }
html.cabinet .footer-links { gap: 16px; }
html.cabinet .composer { bottom: calc(var(--cab-footer) + 196px); padding: 16px; gap: 16px; }
html.cabinet .toast { bottom: calc(var(--cab-footer) + 220px); padding: 24px 40px; }
html.cabinet .panel { padding: 36px; border-radius: 16px; margin-bottom: 24px; }
html.cabinet .panel.narrow { max-width: none; }
html.cabinet .page-head { margin: 24px 0 28px; }

/* hero, search, tiles */
html.cabinet .hero { border-radius: 16px; margin: 12px 0 24px; min-height: 420px; }
html.cabinet .hero-copy { padding: 48px 44px; max-width: 820px; }
html.cabinet .hero-points { gap: 16px 32px; margin-top: 28px; }
html.cabinet .search { margin-top: 28px; padding: 10px; border-radius: 20px; border-width: 2px; }
html.cabinet .search input { min-height: 100px; padding-left: 84px; font-size: 32px; }
html.cabinet .search-ico { left: 36px; }
html.cabinet .search-ico .ico { width: 36px; height: 36px; }
html.cabinet .search .btn { min-height: 100px; min-width: 220px; font-size: 32px; }
html.cabinet .cat-rail { gap: 24px; margin: 0 calc(-1 * var(--cab-margin)); padding: 4px var(--cab-margin) 28px; }
html.cabinet .cat-tile { width: 200px; min-height: 184px; border-radius: 16px; gap: 14px; padding: 16px 10px; }
html.cabinet .cat-ico { width: 88px; height: 88px; }
html.cabinet .cat-ico .ico { width: 42px; height: 42px; }
html.cabinet .cat-tile.vault .cat-ico img { width: 72px; height: 72px; }
html.cabinet .section-head { margin: 36px 0 24px; gap: 24px; }
html.cabinet .section-tools { gap: 16px; }
html.cabinet .filters { padding: 12px 36px 36px; gap: 8px 24px; border-radius: 16px; }
html.cabinet .filter-actions { gap: 16px; padding-top: 24px; }
html.cabinet .featured { padding: 32px; border-radius: 16px; margin: 12px 0; }
html.cabinet .featured-head { gap: 20px; margin-bottom: 24px; }
html.cabinet .featured-head img { width: 72px; height: 72px; }

/* cards */
html.cabinet .grid { gap: 24px; }
html.cabinet .card { border-radius: 16px; }
html.cabinet .card .body { padding: 20px 24px 24px; gap: 12px; }
html.cabinet .card .title { font-weight: 600; min-height: 2.7em; }
html.cabinet .card .meta { flex-direction: column; align-items: flex-start; gap: 12px; }
html.cabinet .price-chip { left: 16px; bottom: 16px; padding: 8px 20px; font-size: 32px; }
html.cabinet .price-chip.inline { font-size: 28px; padding: 6px 18px; }
html.cabinet .vault-badge { padding: 6px 18px 6px 8px; gap: 10px; border-width: 2px; }
html.cabinet .vault-badge img { width: 34px; height: 34px; }
html.cabinet .vault-badge.on-photo { top: 16px; left: 16px; }
html.cabinet .cond-tag, html.cabinet .cat-tag, html.cabinet .status-pill { padding: 4px 16px; }
html.cabinet .where .ico { width: 28px; height: 28px; }

/* detail */
html.cabinet .back-link { gap: 10px; }
html.cabinet .gallery-main { border-radius: 16px; }
html.cabinet .gallery-thumbs { gap: 16px; margin-top: 16px; }
html.cabinet .gthumb { flex-basis: 132px; height: 100px; border-width: 3px; }
html.cabinet .detail-price { font-size: 56px; }
html.cabinet .kv { gap: 16px 40px; }
html.cabinet .avatar { width: 88px; height: 88px; flex-basis: 88px; font-size: 32px; }
html.cabinet .avatar.lg { width: 120px; height: 120px; flex-basis: 120px; font-size: 44px; }
html.cabinet .seller-row { gap: 24px; }

/* sell, vault, messages, account */
html.cabinet .sell-option { padding: 32px; gap: 28px; border-radius: 16px; min-height: 200px; }
html.cabinet .so-ico { width: 120px; height: 120px; flex-basis: 120px; border-radius: 16px; }
html.cabinet .so-ico .ico { width: 56px; height: 56px; }
html.cabinet .sell-option.vault .so-ico img { width: 104px; height: 104px; }
html.cabinet .so-text strong { font-size: 32px; }
html.cabinet .how-steps { gap: 20px; margin-top: 32px; }
html.cabinet .step-chip { width: 56px; height: 56px; flex-basis: 56px; }
html.cabinet .form-step { gap: 20px; margin-top: 40px; padding-top: 32px; }
html.cabinet .dropzone { padding: 40px 24px; gap: 12px; border-width: 3px; border-radius: 16px; }
html.cabinet .dz-ico { width: 104px; height: 104px; }
html.cabinet .photo-strip img { width: 140px; height: 140px; }
html.cabinet .vault-banner { padding: 36px; gap: 28px; border-radius: 16px; min-height: 300px; flex-direction: row; align-items: center; }
html.cabinet .vault-banner > div { max-width: 58%; }
html.cabinet .vb-emblem { width: 160px; height: 160px; }
html.cabinet .vault-grid { gap: 24px; }
html.cabinet .vbody { padding: 20px 24px 24px; gap: 16px; }
html.cabinet .vbody strong { font-size: 28px; }
html.cabinet .tthumb { width: 120px; height: 120px; flex-basis: 120px; border-radius: 16px; }
html.cabinet .thread-list a { gap: 24px; padding: 20px; }
html.cabinet .bubble { padding: 20px 28px; border-radius: 28px 28px 28px 10px; }
html.cabinet .bubble.me { border-radius: 28px 28px 10px 28px; }
html.cabinet .bubbles { gap: 16px; }
html.cabinet .menu-row { gap: 24px; padding: 16px 20px; min-height: 120px; }
html.cabinet .mr-ico { width: 72px; height: 72px; flex-basis: 72px; border-radius: 16px; }
html.cabinet .profile-head { gap: 32px; }
html.cabinet .auth { max-width: none; }
html.cabinet .auth-logo { height: 72px; }
html.cabinet .auth-brand img:first-child { width: 180px; height: 180px; }
html.cabinet .empty { padding: 64px 24px; gap: 12px; }
html.cabinet .empty-art { width: 320px; height: 320px; }
html.cabinet .error-ico, html.cabinet .panel-ico { width: 140px; height: 140px; }
html.cabinet .panel-emblem { width: 200px; height: 200px; }
html.cabinet .tips li { gap: 24px; margin-bottom: 28px; }
html.cabinet .table th, html.cabinet .table td { padding: 16px; }

/* Portrait 1080x1920 (primary): header 180, tabs 120, 2-up grid. */
html.cabinet.cabinet-portrait .topbar-inner { flex-wrap: wrap; padding: 0; gap: 0; }
html.cabinet.cabinet-portrait .brand { order: 1; flex: 1 1 100%; justify-content: center; height: 180px; padding: 0 var(--cab-margin); gap: 28px; }
html.cabinet.cabinet-portrait .staging-pill { position: absolute; top: 20px; left: var(--cab-margin); margin: 0; }
html.cabinet.cabinet-portrait .topnav { order: 2; flex: 1 1 100%; height: 120px; margin: 0; padding: 0 calc(var(--cab-margin) - 20px); border-top: 1px solid var(--line); background: rgba(26, 26, 34, 0.55); }
html.cabinet.cabinet-portrait .topnav a { flex: 1 1 0; height: 120px; flex-direction: column; gap: 8px; padding: 0 8px; }
html.cabinet.cabinet-portrait .topnav a span:not(.badge-dot) { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cabinet.cabinet-portrait .topnav .badge-dot { position: absolute; top: 14px; left: 50%; margin-left: 14px; }
html.cabinet.cabinet-portrait .grid { grid-template-columns: repeat(2, 1fr); }
html.cabinet.cabinet-portrait .rail { grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; }
html.cabinet.cabinet-portrait .vault-grid { grid-template-columns: repeat(2, 1fr); }
html.cabinet.cabinet-portrait .filters { grid-template-columns: 1fr; }
html.cabinet.cabinet-portrait .detail { display: block; }
html.cabinet.cabinet-portrait .gallery { position: static; }
html.cabinet.cabinet-portrait .hero-art { width: 100%; opacity: 0.6; }
html.cabinet.cabinet-portrait .sell-options { grid-template-columns: 1fr; }
html.cabinet.cabinet-portrait .how-steps { grid-template-columns: 1fr; }

/* Landscape 1920x1080: one 160 px header row with inline tabs, 4-up grid, detail side by side. */
html.cabinet.cabinet-landscape .topbar-inner { min-height: 140px; gap: 28px; }
html.cabinet.cabinet-landscape .brand-logo { height: 44px; }
html.cabinet.cabinet-landscape .brand-name { font-size: 36px; }
html.cabinet.cabinet-landscape .topnav { margin-left: auto; }
html.cabinet.cabinet-landscape .topnav a { height: 140px; }
html.cabinet.cabinet-landscape .topnav a.active::after { bottom: 0; }
html.cabinet.cabinet-landscape .topnav .badge-dot { margin-left: 4px; }
html.cabinet.cabinet-landscape .grid { grid-template-columns: repeat(4, 1fr); }
html.cabinet.cabinet-landscape .rail { grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; }
html.cabinet.cabinet-landscape .vault-grid { grid-template-columns: repeat(4, 1fr); }
html.cabinet.cabinet-landscape .filters { grid-template-columns: repeat(3, 1fr) auto; }
html.cabinet.cabinet-landscape .detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
html.cabinet.cabinet-landscape .gallery { top: 172px; }
html.cabinet.cabinet-landscape .hero-art { width: 62%; opacity: 0.95; }
html.cabinet.cabinet-landscape .hero { min-height: 380px; }
html.cabinet.cabinet-landscape .sell-options { grid-template-columns: 1fr 1fr; }
html.cabinet.cabinet-landscape .how-steps { grid-template-columns: repeat(3, 1fr); }
html.cabinet.cabinet-landscape .auth, html.cabinet.cabinet-landscape .panel.narrow { max-width: 1100px; }

/* ---- status line + session controls, kept above the legal footer band ---- */
.cab-bar { position: fixed; left: 0; right: 0; bottom: var(--cab-footer, 96px); z-index: 40; display: flex; align-items: center; gap: 24px; padding: 20px var(--cab-margin, 48px);
    background: linear-gradient(180deg, rgba(15, 15, 20, 0.92), rgba(8, 8, 11, 0.97)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--gold-lo); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(242, 209, 89, 0.2); }
.cab-bar { flex-wrap: wrap; row-gap: 12px; padding-top: 16px; padding-bottom: 8px; }
.cab-bar .btn { flex: 1 1 0; }
.cab-bar .cab-hint { order: 2; flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; color: var(--muted); font-size: 28px; white-space: nowrap; }
.cab-bar .cab-hint::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px rgba(51, 191, 115, 0.8); }
.cab-big { min-height: 88px; font-size: 28px; padding: 0 36px; }
.cab-big .ico { width: 32px; height: 32px; }
html.cab-kb-open .cab-bar { display: none; }
/* Legal footer band: text only, nothing tappable in the bottom 96 px. */
html.cabinet body::after { content: "PrizeSkillz doesn't hold or process money. Buyer and seller settle directly, in person."; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; height: var(--cab-footer);
    display: flex; align-items: center; justify-content: center; padding: 0 var(--cab-margin); background: #030305; border-top: 1px solid var(--line); color: var(--dim); font: 500 28px/1.2 var(--font-ui); text-align: center; pointer-events: none; }
html.cab-kb-open body::after { display: none; }

/* ---- dialogs ---- */
.cab-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 48px; }
.cab-dialog { position: relative; background: var(--raised); border: 2px solid var(--gold); border-radius: 24px; padding: 56px 48px; max-width: 984px; width: 100%; text-align: center; box-shadow: var(--shadow), 0 0 60px rgba(212, 176, 56, 0.2); font-size: 28px; }
.cab-dialog h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 44px; justify-content: center; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cab-dialog .btn-row { justify-content: center; gap: 24px; margin-top: 40px; }
.cab-count { font-size: 56px; color: var(--gold-hi); font-weight: 800; margin: 24px 0 0; font-variant-numeric: tabular-nums; }
.cab-qr canvas { width: min(480px, 70vw); height: auto; margin: 32px auto; display: block; border-radius: 16px; image-rendering: pixelated; border: 8px solid #fff; box-shadow: 0 0 0 2px var(--gold), 0 10px 40px rgba(0, 0, 0, 0.6); }
.cab-url { color: var(--muted); font-size: 28px; word-break: break-all; }
.cab-qr .btn { margin-top: 16px; min-width: 984px; max-width: 100%; min-height: 120px; }
.cab-sell-hint { display: flex; align-items: center; gap: 24px; justify-content: space-between; margin-bottom: 24px; font-size: 28px; }

/* ---- on-screen keyboard ---- */
.cab-kb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; flex-direction: column; gap: 12px; padding: 20px; background: linear-gradient(180deg, #121218, #050508); border-top: 2px solid var(--gold-lo); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.7); }
.cab-kb.show { display: flex; }
.cab-kb-row { display: flex; gap: 12px; justify-content: center; }
.cab-key { flex: 1 1 0; max-width: 150px; min-height: 88px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, #22222b, #16161d); color: var(--text); font: 600 32px/1 var(--font-ui, system-ui); touch-action: manipulation; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 3px 0 #050508; }
.cab-key:active { background: var(--gold-grad); color: var(--on-gold); }
.cab-key.on { border-color: var(--gold); color: var(--gold-hi); }
.cab-key.key-space { flex: 4 1 0; max-width: 600px; font-size: 28px; }
.cab-key.key-enter { flex: 1.6 1 0; background: var(--gold-grad); color: var(--on-gold); border-color: #f2d159; }
.cab-key.key-com { font-size: 28px; }
.cab-kb.num { align-items: center; }
.cab-kb.num .cab-kb-row { width: min(600px, 90vw); }
.cab-kb.num .cab-key { max-width: none; }
html.cabinet-landscape .cab-key { min-height: 76px; }
html.cabinet .brand { min-height: var(--tap); }
html.cabinet.cabinet-landscape .brand-tagline { display: none; }
html.cabinet.cabinet-landscape .topnav a { padding: 0 16px; }
html.cabinet.cabinet-landscape .topbar-inner { gap: 20px; }