/* ============================================================ Card PvE — Meta Display 600×600 HUD Wood + Oak Cream design system (v1) - Keep all DOM hooks listed in HANDOFF.md untouched. - All colors and sizes go through CSS variables in :root. - Meta Display deployment: add data-meta-display attr to or to force --page-bg back to true black. ============================================================ */ /* ============== 1. Design Tokens ============== */ :root { /* ---- Page background ---- */ /* For Meta Display: override to #000 (black is treated as transparent on the glasses). For design / desktop / mobile review, the oak gradient gives a "real wooden table" feel. */ --page-bg: radial-gradient( ellipse 90% 90% at 50% 30%, #6B4226 0%, #5C3826 50%, #3A2412 100% ); /* ---- Surfaces ---- */ --surface-cream: #F2EBE0; /* upper zone, mid cells, lists, hero, chips */ --surface-white: #FFFFFF; /* lower-zone (player hand area) */ --surface-dark-wood: #2A2018; /* card backs, secondary button */ /* ---- Wood tones ---- */ --wood-light: #C9A876; /* hairline border on cream surfaces */ --wood-medium: #6F5739; /* medium border, button outline */ --wood-dark: #4A3622; /* deep border on dark wood */ --wood-edge: #5C3826; /* 8px frame around the felt */ /* ---- Text on light surfaces ---- */ --text-primary: #3A2A18; --text-secondary: #6F5739; --text-tertiary: #8B6F47; /* ---- Text on felt / dark wood ---- */ --text-on-felt: #F2EBE0; --text-on-felt-muted: #C7A179; --text-on-gold: #2A2018; /* ---- Accents ---- */ --gold: #B8860B; --gold-light: #D4A24A; --gold-glow: rgba(212, 162, 74, 0.55); --red-suit: #C8312C; /* ---- Difficulty dots ---- */ --dot-easy: #56C57A; --dot-normal: #D4A24A; --dot-hard: #E55A4F; /* ---- Felt (board area) ---- */ --felt-bg: radial-gradient( ellipse 65% 75% at 50% 50%, #3D8862 0%, #1E4D2B 55%, #0A2A1A 100% ); --felt-inner-shadow: inset 0 2px 12px rgba(10, 26, 18, 0.7); /* ---- Radii ---- */ --radius-card: 12px; --radius-panel: 14px; --radius-button: 14px; --radius-chip: 8px; --radius-cardlet: 8px; --radius-hero: 24px; /* ---- Focus ---- */ --focus-color: #00E5FF; --focus-thickness: 4px; --focus-glow: 0 0 0 var(--focus-thickness) var(--focus-color), 0 0 0 7px rgba(0, 229, 255, 0.2), 0 0 28px 4px rgba(0, 229, 255, 0.72); /* ---- Layout ---- */ --viewport: 600px; --gap-zone: 10px; --pad-screen: 14px; } /* Meta Display deployment override (black = transparent on glasses) */ html[data-meta-display], body[data-meta-display] { --page-bg: #000000; } /* ============== 2. Reset & Base ============== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: var(--viewport); height: var(--viewport); overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--text-primary); background: var(--page-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: default; text-align: inherit; -webkit-user-select: none; user-select: none; } /* No native focus ring; we render our own via .is-focused */ :focus { outline: none; } button:focus-visible { outline: none; } /* ============== 3. Screen system ============== */ #app { position: relative; width: var(--viewport); height: var(--viewport); overflow: hidden; background: var(--page-bg); } .screen { width: var(--viewport); height: var(--viewport); padding: var(--pad-screen); gap: var(--gap-zone); display: flex; flex-direction: column; position: relative; /* for overlays */ } .screen.hidden, .hidden { display: none !important; } /* ============== 4. Home (#home) ============== */ #home { padding: 26px 32px 24px; gap: 14px; justify-content: space-between; } #home .hero { flex: 1; background: var(--surface-cream); border: 2px solid var(--wood-medium); border-radius: var(--radius-hero); padding: 26px 32px 24px; display: grid; grid-template-rows: auto auto auto 28px; align-items: center; justify-content: center; gap: 18px; min-height: 0; overflow: hidden; } .hero-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 2px; } .hero-title { color: var(--text-primary); font-size: 56px; font-weight: 800; line-height: 1; } .hero-subtitle { color: var(--text-secondary); font-size: 15px; line-height: 1.2; letter-spacing: 1px; } .suit-row { display: flex; align-items: center; justify-content: center; gap: 32px; height: 28px; overflow: hidden; font-size: 24px; line-height: 1; } .suit-row .black { color: var(--text-primary); } .suit-row .red { color: var(--red-suit); } #home .btn-group { display: flex; flex-direction: column; gap: 10px; } .btn-primary { width: 100%; height: 64px; background: var(--gold); border: 2px solid var(--wood-medium); border-radius: var(--radius-button); color: var(--text-on-gold); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.15s ease; } .btn-secondary { width: 100%; height: 52px; background: var(--surface-dark-wood); border: 1px solid var(--wood-dark); border-radius: var(--radius-button); color: #C9A876; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; } /* ============== 5. Top row (game-select, difficulty, settings) ============== */ .top-row { height: 44px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .top-row .spacer { width: 84px; } .top-row h1 { flex: 1; text-align: center; color: #FAF7F2; font-size: 18px; font-weight: 700; letter-spacing: 2px; } .back-btn { width: 84px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--surface-cream); border: 1px solid var(--wood-light); border-radius: 10px; padding: 0 12px 0 10px; color: var(--text-primary); font-size: 14px; font-weight: 600; } .back-btn .chev { font-size: 20px; } /* ============== 6. List (game-select, difficulty) ============== */ .list { flex: 1; display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .list-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--surface-cream); border: 1px solid var(--wood-light); border-radius: var(--radius-panel); transition: box-shadow 0.15s ease, border-color 0.15s ease; } .list-text { display: flex; flex-direction: column; gap: 4px; flex: 1; } .list-title { color: var(--text-primary); font-size: 20px; font-weight: 700; } .list-subtitle { color: var(--text-secondary); font-size: 13px; } .list-icon { color: var(--text-tertiary); font-size: 28px; line-height: 1; } /* Difficulty dot helpers */ .dot { font-size: 14px; line-height: 1; } .dot-easy { color: var(--dot-easy); } .dot-normal { color: var(--dot-normal); } .dot-hard { color: var(--dot-hard); } /* Footer hint bar */ .hint { display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 4px; color: var(--text-tertiary); font-size: 11px; font-weight: 500; letter-spacing: 1px; flex-shrink: 0; } .input-hint { text-align: center; } .brand-credit { flex-shrink: 0; color: rgba(201, 168, 118, 0.72); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; line-height: 1; text-align: center; } /* Settings keeps the same DOM hooks as the first prototype. */ .settings-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 12px; margin-top: 12px; } .setting-card { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 22px; background: var(--surface-cream); border: 1px solid var(--wood-light); border-radius: var(--radius-panel); } .setting-card span { color: var(--text-secondary); font-size: 13px; font-weight: 700; letter-spacing: 1px; } .setting-card strong { color: var(--text-primary); font-size: 24px; font-weight: 800; } .setting-card.danger strong { color: var(--red-suit); } /* ============== 7. Table — shared layout ============== */ #table { display: flex; flex-direction: column; gap: var(--gap-zone); } /* ============== 7a. Upper zone ============== */ #upper-zone { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 8px; background: var(--surface-cream); border: 1px solid var(--wood-light); border-radius: var(--radius-card); flex-shrink: 0; } #table-back { width: 56px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 2px; background: var(--surface-cream); border: 1px solid var(--wood-light); border-radius: var(--radius-chip); color: var(--text-primary); font-size: 12px; font-weight: 600; } #table-back .chev { font-size: 16px; } .upper-divider { width: 1px; height: 24px; background: var(--wood-light); flex-shrink: 0; } .upper-label { color: var(--text-tertiary); font-size: 11px; font-weight: 600; letter-spacing: 1px; flex-shrink: 0; } .chip-area { margin-left: auto; display: flex; gap: 6px; } .table-meta { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .count-label { height: 36px; display: inline-flex; align-items: center; color: var(--text-secondary); font-size: 12px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; } #p1-count, #p2-count, #p3-count, .player-chip { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--surface-cream); border: 1px solid var(--wood-light); border-radius: var(--radius-chip); color: var(--text-primary); font-size: 13px; font-weight: 700; white-space: nowrap; } #p1-count { max-width: 112px; overflow: hidden; text-overflow: ellipsis; } #p1-count .label, #p2-count .label, #p3-count .label, .player-chip .label { color: var(--text-secondary); font-size: 12px; font-weight: 600; } #p1-count .value, #p2-count .value, #p3-count .value, .player-chip .value { color: var(--text-primary); font-size: 14px; font-weight: 700; } /* ============== 7b. Board area (realistic felt) ============== */ .board-panel { height: 200px; padding: 16px 20px; background: var(--felt-bg); border: 8px solid var(--wood-edge); border-radius: var(--radius-panel); box-shadow: var(--felt-inner-shadow); display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; position: relative; } .board-panel .panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 22px; color: var(--text-on-felt-muted); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .board-panel .panel-heading strong { color: var(--gold-light); font-size: 16px; letter-spacing: 0; text-transform: none; white-space: nowrap; } #board-area { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; } #board-meta { display: flex; align-items: center; justify-content: space-between; } .board-label { color: var(--text-on-felt-muted); font-size: 11px; font-weight: 700; letter-spacing: 2px; } .board-status { display: flex; align-items: baseline; gap: 8px; } .board-status .tag { color: var(--gold-light); font-size: 12px; font-weight: 600; } .board-status .name { color: var(--text-on-felt); font-size: 18px; font-weight: 700; } .board-req { color: var(--gold-light); font-size: 20px; font-weight: 700; } .board-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; } /* Old Maid: decorative fan of opponent's hand on the felt */ .opponent-fan { display: flex; justify-content: center; /* gap is negative so cards overlap; use margin-left on siblings instead */ } .opponent-fan .fan-card + .fan-card { margin-left: -20px; } .fan-card { width: 52px; height: 74px; background: var(--surface-dark-wood); border: 1px solid var(--wood-dark); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--gold-light); } .fan-card .mark { font-size: 22px; font-weight: 700; } .fan-card .idx { font-size: 10px; color: var(--text-tertiary); } /* Big Two: single played card on the felt */ .played-card { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* Old Maid: prompt line below the fan */ .board-prompt { display: flex; align-items: center; gap: 8px; color: var(--text-on-felt); font-size: 14px; font-weight: 500; } .board-prompt .down { color: var(--gold-light); font-weight: 700; } .board-message { max-width: 500px; max-height: 38px; overflow: hidden; color: var(--text-on-felt); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; } .board-note { color: var(--text-on-felt-muted); font-size: 12px; } .board-stack { display: flex; justify-content: center; align-items: center; gap: 8px; max-width: 100%; } #board-area > .board-stack .card-face { width: 56px; height: 76px; padding: 6px; } #board-area > .board-stack .card-rank { font-size: 22px; } #board-area > .board-stack .card-suit { font-size: 24px; } .play-log { width: 100%; min-height: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; } .play-action { min-height: 28px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 8px; background: rgba(242, 235, 224, 0.09); } .play-actor { color: var(--gold-light); font-size: 12px; font-weight: 800; white-space: nowrap; } .play-pass, .play-label { color: var(--text-on-felt); font-size: 12px; font-weight: 800; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .play-pass { grid-column: span 2; color: var(--text-on-felt-muted); } .play-cards { min-width: 0; display: flex; align-items: center; gap: 3px; overflow: hidden; } .play-cards .card-face { width: 25px; height: 34px; padding: 2px; border-radius: 4px; } .play-cards .card-rank { font-size: 10px; } .play-cards .card-suit { font-size: 11px; } #board-area .play-cards .card-face { width: 25px; height: 34px; min-width: 25px; padding: 2px; border-radius: 4px; box-shadow: none; } #board-area .play-cards .card-rank { font-size: 10px; } #board-area .play-cards .card-suit { font-size: 11px; } /* ============== 7c. Middle zone ============== */ #middle-zone { height: 70px; display: flex; gap: 10px; flex-shrink: 0; } .mid-cell { flex: 1; min-width: 0; overflow: hidden; background: var(--surface-cream); border: 1px solid var(--wood-light); border-radius: var(--radius-card); padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; gap: 5px; } .mid-cell .label { color: var(--text-secondary); font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 2px; white-space: nowrap; } .mid-cell .value { color: var(--text-primary); font-size: 20px; font-weight: 700; line-height: 1.08; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #turn-value, #round-state { color: var(--text-primary); font-size: 20px; font-weight: 700; } #round-state { font-size: 19px; } #play-button, #pass-button { flex: 0 0 86px; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--wood-medium); border-radius: var(--radius-card); font-size: 20px; font-weight: 700; letter-spacing: 0; transition: box-shadow 0.15s ease; } #play-button { background: var(--surface-cream); color: var(--text-primary); } #pass-button { background: var(--gold); color: var(--text-on-gold); } /* ============== 7d. Lower zone (white) ============== */ #lower-zone { flex: 1; min-height: 0; background: var(--surface-white); border: 1px solid var(--wood-light); border-radius: var(--radius-panel); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .lower-header { display: flex; align-items: center; justify-content: space-between; } #hand-title { display: flex; align-items: center; gap: 8px; } #hand-title .tag { color: var(--gold); font-size: 13px; font-weight: 700; } #hand-title .name { color: var(--text-primary); font-size: 18px; font-weight: 700; } #player-meta { display: flex; align-items: baseline; gap: 3px; color: var(--gold); font-size: 20px; font-weight: 800; } #player-meta .num { color: var(--gold); font-size: 22px; font-weight: 700; } #player-meta .unit { color: var(--gold); font-size: 13px; font-weight: 600; } #player-hand { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 0; } #player-hand.old-maid-draw-layout { flex-direction: column; gap: 8px; justify-content: center; } .own-hand-preview, .draw-choice-row { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .own-hand-preview { min-height: 46px; gap: 3px; } .own-hand-preview .card-face { width: 32px; height: 46px; min-width: 32px; padding: 3px; border-radius: 5px; box-shadow: 0 2px 6px rgba(66, 45, 28, 0.22); } .own-hand-preview .card-rank { font-size: 13px; } .own-hand-preview .card-suit { font-size: 14px; } .draw-choice-row { min-height: 78px; gap: 8px; } .draw-choice-row .card-button { width: 54px; height: 78px; flex-basis: 54px; } .draw-choice-row .card-face { width: 54px; height: 78px; padding: 7px; } .draw-choice-row .card-rank { font-size: 20px; } .draw-choice-row .card-suit { font-size: 18px; } /* ============== 8. Cards ============== */ .card { width: 64px; height: 92px; flex-shrink: 0; border-radius: var(--radius-cardlet); padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: box-shadow 0.15s ease, transform 0.12s ease; } .card-button { position: relative; width: 64px; height: 112px; flex: 0 0 64px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-cardlet); transition: box-shadow 0.15s ease, transform 0.12s ease, opacity 0.12s ease; } .card-button.unplayable { opacity: 0.42; } .card-button.selected .card-face { background: #FFF5CC; box-shadow: 0 0 0 4px var(--gold), 0 0 0 8px #FFFFFF, 0 0 24px rgba(184, 134, 11, 0.82); transform: translateY(-10px) scale(1.04); } .card-button.selected::after { content: "✓"; position: absolute; transform: translate(25px, -48px); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gold); color: var(--text-on-gold); font-size: 14px; font-weight: 900; } .card-button.action-card { width: 132px; flex-basis: 132px; height: 74px; background: var(--gold); border: 1px solid var(--wood-medium); color: var(--text-on-gold); font-size: 18px; font-weight: 800; } .card.is-face, .card-face { width: 64px; height: 92px; flex-shrink: 0; border-radius: var(--radius-cardlet); padding: 8px; display: flex; flex-direction: column; align-items: center; background: var(--surface-cream); border: 1px solid var(--wood-light); justify-content: center; gap: 0; } .card.is-face .rank, .card-face .rank, .card-face .card-rank { color: var(--text-primary); font-size: 20px; font-weight: 700; line-height: 1; } .card.is-face .suit, .card-face .suit, .card-face .card-suit { color: var(--text-primary); font-size: 24px; line-height: 1; } /* Red suits (hearts / diamonds). Add class `red` OR data-color="red" when rendering the card. See HANDOFF.md §4. */ .card.is-face.red .rank, .card.is-face.red .suit, .card-face.red .rank, .card-face.red .suit, .card-face.red .card-rank, .card-face.red .card-suit, .card[data-color="red"] .rank, .card[data-color="red"] .suit { color: var(--red-suit); } .card.is-back, .card-back, .card-face.hidden-card { background: var(--surface-dark-wood); border: 1px solid var(--wood-dark); justify-content: center; gap: 6px; color: var(--gold-light); } .card.is-back .mark, .card-back .mark, .card-face.hidden-card .card-rank { color: var(--gold-light); font-size: 28px; font-weight: 700; line-height: 1; } .card.is-back .idx, .card-back .idx, .card-face.hidden-card .card-suit { color: var(--text-tertiary); font-size: 12px; font-weight: 600; line-height: 1; } /* ============== 9. Focus & active-zone ============== */ /* The focused item inside the currently-active zone. */ .focusable:focus, .focusable.is-focused { box-shadow: var(--focus-glow); position: relative; z-index: 3; } /* For the list items / Pass button which already have their own borders, layer the gold glow on top instead of replacing the border. */ .list-item.is-focused { border-color: var(--gold); box-shadow: var(--focus-glow); } #play-button.is-focused, #pass-button.is-focused { box-shadow: var(--focus-glow); } /* Cards: subtle lift + gold ring */ .card.is-focused, .card-button.is-focused, .card-button:focus { box-shadow: var(--focus-glow); transform: translateY(-5px) scale(1.03); } /* Optional: very subtle hint on the active zone container. Off by default — uncomment if you want a visible cue. */ .zone.active-zone { outline: 1px dashed rgba(212, 162, 74, 0.35); outline-offset: 2px; } /* ============== 10. Overlays ============== */ #round-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(58, 42, 24, 0.88); color: var(--text-on-felt); font-size: 32px; font-weight: 800; letter-spacing: 2px; z-index: 20; border-radius: var(--radius-panel); } #round-overlay.show { display: flex; } #round-overlay:not(.hidden) { display: flex; } #toast { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 10px 18px; background: var(--surface-cream); border: 1px solid var(--wood-light); border-radius: 10px; color: var(--text-primary); font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 30; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } #toast.show { opacity: 1; } #toast:not(.hidden) { opacity: 1; } /* Board action rows use true mini cards; keep these after generic card rules. */ #board-area .play-cards .card-face { width: 25px; height: 34px; min-width: 25px; padding: 2px; border-radius: 4px; box-shadow: none; } #board-area .play-cards .card-rank { font-size: 10px; } #board-area .play-cards .card-suit { font-size: 11px; } /* ============== 11. Misc safety ============== */ /* Hide focus on non-focusable buttons (e.g. if a dev forgets a class) */ button:not(.focusable):focus-visible { box-shadow: none; } /* Ensure cards never break the lower zone width when there are many */ #player-hand { overflow: hidden; }