@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Lilita+One&family=VT323&display=swap');
/* ========================================================================== Complete SCSS Styles for Shifting Tides Game - v_scenes_final_complete THEME: 70s Geometric - Animated Gradient Background STRUCTURE: Scene-Based Layout - ALL STYLES INCLUDED ========================================================================== */
/* --- Import Google Font --- */
/* --- 1970s Geometric Art Color Palette & Variables --- */
 :root {
	 --seventies-bg: #fffdd0;
	/* Cream */
	 --seventies-panel-bg: #f5f5dc;
	/* Beige */
	 --seventies-dark: #4a2e19;
	/* Dark Brown */
	 --seventies-accent1: #e87a00;
	/* Burnt Orange */
	 --seventies-accent2: #ffc107;
	/* Amber/Gold */
	 --seventies-red: #c62828;
	/* Bold Red */
	 --seventies-blue: #0277bd;
	/* Bright Blue */
	 --seventies-green: #558b2f;
	/* Avocado Green */
	 --seventies-neutral: #bdbdbd;
	/* Grey for borders/neutrals */
	 --font-stack: 'Poppins', sans-serif;
	 --font-heading: "Lilita One", sans-serif;
	 --gradient-color-1: #f096a0;
	 --gradient-color-2: #e66a2e;
	 --gradient-color-3: var(--seventies-accent2);
	 --gradient-color-4: var(--seventies-bg);
	 --card-width-mobile: 55px;
	 --card-height-mobile: 80px;
	 --card-width-desktop: 65px;
	 --card-height-desktop: 95px;
}
/* --- Global Settings --- */
 html {
	 height: 100%;
	 box-sizing: border-box;
}
 *, *:before, *:after {
	 box-sizing: inherit;
}
/* --- Mixins --- */
/* --- Keyframes for Animations --- */
 @keyframes bobbing {
	 0% {
		 transform: translateY(0);
	}
	 50% {
		 transform: translateY(-4px);
	}
	 100% {
		 transform: translateY(0);
	}
}
 @keyframes animatedBackground {
	/* For Gradient */
	 0% {
		 background-position: 0% 50%;
	}
	 50% {
		 background-position: 100% 50%;
	}
	 100% {
		 background-position: 0% 50%;
	}
}
/* --- Base Body Styles (Mobile First) --- */
 body {
	/* Animated Gradient Background */
	 background: linear-gradient(120deg, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3), var(--gradient-color-4));
	 background-size: 300% 300%;
	 animation: animatedBackground 20s ease-in-out infinite;
	 color: var(--seventies-dark);
	 font-family: var(--font-stack);
	 margin: 0;
	 padding: 15px;
	 font-size: 14px;
	 line-height: 1.6;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 justify-content: center;
	 min-height: 100vh;
}
/* --- Utility --- */
 .hidden {
	 display: none !important;
}
 .red-text {
	 color: var(--seventies-red);
}
 .blue-text {
	 color: var(--seventies-blue);
}
 .green-text {
	 color: var(--seventies-green);
}
/* --- Base Card Style --- */
 .card {
	 width: var(--card-width-mobile);
	 height: var(--card-height-mobile);
	 border: 2px solid var(--seventies-neutral);
	 border-radius: 4px;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 font-size: 28px;
	 font-weight: 700;
	 box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
	 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	 cursor: pointer;
}
 .card.red {
	 background-color: var(--seventies-red);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-red);
}
 .card.blue {
	 background-color: var(--seventies-blue);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-blue);
}
 .card.green {
	 background-color: var(--seventies-green);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-green);
}
 .card-back {
	 background-color: var(--seventies-dark);
	 border: 2px solid var(--seventies-accent1);
	 color: var(--seventies-accent1);
	 line-height: var(--card-height-mobile);
	 font-size: 24px;
}
/* ===================================== Rules Button - Positioned Top Left ===================================== */
 #rules-button {
	 font-family: var(--font-stack);
	 font-weight: 600;
	 background-color: var(--seventies-accent2);
	 color: var(--seventies-dark);
	 border: 2px solid var(--seventies-dark);
	 border-radius: 4px;
	 padding: 10px 18px;
	 margin: 5px;
	 cursor: pointer;
	 transition: background-color 0.2s, transform 0.1s ease, box-shadow 0.1s ease;
	 text-transform: uppercase;
	 letter-spacing: 0.5px;
	 box-shadow: 3px 3px 0px var(--seventies-dark);
	 position: fixed;
	 top: 15px;
	 left: 15px;
	 z-index: 100;
	 font-size: 12px;
	 padding: 8px 12px;
	 box-shadow: 2px 2px 0px var(--seventies-dark);
}
 #rules-button:hover:not(:disabled) {
	 background-color: var(--seventies-accent1);
	 color: var(--seventies-bg);
	 transform: translate(1px, 1px);
	 box-shadow: 2px 2px 0px var(--seventies-dark);
}
 #rules-button:active:not(:disabled) {
	 transform: translate(2px, 2px);
	 box-shadow: 1px 1px 0px var(--seventies-dark);
}
 #rules-button:disabled {
	 background-color: var(--seventies-neutral);
	 color: var(--seventies-panel-bg);
	 cursor: not-allowed;
	 opacity: 0.7;
	 box-shadow: 2px 2px 0px var(--seventies-dark);
	 transform: none;
}
/* ===================================== Scene Container Base Styles ===================================== */
 .scene-container {
	 background-color: var(--seventies-panel-bg);
	 border: 3px solid var(--seventies-dark);
	 border-radius: 8px;
	 width: 100%;
	 max-width: 450px;
	 text-align: center;
	 box-shadow: 5px 5px 0px var(--seventies-accent1);
	 margin: 0;
	 display: flex;
	 flex-direction: column;
	 padding: 20px;
	 position: relative;
	 z-index: 10;
}
 .scene-container h2 {
	 color: var(--seventies-dark);
	 font-weight: 600;
	 margin-top: 0;
	 margin-bottom: 15px;
	 font-size: 18px;
	 border-bottom: 2px solid var(--seventies-accent2);
	 display: inline-block;
	 padding-bottom: 3px;
}
/* ===================================== Scene Specific Styles ===================================== */
/* --- Scene 1: Menu --- */
 #game-menu-container {
	 padding: 30px;
}
 #game-menu-container h1 {
	 color: var(--seventies-accent1);
	 font-weight: 700;
	 margin-top: 0;
	 margin-bottom: 25px;
	 font-size: 36px;
	 letter-spacing: 1px;
	 text-shadow: 1px 1px 0px var(--seventies-dark);
	 font-family: var(--font-heading);
	 font-size: 72px !important;
	 line-height: 68px;
}
 #game-menu-container #menu-message {
	 color: var(--seventies-dark);
	 min-height: 40px;
	 font-size: 16px;
	 font-weight: 400;
	 margin-bottom: 25px;
	 line-height: 1.7;
}
 #game-menu-container #start-button {
	 font-family: var(--font-stack);
	 font-weight: 600;
	 background-color: var(--seventies-accent1);
	 color: var(--seventies-bg);
	 border: 2px solid var(--seventies-dark);
	 border-radius: 4px;
	 padding: 10px 18px;
	 margin: 5px;
	 cursor: pointer;
	 transition: background-color 0.2s, transform 0.1s ease, box-shadow 0.1s ease;
	 text-transform: uppercase;
	 letter-spacing: 0.5px;
	 box-shadow: 3px 3px 0px var(--seventies-dark);
	 padding: 12px 25px;
	 font-size: 16px;
}
 #game-menu-container #start-button:hover:not(:disabled) {
	 background-color: var(--seventies-accent2);
	 color: var(--seventies-dark);
	 transform: translate(1px, 1px);
	 box-shadow: 2px 2px 0px var(--seventies-dark);
}
 #game-menu-container #start-button:active:not(:disabled) {
	 transform: translate(2px, 2px);
	 box-shadow: 1px 1px 0px var(--seventies-dark);
}
 #game-menu-container #start-button:disabled {
	 background-color: var(--seventies-neutral);
	 color: var(--seventies-panel-bg);
	 cursor: not-allowed;
	 opacity: 0.7;
	 box-shadow: 2px 2px 0px var(--seventies-dark);
	 transform: none;
}
/* --- Scene 2: Allegiance --- */
 #allegiance-scene-container h2 {
	 margin-bottom: 10px;
	 font-size: 1.2em;
}
 #allegiance-scene-container #allegiance-prompt {
	 margin-bottom: 20px;
	 font-size: 1.1em;
	 font-weight: 400;
}
 #allegiance-scene-container .card-hand-display {
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 flex-wrap: wrap;
	 gap: 8px;
	 margin-bottom: 10px;
	 padding: 10px;
	 min-height: calc(var(--card-height-mobile) * 2 + 20px);
}
 #allegiance-scene-container .card-hand-display .card {
	 animation: none;
	 position: relative;
	 z-index: 1;
}
 #allegiance-scene-container .card-hand-display .card:hover {
	 transform: translateY(-3px);
	 border-color: var(--seventies-accent2);
	 z-index: 10;
}
 #allegiance-scene-container #allegiance-hand-display {
	/* No specific overrides needed */
}
/* --- Scene 3: Skip --- */
 #skip-scene-container h2 {
	 margin-bottom: 10px;
	 font-size: 1.2em;
}
 #skip-scene-container #skip-prompt {
	 margin-bottom: 15px;
	 font-size: 1.1em;
}
 #skip-scene-container #skip-controls {
	 margin: 10px 0;
	 padding: 8px;
	 border: 2px dashed var(--seventies-accent2);
	 border-radius: 4px;
	 background-color: rgba(74, 46, 25, 0.1);
}
 #skip-scene-container #skip-controls .skip-button {
	 font-family: var(--font-stack);
	 font-weight: 600;
	 background-color: var(--seventies-accent2);
	 color: var(--seventies-dark);
	 border: 2px solid var(--seventies-dark);
	 border-radius: 4px;
	 padding: 10px 18px;
	 margin: 5px;
	 cursor: pointer;
	 transition: background-color 0.2s, transform 0.1s ease, box-shadow 0.1s ease;
	 text-transform: uppercase;
	 letter-spacing: 0.5px;
	 box-shadow: 3px 3px 0px var(--seventies-dark);
	 font-size: 12px;
	 padding: 8px 12px;
	 box-shadow: 2px 2px 0px var(--seventies-dark);
	 margin: 3px;
}
 #skip-scene-container #skip-controls .skip-button:hover:not(:disabled) {
	 background-color: var(--seventies-accent1);
	 color: var(--seventies-bg);
	 transform: translate(1px, 1px);
	 box-shadow: 2px 2px 0px var(--seventies-dark);
}
 #skip-scene-container #skip-controls .skip-button:active:not(:disabled) {
	 transform: translate(2px, 2px);
	 box-shadow: 1px 1px 0px var(--seventies-dark);
}
 #skip-scene-container #skip-controls .skip-button:disabled {
	 background-color: var(--seventies-neutral);
	 color: var(--seventies-panel-bg);
	 cursor: not-allowed;
	 opacity: 0.7;
	 box-shadow: 2px 2px 0px var(--seventies-dark);
	 transform: none;
}
/* --- Scene 4: Play --- */
 #play-scene-container {
	/* Balance Tracker Styles */
	/* AI Area Styles */
	/* Player Area Styles */
}
 #play-scene-container h2 {
	 margin-bottom: 5px;
	 font-size: 1.1em;
}
 #play-scene-container h2 .skip-indicator {
	 font-size: 12px;
}
 #play-scene-container #play-scene-info {
	/* Skip status text */
	 font-size: 0.9em;
	 color: var(--seventies-accent1);
	 font-weight: 600;
	 min-height: 1.2em;
	 margin-bottom: 5px;
	 text-align: center;
}
 #play-scene-container #in-game-message {
	/* Main prompt/message */
	 color: var(--seventies-dark);
	 min-height: 40px;
	 font-size: 14px;
	 font-weight: 400;
	 background-color: rgba(255, 193, 7, 0.1);
	 border: 1px solid var(--seventies-accent2);
	 border-radius: 4px;
	 padding: 8px;
	 margin: 10px 0 15px 0;
	 flex-shrink: 0;
}
 #play-scene-container #balance-tracker-container {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 margin: 15px 0;
	 padding: 8px;
	 background: var(--seventies-dark);
	 border-radius: 4px;
	 flex-shrink: 0;
}
 #play-scene-container #balance-tracker-container .track-label {
	 font-size: 10px;
	 font-weight: 600;
	 padding: 0 5px;
	 flex-shrink: 0;
}
 #play-scene-container #balance-tracker-container #balance-tracker {
	 width: 100%;
	 height: 25px;
	 background: linear-gradient(to right, var(--seventies-red) 0%, var(--seventies-red) 40%, var(--seventies-bg) 48%, var(--seventies-bg) 52%, var(--seventies-blue) 60%, var(--seventies-blue) 100%);
	 border: 2px solid var(--seventies-neutral);
	 position: relative;
	 border-radius: 3px;
	 margin: 0 5px;
	 overflow: hidden;
}
 #play-scene-container #balance-tracker-container #balance-tracker #balance-marker {
	 width: 25px;
	 height: 100%;
	 background-color: #fff;
	/* Start neutral */
	 border: none;
	 border-radius: 0;
	 position: absolute;
	 top: 0;
	 left: 0;
	 transform: none;
	 transition: width 0.5s ease-in-out, left 0.5s ease-in-out, background-color 0.5s ease;
	 box-shadow: none;
}
 #play-scene-container #balance-value {
	 color: var(--seventies-accent1);
	 margin-top: 5px;
	 margin-bottom: 15px;
	 font-size: 14px;
	 font-weight: 600;
	 flex-shrink: 0;
}
 #play-scene-container #ai-areas {
	 display: flex;
	 flex-direction: column;
	 gap: 10px;
	 margin: 10px 0;
	 flex-shrink: 0;
}
 #play-scene-container #ai-areas .ai-area {
	 border: 2px solid var(--seventies-neutral);
	 border-radius: 6px;
	 padding: 10px;
	 background-color: var(--seventies-bg);
}
 #play-scene-container #ai-areas .ai-area h3 {
	 font-size: 1em;
	 font-weight: 600;
	 margin-bottom: 5px;
	 margin-top: 0;
	 border-bottom: 1px solid var(--seventies-neutral);
	 display: inline-block;
	 padding-bottom: 2px;
}
 #play-scene-container #ai-areas .ai-area h3 .skip-indicator {
	 font-size: 10px;
}
 #play-scene-container #ai-areas .ai-area .allegiance-card-area {
	 display: none;
}
 #play-scene-container #ai-areas .ai-area .ai-card-played {
	 width: var(--card-width-mobile);
	 height: var(--card-height-mobile);
	 border: 2px solid var(--seventies-neutral);
	 border-radius: 4px;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 font-size: 24px;
	 font-weight: 700;
	 box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
	 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	 display: inline-flex;
	 line-height: normal;
	 border-color: var(--seventies-accent1);
	 background-color: var(--seventies-panel-bg);
	 color: var(--seventies-accent1);
	 margin-top: 5px;
	 vertical-align: middle;
	 text-align: center;
	 cursor: default;
}
 #play-scene-container #ai-areas .ai-area .ai-card-played.red {
	 background-color: var(--seventies-red);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-red);
}
 #play-scene-container #ai-areas .ai-area .ai-card-played.blue {
	 background-color: var(--seventies-blue);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-blue);
}
 #play-scene-container #ai-areas .ai-area .ai-card-played.green {
	 background-color: var(--seventies-green);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-green);
}
 #play-scene-container #ai-areas .ai-area .ai-status {
	 margin-top: 8px;
	 font-size: 12px;
	 color: var(--seventies-dark);
	 min-height: 15px;
	 font-weight: 600;
}
 #play-scene-container #player-area {
	 margin-top: 10px;
	 border: 3px solid var(--seventies-accent1);
	 border-radius: 6px;
	 padding: 0;
	 background-color: var(--seventies-dark);
	 flex-shrink: 0;
}
 #play-scene-container #player-area h3 {
	 color: var(--seventies-bg);
	 border-bottom-color: var(--seventies-accent2);
	 margin-bottom: 5px;
	 padding: 10px 10px 0 10px;
	 font-size: 1em;
	 font-weight: 600;
	 display: inline-block;
}
 #play-scene-container #player-area h3 .skip-indicator {
	 font-size: 10px;
}
 #play-scene-container #player-area .player-allegiance-area {
	 color: var(--seventies-bg);
	 padding: 5px 10px 0 10px;
	 margin-bottom: 5px;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 gap: 5px;
	 justify-content: flex-start;
	 font-size: 12px;
	 font-weight: 600;
	 min-height: 60px;
}
 #play-scene-container #player-area .player-allegiance-area .card {
	 width: 35px;
	 height: 50px;
	 border: 2px solid var(--seventies-neutral);
	 border-radius: 4px;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 font-size: 18px;
	 font-weight: 700;
	 box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
	 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	 cursor: default;
	 animation: none !important;
	 transition: none;
}
 #play-scene-container #player-area .player-allegiance-area .card:hover {
	 transform: none;
	 box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}
 #play-scene-container #player-area .player-allegiance-area .card.red {
	 background-color: var(--seventies-red);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-red);
}
 #play-scene-container #player-area .player-allegiance-area .card.blue {
	 background-color: var(--seventies-blue);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-blue);
}
 #play-scene-container #player-area .player-allegiance-area .card.green {
	 background-color: var(--seventies-green);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-green);
}
 #play-scene-container #player-area .player-allegiance-area .card.card-back {
	 background-color: var(--seventies-dark);
	 border-color: var(--seventies-accent1);
	 color: var(--seventies-accent1);
}
 #play-scene-container #player-area #player-hand {
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 flex-wrap: wrap;
	 gap: 8px;
	 margin-bottom: 10px;
	 min-height: calc(var(--card-height-mobile) + 4px);
	 padding: 10px;
}
 #play-scene-container #player-area #player-hand .card {
	 width: var(--card-width-mobile);
	 height: var(--card-height-mobile);
	 border: 2px solid var(--seventies-neutral);
	 border-radius: 4px;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 font-size: 28px;
	 font-weight: 700;
	 box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
	 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	 cursor: pointer;
	 animation: bobbing 1.8s ease-in-out infinite;
	 position: relative;
	 z-index: 1;
	 border-color: var(--seventies-neutral);
}
 #play-scene-container #player-area #player-hand .card.red {
	 background-color: var(--seventies-red);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-red);
}
 #play-scene-container #player-area #player-hand .card.blue {
	 background-color: var(--seventies-blue);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-blue);
}
 #play-scene-container #player-area #player-hand .card.green {
	 background-color: var(--seventies-green);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-green);
}
 #play-scene-container #player-area #player-hand .card:hover {
	 animation-play-state: paused;
	 transform: translateY(-5px) scale(1.15);
	 box-shadow: 8px 10px 20px rgba(0, 0, 0, 0.4);
	 z-index: 10;
	 border-color: var(--seventies-accent2);
}
 #play-scene-container #player-area #player-hand .card.selected {
	 animation-play-state: paused;
	 transform: scale(1.08) translateY(-3px);
	 border-color: var(--seventies-accent2);
	 box-shadow: 0 0 12px var(--seventies-accent2);
	 z-index: 5;
}
 #play-scene-container #player-area #player-hand .card.green[style*="cursor: not-allowed"] {
	 filter: grayscale(50%);
	 box-shadow: none;
	 animation: none;
	 cursor: not-allowed !important;
	 border-color: var(--seventies-neutral);
}
 #play-scene-container #player-area #player-hand .card.green[style*="cursor: not-allowed"]:hover {
	 transform: none;
	 box-shadow: none;
	 border-color: var(--seventies-neutral);
}
 #play-scene-container #player-area #player-play-controls {
	 margin-top: 10px;
	 padding: 0 10px 10px 10px;
	 text-align: center;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 gap: 10px;
}
 #play-scene-container #player-area #player-play-controls #player-play-area {
	 margin: 0 0 10px 0;
	 padding: 0;
	 min-height: auto;
	 color: var(--seventies-bg);
	 font-weight: 600;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 gap: 10px;
}
 #play-scene-container #player-area #player-play-controls #player-play-area #player-card-played {
	 width: var(--card-width-mobile);
	 height: var(--card-height-mobile);
	 border: 2px solid var(--seventies-neutral);
	 border-radius: 4px;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 font-size: 24px;
	 font-weight: 700;
	 box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
	 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	 display: inline-flex;
	 vertical-align: middle;
	 margin-left: 0;
	 border: 2px dashed var(--seventies-accent1);
	 background-color: rgba(255, 255, 255, 0.1);
	 color: var(--seventies-accent1);
	 box-shadow: none;
	 animation: none;
	 cursor: default;
}
 #play-scene-container #player-area #player-play-controls #player-play-area #player-card-played.card {
	 border-style: solid;
	 box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}
 #play-scene-container #player-area #player-play-controls #player-play-area #player-card-played.card.red {
	 background-color: var(--seventies-red);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-red);
}
 #play-scene-container #player-area #player-play-controls #player-play-area #player-card-played.card.blue {
	 background-color: var(--seventies-blue);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-blue);
}
 #play-scene-container #player-area #player-play-controls #player-play-area #player-card-played.card.green {
	 background-color: var(--seventies-green);
	 color: var(--seventies-bg);
	 border-color: var(--seventies-green);
}
 #play-scene-container #player-area #player-play-controls #play-card-button {
	 font-family: var(--font-stack);
	 font-weight: 600;
	 background-color: var(--seventies-accent1);
	 color: var(--seventies-bg);
	 border: 2px solid var(--seventies-dark);
	 border-radius: 4px;
	 padding: 10px 18px;
	 margin: 5px;
	 cursor: pointer;
	 transition: background-color 0.2s, transform 0.1s ease, box-shadow 0.1s ease;
	 text-transform: uppercase;
	 letter-spacing: 0.5px;
	 box-shadow: 3px 3px 0px var(--seventies-dark);
}
 #play-scene-container #player-area #player-play-controls #play-card-button:hover:not(:disabled) {
	 background-color: var(--seventies-accent2);
	 color: var(--seventies-dark);
	 transform: translate(1px, 1px);
	 box-shadow: 2px 2px 0px var(--seventies-dark);
}
 #play-scene-container #player-area #player-play-controls #play-card-button:active:not(:disabled) {
	 transform: translate(2px, 2px);
	 box-shadow: 1px 1px 0px var(--seventies-dark);
}
 #play-scene-container #player-area #player-play-controls #play-card-button:disabled {
	 background-color: var(--seventies-neutral);
	 color: var(--seventies-panel-bg);
	 cursor: not-allowed;
	 opacity: 0.7;
	 box-shadow: 2px 2px 0px var(--seventies-dark);
	 transform: none;
}
/* --- Scene 5: End Game --- */
 #end-game-container h2 {
	 font-size: 1.4em;
}
 #end-game-container p {
	 font-size: 1.1em;
	 margin-bottom: 15px;
	 color: var(--seventies-dark);
}
 #end-game-container #end-game-balance-value {
	 font-weight: bold;
	 color: var(--seventies-accent1);
}
 #end-game-container #end-game-reveals {
	 display: flex;
	 justify-content: space-around;
	 align-items: flex-start;
	 margin: 20px 0;
	 flex-wrap: wrap;
	 gap: 15px;
}
 #end-game-container #end-game-reveals .end-reveal-area {
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 gap: 8px;
	 text-align: center;
}
 #end-game-container #end-game-reveals .end-reveal-area span {
	 font-size: 0.9em;
	 font-weight: 600;
	 color: var(--seventies-dark);
}
 #end-game-container #end-game-reveals .end-reveal-area .card {
	 width: var(--card-width-mobile);
	 height: var(--card-height-mobile);
	 border: 2px solid var(--seventies-neutral);
	 border-radius: 4px;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 font-size: 28px;
	 font-weight: 700;
	 box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
	 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	 cursor: default;
	 animation: none !important;
}
 #end-game-container #end-game-result-message {
	 font-size: 1.2em;
	 font-weight: 600;
	 margin: 25px 0;
	 min-height: 1.5em;
	 color: var(--seventies-accent1);
	 line-height: 1.5;
}
 #end-game-container #back-to-menu-button {
	 font-family: var(--font-stack);
	 font-weight: 600;
	 background-color: var(--seventies-accent1);
	 color: var(--seventies-bg);
	 border: 2px solid var(--seventies-dark);
	 border-radius: 4px;
	 padding: 10px 18px;
	 margin: 5px;
	 cursor: pointer;
	 transition: background-color 0.2s, transform 0.1s ease, box-shadow 0.1s ease;
	 text-transform: uppercase;
	 letter-spacing: 0.5px;
	 box-shadow: 3px 3px 0px var(--seventies-dark);
	 margin-top: 10px;
}
 #end-game-container #back-to-menu-button:hover:not(:disabled) {
	 background-color: var(--seventies-accent2);
	 color: var(--seventies-dark);
	 transform: translate(1px, 1px);
	 box-shadow: 2px 2px 0px var(--seventies-dark);
}
 #end-game-container #back-to-menu-button:active:not(:disabled) {
	 transform: translate(2px, 2px);
	 box-shadow: 1px 1px 0px var(--seventies-dark);
}
 #end-game-container #back-to-menu-button:disabled {
	 background-color: var(--seventies-neutral);
	 color: var(--seventies-panel-bg);
	 cursor: not-allowed;
	 opacity: 0.7;
	 box-shadow: 2px 2px 0px var(--seventies-dark);
	 transform: none;
}
/* --- Base Button Styles (General Fallback) --- */
/* --- Skip Indicator --- (Handled by nesting) */
/* --- Modal Styling --- */
 .modal {
	/* Backdrop */
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: rgba(0, 0, 0, 0.6);
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 z-index: 1000;
	 padding: 20px;
}
 .modal .modal-content {
	/* Content box */
	 background-color: var(--seventies-panel-bg);
	 color: var(--seventies-dark);
	 padding: 30px 40px;
	 border: 3px solid var(--seventies-dark);
	 border-radius: 8px;
	 position: relative;
	 width: 90%;
	 max-width: 650px;
	 max-height: 85vh;
	 overflow-y: auto;
	 box-shadow: 5px 5px 0px var(--seventies-accent1);
}
 .modal .modal-content h2 {
	 color: var(--seventies-accent1);
	 text-align: center;
	 margin-top: 0;
	 margin-bottom: 20px;
	 border-bottom: none;
	 display: block;
	 font-size: 1.4em;
}
 .modal .modal-content h3 {
	 color: var(--seventies-dark);
	 margin-top: 20px;
	 margin-bottom: 10px;
	 border-bottom: 1px solid var(--seventies-neutral);
	 padding-bottom: 5px;
	 font-size: 1.1em;
}
 .modal .modal-content p, .modal .modal-content ul, .modal .modal-content ol {
	 text-align: left;
	 margin-bottom: 15px;
	 line-height: 1.7;
	 font-size: 0.95em;
}
 .modal .modal-content ul, .modal .modal-content ol {
	 padding-left: 30px;
}
 .modal .modal-content li {
	 margin-bottom: 8px;
}
 .modal .modal-content strong {
	 color: var(--seventies-accent1);
	 font-weight: 600;
}
 .modal .modal-content p:last-of-type {
	 margin-top: 25px;
	 font-size: 12px;
	 text-align: center;
	 color: var(--seventies-neutral);
	 border-top: 1px dashed var(--seventies-neutral);
	 padding-top: 10px;
}
 .modal .modal-content .modal-close-button {
	 position: absolute;
	 top: 8px;
	 right: 12px;
	 background: none;
	 border: none;
	 font-size: 28px;
	 font-weight: bold;
	 color: var(--seventies-dark);
	 cursor: pointer;
	 padding: 0 5px;
	 line-height: 1;
}
 .modal .modal-content .modal-close-button:hover {
	 color: var(--seventies-red);
}
/* ===================================== Desktop Media Query Overrides ===================================== */
 @media (min-width: 768px) {
	/* Base scene container on desktop */
	/* Menu Scene Desktop */
	/* Allegiance Scene Desktop */
	/* Skip Scene Desktop */
	/* Play Scene Desktop */
	/* End Game Scene Desktop */
	/* Rules Button Desktop */
	/* Skip Indicator Desktop - handled by nesting */
	/* Modal Desktop Adjustments */
	 body {
		 padding: 0;
	}
	 .scene-container {
		 max-width: 900px;
		 padding: 25px;
		 border: 3px solid var(--seventies-dark);
		 border-radius: 8px;
		 box-shadow: 5px 5px 0px var(--seventies-accent1);
	}
	 #game-menu-container {
		 padding: 40px 50px;
		 max-width: 700px;
	}
	 #game-menu-container h1 {
		 font-size: 36px;
	}
	 #game-menu-container #menu-message {
		 font-size: 18px;
	}
	 #game-menu-container #start-button {
		 padding: 15px 30px;
		 font-size: 18px;
	}
	 #allegiance-scene-container {
		 max-width: 900px;
	}
	 #allegiance-scene-container h2 {
		 font-size: 20px;
	}
	 #allegiance-scene-container .card-hand-display {
		/* Applies to #allegiance-hand-display */
		 min-height: auto;
		 gap: 12px;
		 padding: 15px;
	}
	 #allegiance-scene-container .card-hand-display .card {
		 width: var(--card-width-desktop);
		 height: var(--card-height-desktop);
		 font-size: 36px;
	}
	 #skip-scene-container {
		 max-width: 600px;
	}
	 #skip-scene-container h2 {
		 font-size: 20px;
	}
	 #skip-scene-container #skip-controls .skip-button {
		 font-size: 14px;
		 padding: 10px 15px;
	}
	 #play-scene-container {
		 max-height: 95vh;
		 overflow-y: auto;
	}
	 #play-scene-container h2 {
		 font-size: 18px;
	}
	 #play-scene-container h2 .skip-indicator {
		 font-size: 14px;
	}
	 #play-scene-container #in-game-message {
		 font-size: 16px;
		 padding: 12px;
		 margin: 15px 0 20px 0;
	}
	 #play-scene-container #balance-tracker-container {
		 margin: 20px 0;
		 padding: 10px;
	}
	 #play-scene-container .track-label {
		 font-size: 12px;
		 padding: 0 10px;
	}
	 #play-scene-container #balance-tracker {
		 height: 30px;
	}
	 #play-scene-container #balance-marker {
		/* width/left set by JS */
		 height: 100%;
		 top: 0;
	}
	 #play-scene-container #balance-value {
		 font-size: 16px;
		 margin-bottom: 15px;
	}
	 #play-scene-container #ai-areas {
		 flex-direction: row;
		 justify-content: center;
		 gap: 30px;
		 margin: 25px 0;
	}
	 #play-scene-container #ai-areas .ai-area {
		 width: 35%;
		 max-width: 280px;
		 padding: 15px;
	}
	 #play-scene-container #ai-areas .ai-area h3 {
		 font-size: 1.1em;
	}
	 #play-scene-container #ai-areas .ai-area .ai-card-played {
		 width: var(--card-width-desktop);
		 height: var(--card-height-desktop);
		 font-size: 32px;
		 margin-top: 10px;
	}
	 #play-scene-container #ai-areas .ai-area .ai-status {
		 font-size: 14px;
		 min-height: 20px;
		 margin-top: 10px;
	}
	 #play-scene-container #player-area {
		 margin-top: 25px;
		 padding: 0;
		 width: 100%;
		 border-color: var(--seventies-accent1);
	}
	 #play-scene-container #player-area h3 {
		 padding: 15px 20px 0 20px;
		 margin-bottom: 10px;
		 font-size: 1.1em;
	}
	 #play-scene-container #player-area .player-allegiance-area {
		 padding: 0 20px;
		 font-size: 14px;
		 gap: 8px;
		 min-height: 70px;
	}
	 #play-scene-container #player-area .player-allegiance-area .card {
		 width: 45px;
		 height: 65px;
		 font-size: 24px;
	}
	 #play-scene-container #player-area #player-hand {
		 gap: 12px;
		 margin-bottom: 15px;
		 min-height: calc(var(--card-height-desktop) + 10px);
		 padding: 15px 20px;
	}
	 #play-scene-container #player-area #player-hand .card {
		 width: var(--card-width-desktop);
		 height: var(--card-height-desktop);
		 font-size: 36px;
	}
	 #play-scene-container #player-area #player-play-controls {
		 margin-top: 15px;
		 padding: 0 20px 15px 20px;
	}
	 #play-scene-container #player-area #player-play-controls #player-play-area {
		 font-size: 16px;
		 min-height: calc(var(--card-height-desktop) + 10px);
	}
	 #play-scene-container #player-area #player-play-controls #player-card-played {
		 width: var(--card-width-desktop);
		 height: var(--card-height-desktop);
		 font-size: 36px;
	}
	 #play-scene-container #player-area #player-play-controls #play-card-button {
		 font-size: 16px;
		 padding: 12px 22px;
	}
	 #end-game-container {
		 max-width: 700px;
	}
	 #end-game-container h2 {
		 font-size: 1.6em;
	}
	 #end-game-container p {
		 font-size: 1.2em;
	}
	 #end-game-container #end-game-reveals {
		 margin: 30px 0;
	}
	 #end-game-container #end-game-reveals .end-reveal-area .card {
		 width: var(--card-width-desktop);
		 height: var(--card-height-desktop);
		 font-size: 36px;
	}
	 #end-game-container #end-game-result-message {
		 font-size: 1.4em;
	}
	 #end-game-container #back-to-menu-button {
		 font-size: 16px;
		 padding: 12px 25px;
	}
	 #rules-button {
		 top: 20px;
		 left: 20px;
		 font-size: 14px;
		 padding: 10px 15px;
	}
	 .modal .modal-content {
		 max-width: 700px;
		 max-height: 85vh;
	}
	 .modal-close-button {
		 font-size: 32px;
		 top: 12px;
		 right: 20px;
	}
}