html, body { background: #f4f6fb; color: #17233d; font-family: system-ui, sans-serif; }
.loading-progress { display: block; width: 80px; height: 80px; margin: 20vh auto 1rem; }
.loading-progress circle { fill: none; stroke: #e1e4ee; stroke-width: 6; }
.loading-progress circle:last-child { stroke: #5740c6; stroke-dasharray: calc(251.3 * var(--blazor-load-percentage, 0%) / 100) 251.3; }
.loading-progress-text { text-align: center; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Φόρτωση Kenta…"); }
.brand { color: #4938b5; font-size: 2rem; font-weight: 800; text-decoration: none; }
.account-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: white; font-weight: bold; }
.presence-dot { display: inline-block; width: 8px; height: 8px; background: #adb5bd; border-radius: 50%; flex-shrink: 0; }
.presence-dot.online { background: #198754; }
.card { border: 1px solid #e1e4ee; border-radius: 18px; }
.setup { max-width: 600px; }
.player-card { height: 224px; display: grid; grid-template-rows: 40px 64px 1fr; gap: 8px; }
.player-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.player-heading .avatar { margin-bottom: 0; flex-shrink: 0; }
.player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-cut { align-self: end; }
.game-history { height: 220px; overflow-y: auto; border: 1px solid #d8deea; border-radius: 12px; background: #f8f9fc; padding: 12px; font-size: .9rem; overflow-wrap: anywhere; }
.history-entry { padding: 4px 0; border-bottom: 1px solid #e8ebf2; }
.cuts-counter { display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; border: 1px solid #dc3545; border-radius: 50%; background: transparent; color: #dc3545; font-size: .85rem; font-weight: 700; flex-shrink: 0; }
.active-player { border: 2px solid #198754; background: #e7f5ec; }
.active-player .avatar { background: #c8ead5; color: #146c43; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #e4defd; margin-bottom: 10px; font-weight: bold; }
.die { width: 70px; height: 76px; font-size: 3rem; border: 2px solid #ccd2e0; background: white; border-radius: 12px; line-height: 1; }
.dice-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 480px; }
.dice-board .die { width: 100%; height: auto; aspect-ratio: 1; font-size: clamp(2rem, 9vw, 4rem); padding: 0; display: grid; place-items: center; }
.die-face { display: inline-block; line-height: 1; }
.die.rolling .die-face { animation: dice-tumble .14s ease-in-out infinite; }
@keyframes dice-tumble { 0%, 100% { transform: rotate(-12deg) scale(.9); } 50% { transform: rotate(12deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .die.rolling .die-face { animation: none; } }
.die.selected { border-color: #6550d8; background: #e9e3ff; }
.die.held { border-color: #198754; background: #e7f5ec; color: #146c43; opacity: 1; }
.btn-primary { background: #5740c6; border-color: #5740c6; }
#blazor-error-ui { display: none; background: #ffe8ba; padding: 1rem; position: fixed; bottom: 0; width: 100%; }