*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #4a90d9;--color-secondary: #2ecc71;--color-danger: #e74c3c;--color-warning: #f1c40f;--color-bg: #1a1a2e;--color-surface: #16213e;--color-text: #eee;--color-text-sub: #aaa;--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", Monaco, Consolas, monospace}html,body{height:100%;font-family:var(--font-main);background:var(--color-bg);color:var(--color-text);-webkit-tap-highlight-color:transparent}body{overflow-x:hidden;overscroll-behavior:none}#app{min-height:100%;display:flex;flex-direction:column}header{padding:2rem 1rem;text-align:center;background:var(--color-surface)}header h1{font-size:2rem;font-weight:700}header .subtitle{color:var(--color-text-sub);margin-top:.5rem}main{flex:1;padding:1rem}footer{padding:1rem;text-align:center;color:var(--color-text-sub);font-size:.8rem}.game-list{display:flex;flex-direction:column;gap:1rem;max-width:600px;margin:0 auto}.game-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--color-surface);border-radius:12px;text-decoration:none;color:var(--color-text);transition:transform .2s,box-shadow .2s}.game-card:active{transform:scale(.98)}.game-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);border-radius:12px;font-family:var(--font-mono);font-size:1.2rem;font-weight:700}.game-info h2{font-size:1.2rem;margin-bottom:.25rem}.game-info p{color:var(--color-text-sub);font-size:.9rem}.btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 2rem;border:none;border-radius:12px;font-size:1.2rem;font-weight:600;cursor:pointer;transition:transform .1s;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.95)}.btn-primary{background:var(--color-primary);color:#fff}.btn-secondary{background:var(--color-surface);color:var(--color-text);border:2px solid var(--color-primary)}.btn-large{width:100%;padding:1.5rem;font-size:1.5rem}.auth-area{position:absolute;top:1rem;right:1rem;z-index:10}.auth-user{display:flex;align-items:center;gap:.5rem}.auth-spinner{width:18px;height:18px;border:2px solid var(--color-text-sub);border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-nickname{font-size:.85rem;color:var(--color-text);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-btn{background:none;border:1px solid var(--color-text-sub);color:var(--color-text-sub);padding:.25rem .75rem;border-radius:6px;font-size:.8rem;cursor:pointer;transition:color .2s,border-color .2s}.auth-btn:hover{color:var(--color-primary);border-color:var(--color-primary)}.login-prompt{text-align:center;color:var(--color-text-sub);font-size:.85rem}.login-prompt p{margin-bottom:.5rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--color-surface);border-radius:16px;padding:2rem;width:90%;max-width:320px;text-align:center}.modal h3{margin-bottom:1rem;font-size:1.2rem}.modal-input{width:100%;padding:.75rem;border:2px solid var(--color-text-sub);border-radius:8px;background:var(--color-bg);color:var(--color-text);font-size:1rem;text-align:center;margin-bottom:.5rem}.modal-input:focus{outline:none;border-color:var(--color-primary)}.modal-error{color:var(--color-danger);font-size:.85rem;margin-bottom:.5rem}.modal-btn-group{margin-top:.5rem;display:flex;flex-direction:column;gap:.5rem}.modal-ok-btn{width:100%}.modal-cancel-btn{width:100%;background:transparent;color:var(--color-text-sub);border:1px solid var(--color-text-sub);font-size:.9rem}
