/* ========================= General Styles ========================= */ :root{ /* Tunable size vars (affect all screens) */ --gap: 6px; /* space between tiles */ --tile-min: 38px; /* smallest tile height */ --tile-max: 78px; /* largest tile height */ --fs-min: 0.50rem; /* smallest tile font */ --fs-max: 1.00rem; /* largest tile font */ --card-ar: 1.8 / 1; /* much wider cards */ --font-target: clamp(var(--fs-min), calc(clamp(var(--tile-min), 18vw, var(--tile-max)) * 0.2), var(--fs-max)); --section-max: min(96vw, 1500px); --chrome-gap: clamp(8px, 1.6vw, 16px); --board-padding: clamp(4px, 0.8vw, 10px); --board-gap: var(--gap); } /* Player page: slightly smaller cards, larger text */ body.player-page{ /* make cards adapt to viewport height while staying readable */ --tile-min: 56px; --tile-max: 170px; --fs-min: 0.9rem; --fs-max: 2rem; --layout-chrome: clamp(120px, 20vh, 200px); --card-ar: 2; /* slightly slimmer cards */ --board-max-height: calc(100vh - var(--layout-chrome)); --board-width-by-height: calc(((var(--board-max-height) - (var(--board-gap) * 4) - (var(--board-padding) * 2)) * var(--card-ar)) + (var(--board-gap) * 4) + (var(--board-padding) * 2)); --board-max-width: min(var(--section-max), 96vw, var(--board-width-by-height)); --tile-target-by-height: calc((var(--board-max-height) - (var(--board-gap) * 4) - (var(--board-padding) * 2)) / 5); --tile-target-by-width: calc((var(--board-max-width) - (var(--board-gap) * 4) - (var(--board-padding) * 2)) / (5 * var(--card-ar))); --tile-target: clamp(var(--tile-min), min(var(--tile-target-by-height), var(--tile-target-by-width)), var(--tile-max)); --font-target: clamp(var(--fs-min), calc(var(--tile-target) * 0.36), var(--fs-max)); } /* Optional ultra-compact mode: add class="compact" to */ body.compact{ --gap: 4px; --tile-min: 32px; --tile-max: 68px; --fs-min: 0.44rem; --fs-max: 0.90rem; --card-ar: 1 / 1.18; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f4f4f4; color: #333; text-align: center; margin: 0; padding: clamp(10px, 2vw, 18px); line-height: 1.4; min-height: 100vh; } h1 { color: #5a5a5a; font-size: clamp(1.5rem, 4vw, 2.4rem); margin: 0 0 10px 0; } .page-header{ display: flex; align-items: center; justify-content: space-between; gap: var(--chrome-gap); flex-wrap: wrap; margin: 0 auto clamp(10px, 3vh, 18px); width: var(--section-max); } .header-controls{ display: flex; flex-wrap: wrap; gap: clamp(6px, 1vw, 12px); justify-content: flex-end; align-items: center; } .primary-actions{ display: flex; gap: clamp(6px, 1vw, 12px); align-items: center; } #end-turn-button.inactive{ background-color: #f5d6a6; color: #705424; cursor: pointer; opacity: 0.85; } .spymaster-selection{ display: flex; gap: clamp(6px, 1vw, 12px); flex-wrap: wrap; justify-content: flex-end; } .info-bar{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-areas: "red turn clue attempts blue"; gap: clamp(6px, 1.2vw, 14px); align-items: stretch; justify-content: center; margin: 6px auto 12px auto; max-width: var(--section-max); width: 100%; } #red-score { grid-area: red; } #turn-display { grid-area: turn; } #clue-display { grid-area: clue; } #attempts-display { grid-area: attempts; } #blue-score { grid-area: blue; } .info-pill{ flex: 1 1 200px; background-color: #ffffff; border-radius: 10px; padding: clamp(10px, 1.6vw, 16px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); font-size: clamp(1.05rem, 2.6vw, 1.6rem); font-weight: 700; display: flex; align-items: center; justify-content: center; min-height: clamp(48px, 8vh, 68px); box-sizing: border-box; transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, color 0.4s ease; line-height: 1.2; text-wrap: balance; } body.player-page .info-pill{ padding: clamp(8px, 1vw, 12px); min-height: clamp(42px, 7vh, 58px); font-size: clamp(0.95rem, 2.3vw, 1.45rem); } body.player-page #clue-display, body.player-page #attempts-display { font-size: clamp(1.05rem, 2.8vw, 1.55rem); font-weight: 700; } .score-pill{ flex: 0 0 clamp(120px, 16vw, 220px); font-size: clamp(1.25rem, 2.4vw, 1.9rem); font-weight: 800; color: #fff; } .score-pill--red{ background: linear-gradient(135deg, rgba(217,83,79,0.85), rgba(217,83,79,0.65)); color: #ffeaea; } .score-pill--blue{ background: linear-gradient(135deg, rgba(91,192,222,0.85), rgba(91,192,222,0.65)); color: #e9fbff; } #red-score, #blue-score{ letter-spacing: 1px; text-transform: uppercase; } #clue-display, #attempts-display { font-size: clamp(0.95rem, 2.2vw, 1.35rem); font-weight: 600; } @media (max-width: 1100px){ .info-bar{ grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "red turn blue" "clue clue attempts"; } } @media (max-width: 720px){ .info-bar{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "red blue" "turn turn" "clue clue" "attempts attempts"; } } .game-container { display: flex; align-items: stretch; justify-content: center; flex-wrap: nowrap; gap: clamp(16px, 2vw, 28px); margin: 10px auto; max-width: var(--section-max); padding: 0 clamp(6px, 1.6vw, 20px); width: 100%; box-sizing: border-box; } .score-container { display: flex; align-items: center; justify-content: center; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; padding: 12px; border-radius: 12px; min-width: clamp(70px, 10vw, 130px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); background: #ffffff; } .score-container#red-score { background: linear-gradient(135deg, rgba(217,83,79,0.85), rgba(217,83,79,0.65)); color: #ffeaea; } .score-container#blue-score { background: linear-gradient(135deg, rgba(91,192,222,0.85), rgba(91,192,222,0.65)); color: #e9fbff; } /* old side score boxes removed */ /* ========================= Board Styles (5x5 always) ========================= */ #board, #spymaster-board { display: grid; grid-template-columns: repeat(5, 1fr); /* keep 5 columns on all screens */ gap: var(--board-gap); margin: 0 auto; width: 100%; max-width: 100%; padding: var(--board-padding); background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-sizing: border-box; min-width: 0; } body.player-page #board{ /* fit board to available height + width */ flex: 1 1 var(--board-max-width); width: var(--board-max-width); max-width: var(--board-max-width); } /* --- Card Flip Animation Styles --- */ .card { background-color: transparent; aspect-ratio: var(--card-ar); min-height: var(--tile-target); min-width: 0; border: none; perspective: 1000px; cursor: pointer; touch-action: manipulation; /* prevents double-tap zoom on iOS */ } .card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .card.revealed .card-inner { transform: rotateY(180deg); cursor: default; } .card-front, .card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: var(--font-target); line-height: 1.15; padding: clamp(6px, var(--tile-target) * 0.12, 16px); box-sizing: border-box; text-align: center; /* Make long words behave on phones */ text-transform: none; /* uppercase widens words; keep lowercase for fit */ word-break: normal; overflow-wrap: anywhere; hyphens: auto; font-weight: 700; } .card-front { background-color: #f0e6d2; border: 1px solid #c8aa6e; color: #333; } /* Hover effects only for non-touch devices */ @media (hover: hover) and (pointer: fine) { .card:hover .card-front { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } } .card-back { color: white; transform: rotateY(180deg); font-weight: 900; } /* Card Back Colors */ .card-back.red { background-color: #d9534f; border: 2px solid #d43f3a; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2); } .card-back.blue { background-color: #5bc0de; border: 2px solid #46b8da; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2); } .card-back.neutral { background-color: #bfa885; border: 2px solid #a89270; color: #333; font-weight: bold; } .card-back.assassin { background-color: #333; border: 2px solid #000; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3); } /* =========================================================== Spymaster Card Colors (Unrevealed) =========================================================== */ .card.red-spymaster .card-front { background-color: #f2dede; border: 2px solid #d9534f; color: #721c24; font-weight: 900; } .card.blue-spymaster .card-front { background-color: #d9edf7; border: 2px solid #5bc0de; color: #245269; font-weight: 900; } .card.neutral-spymaster .card-front { background-color: #faf2e4; border: 2px solid #bfa885; color: #5d4e37; font-weight: 900; } .card.assassin-spymaster .card-front { background-color: #555; border: 2px solid #333; color: white; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,0,0,0.3); } .card.revealed-spymaster .card-inner { opacity: 0.4; cursor: default; } /* ========================= Modal Styles ========================= */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); padding: 20px; box-sizing: border-box; } .modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 100%; max-width: 500px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); position: relative; box-sizing: border-box; } .close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 20px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; } .modal-content h2 { margin-top: 0; padding-right: 40px; } .modal-content input { width: 100%; padding: 12px; margin-bottom: 12px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; font-size: 16px; /* prevents zoom on iOS */ } #qr-canvas { display: block; margin: 20px auto; max-width: 100%; height: auto; } #spymaster-url { font-family: monospace; background: #eee; padding: 10px; border-radius: 5px; word-wrap: break-word; word-break: break-all; font-size: 12px; } /* ========================= Choice Buttons ========================= */ .choice-button-container { display: flex; justify-content: space-around; align-items: center; margin-top: 20px; gap: 10px; flex-wrap: wrap; } .choice-button-container button { flex: 1; min-width: 120px; padding: 15px 10px; font-size: 1em; touch-action: manipulation; } /* ========================= UI Elements ========================= */ #turn-display { color: inherit; } #turn-display.team-red { background: linear-gradient(135deg, rgba(217,83,79,0.18), rgba(217,83,79,0.38)); color: #7f1d1d; box-shadow: 0 6px 18px rgba(217,83,79,0.28); } #turn-display.team-blue { background: linear-gradient(135deg, rgba(91,192,222,0.18), rgba(91,192,222,0.4)); color: #0c4c5a; box-shadow: 0 6px 18px rgba(91,192,222,0.25); } #turn-display.turn-animate { will-change: transform; } .turn-animate { animation: turnPulse 0.65s cubic-bezier(0.25, 1, 0.5, 1); } @keyframes turnPulse { 0% { transform: scale(0.85) rotate(-2deg); box-shadow: 0 0 0 rgba(0,0,0,0); opacity: 0.6; } 60% { transform: scale(1.04) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); } } #clue-display { color: #0275d8; } #attempts-display { color: #555; } #clue-form { margin: 15px 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; } #clue-form input { padding: 10px; border-radius: 5px; border: 1px solid #ccc; font-size: 16px; /* prevents zoom on iOS */ min-width: 120px; flex: 1; max-width: 200px; } #end-turn-button { margin: 0 auto 10px; } /* ========================= Buttons ========================= */ button { padding: 12px 20px; border-radius: 6px; border: none; background-color: #5bc0de; color: white; font-size: clamp(0.92rem, 2.2vw, 1rem); cursor: pointer; transition: background-color 0.2s; margin: 4px; touch-action: manipulation; min-height: 44px; /* iOS recommended minimum touch target */ font-weight: 600; } button:hover { background-color: #31b0d5; } button:disabled { background-color: #ccc; cursor: not-allowed; } #new-game, #play-again-button { background-color: #5cb85c; } #new-game:hover, #play-again-button:hover { background-color: #4cae4c; } #end-turn-button { background-color: #f0ad4e; } #end-turn-button:hover { background-color: #ec971f; } #red-spymaster-main { background-color: #d9534f; } #red-spymaster-main:hover { background-color: #c9302c; } /* ========================= Responsive tweaks (5 columns always) ========================= */ @media (min-width: 769px) { #board, #spymaster-board { gap: 10px; } } @media (max-width: 768px) { body { padding: 10px; } body.player-page { --layout-chrome: clamp(120px, 28vh, 200px); --tile-min: 44px; --tile-max: 100px; --card-ar: 1.35; } .page-header { justify-content: center; } .header-controls { justify-content: center; } .info-bar { justify-content: center; } .info-pill { flex: 1 1 100%; } .game-container { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 0 12px; max-width: none; } .score-container { width: 100%; max-width: none; flex: 1 1 auto; flex-direction: row; justify-content: space-around; order: -1; margin-bottom: 10px; font-size: clamp(1.5rem, 6vw, 2.2rem); } #board, #spymaster-board { grid-template-columns: repeat(5, minmax(0, 1fr)); /* keep 5 cols */ gap: var(--board-gap); padding: 12px; max-width: none; width: 100%; --card-ar: 1 / 1.15; /* make cards slightly taller on mobile */ } body.player-page #board { width: 100%; max-width: none; } #clue-form { flex-direction: column; } #clue-form input { max-width: none; width: 100%; } .choice-button-container { flex-direction: column; gap: 10px; } .choice-button-container button { width: 100%; min-width: 0; } } @media (max-width: 480px) { :root { --gap: 4px; } h1 { font-size: clamp(1.3rem, 5vw, 1.8rem); } #board, #spymaster-board { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); padding: 8px; } .modal { padding: 10px; } .modal-content { margin: 5% auto; padding: 15px; } } @media (max-width: 360px) { .score-container { font-size: clamp(1.2rem, 8vw, 1.8rem); } } /* Landscape phone optimization */ @media (max-height: 500px) and (orientation: landscape) { body { padding: 5px; } h1 { margin: 5px 0 10px 0; font-size: 1.5rem; } .game-container { margin: 5px auto; } #turn-display, #clue-display, #attempts-display { font-size: 1.05rem; } .modal-content { margin: 2% auto; max-height: 90vh; overflow-y: auto; } #board, #spymaster-board { grid-template-columns: repeat(5, minmax(0, 1fr)); } body.player-page { --layout-chrome: clamp(96px, 18vh, 160px); --tile-min: 40px; --tile-max: 90px; --card-ar: 1.35; } } #board{ margin-inline: auto; } .info-pill strong{ letter-spacing: 0.5px; }