:root{--bg-primary: #0f0f1a;--bg-secondary: #1a1a2e;--bg-card: #16213e;--bg-elevated: #1f2b47;--text-primary: #e0e0e0;--text-secondary: #a0a0b0;--text-muted: #606070;--accent: #e94560;--accent-secondary: #0f3460;--green: #4ecca3;--yellow: #f0c040;--red: #e94560;--fs-xs: .6875rem;--fs-sm: .8125rem;--fs-base: .9375rem;--fs-lg: 1.125rem;--fs-xl: 1.375rem;--fs-2xl: 1.75rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem}*{margin:0;padding:0;box-sizing:border-box}html,body{background-color:var(--bg-primary);color:var(--text-primary);font-size:var(--fs-base);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}#app{min-height:100vh}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1.25rem}.header{text-align:center;margin-bottom:2.5rem}.title{display:block;font-size:var(--fs-2xl);font-weight:700;color:var(--accent);margin-bottom:.5rem}.subtitle{display:block;font-size:var(--fs-base);color:var(--text-secondary)}.role-section{width:100%;max-width:17.5rem;margin-bottom:2.5rem}.section-label{display:block;font-size:var(--fs-sm);color:var(--text-muted);text-align:center;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.125rem}.role-list{display:flex;flex-direction:column;gap:.625rem}.role-item{padding:.875rem 1rem;background-color:var(--bg-secondary);border-radius:var(--radius-md);text-align:center;font-size:var(--fs-lg);color:var(--text-primary);border:1px solid transparent;transition:border-color .2s ease,background-color .2s ease;cursor:pointer}.role-item:active{opacity:.8}.role-selected{border-color:var(--accent);background-color:var(--bg-card)}.start-btn{width:17.5rem;padding:1rem;background-color:var(--accent);border-radius:var(--radius-md);text-align:center;font-size:var(--fs-lg);font-weight:600;color:#fff;cursor:pointer}.start-btn:active{opacity:.8}.metric-bar{margin-bottom:.5rem}.metric-label{display:flex;align-items:center;margin-bottom:.2rem}.metric-icon{font-size:var(--fs-sm);margin-right:.25rem}.metric-name{font-size:var(--fs-sm);color:var(--text-secondary);flex:1}.metric-value{font-size:var(--fs-sm);color:var(--text-primary);font-weight:600}.bar-track{height:.5rem;background-color:var(--bg-elevated);border-radius:.25rem;overflow:hidden}.bar-fill{height:100%;border-radius:.25rem;transition:width .4s ease,background-color .4s ease}.card-container{position:relative;display:flex;flex-direction:column;align-items:center;padding:.625rem 0;touch-action:none;-webkit-user-select:none;user-select:none}.direction-hint{position:absolute;top:50%;transform:translateY(-50%);font-size:var(--fs-sm);color:var(--text-muted);opacity:0;transition:opacity .15s ease;z-index:0;max-width:6.25rem;text-align:center}.hint-left{left:.625rem}.hint-right{right:.625rem}.hint-active{opacity:1;color:var(--accent)}.card-body{position:relative;z-index:1;width:min(18rem,85vw);min-height:10rem;background-color:var(--bg-card);border-radius:var(--radius-lg);padding:1.5rem 1.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 .25rem 1rem #0000004d;cursor:grab}.card-body:active{cursor:grabbing}.card-animate{transition:transform .25s ease-out}.card-text{font-size:var(--fs-lg);line-height:1.6;color:var(--text-primary);text-align:center}.choice-buttons{display:flex;justify-content:space-between;width:min(19.5rem,90vw);margin-top:1rem;gap:.75rem}.choice-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:.75rem .5rem;border-radius:var(--radius-md);background-color:var(--bg-elevated);gap:.25rem;border:none;cursor:pointer;font-family:inherit}.choice-btn:active{opacity:.7}.choice-btn:disabled{opacity:.5;cursor:not-allowed}.choice-left{border:1px solid var(--accent-secondary)}.choice-right{border:1px solid var(--accent)}.choice-arrow{font-size:var(--fs-lg);color:var(--accent)}.choice-label{font-size:var(--fs-sm);color:var(--text-primary)}.game-page{display:flex;flex-direction:column;min-height:100vh;padding:.75rem 1rem}.loading-overlay,.error-overlay{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}.spinner{width:2rem;height:2rem;border:3px solid var(--bg-secondary);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:.75rem;font-size:var(--fs-sm);color:var(--text-muted)}.error-icon{width:2.5rem;height:2.5rem;line-height:2.5rem;text-align:center;font-size:var(--fs-xl);font-weight:700;color:#fff;background-color:#e74c3c;border-radius:50%;margin-bottom:.75rem}.error-text{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:1rem}.retry-btn{padding:.5rem 1.5rem;background-color:var(--accent);color:#fff;border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:600;cursor:pointer}.game-header{display:flex;justify-content:space-between;margin-bottom:1rem;padding:.625rem .75rem;background-color:var(--bg-secondary);border-radius:var(--radius-md)}.header-item{display:flex;flex-direction:column;align-items:center}.header-label{font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.125rem}.header-value{font-size:var(--fs-lg);font-weight:700;color:var(--text-primary)}.header-value.dice{color:var(--accent)}.metrics-section{margin-bottom:.75rem;padding:.75rem;background-color:var(--bg-secondary);border-radius:var(--radius-md)}.card-section{flex:1;display:flex;align-items:center;justify-content:center}.ending-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1.25rem}.ending-header{text-align:center;margin-bottom:1.5rem}.ending-type{display:block;font-size:var(--fs-xs);color:var(--accent);text-transform:uppercase;letter-spacing:.25rem;margin-bottom:.5rem}.ending-title{display:block;font-size:var(--fs-2xl);font-weight:700;color:var(--text-primary)}.ending-description{max-width:17.5rem;text-align:center;font-size:var(--fs-base);line-height:1.8;color:var(--text-secondary);margin-bottom:2rem}.stats-section{width:100%;max-width:17.5rem;background-color:var(--bg-secondary);border-radius:var(--radius-md);padding:1rem;margin-bottom:2rem}.stats-label{display:block;font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.125rem;margin-bottom:.625rem;text-align:center}.stats-row{display:flex;justify-content:space-around;margin-bottom:.75rem}.stats-item{font-size:var(--fs-sm);color:var(--text-secondary)}.final-metrics{display:flex;flex-direction:column;gap:.5rem}.metric-row{display:flex;align-items:center;padding:.375rem .5rem;background-color:var(--bg-elevated);border-radius:var(--radius-sm)}.metric-icon{font-size:var(--fs-base);margin-right:.375rem}.metric-name{flex:1;font-size:var(--fs-sm);color:var(--text-secondary)}.metric-final-value{font-size:var(--fs-lg);font-weight:700;color:var(--text-primary)}.play-again-btn{width:17.5rem;padding:1rem;background-color:var(--accent);border-radius:var(--radius-md);text-align:center;font-size:var(--fs-lg);font-weight:600;color:#fff;cursor:pointer}.play-again-btn:active{opacity:.8}.share-btn{width:17.5rem;padding:.75rem;margin-bottom:.75rem;background-color:var(--bg-secondary);border-radius:var(--radius-md);text-align:center;font-size:var(--fs-base);font-weight:600;color:var(--text-primary);border:none;cursor:pointer;font-family:inherit}.share-btn:active{opacity:.8}