:root{--bela-card-width: clamp(4.25rem, 8vw, 7.5rem);--bela-card-ratio: 400 / 620;--bela-card-focus: #18b77c}:root[data-card-size=small]{--bela-card-width: clamp(3.6rem, 6.8vw, 6.25rem)}:root[data-card-size=medium]{--bela-card-width: clamp(4.25rem, 8vw, 7.5rem)}:root[data-card-size=large]{--bela-card-width: clamp(5rem, 9.2vw, 8.75rem)}.card-view{display:inline-block;box-sizing:border-box;inline-size:var(--bela-card-width);aspect-ratio:var(--bela-card-ratio);flex:none;padding:0;border:0;border-radius:3.5%/2.3%;background:transparent;vertical-align:middle;touch-action:manipulation;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.card-view img{display:block;inline-size:100%;block-size:100%;object-fit:contain}button.card-view{cursor:pointer}.card-view--selectable:hover,.card-view--selected{transform:translateY(-.35rem)}.card-view--selected{box-shadow:0 0 0 3px var(--bela-card-focus)}.card-view--disabled{opacity:.52}button.card-view:disabled{cursor:not-allowed}button.card-view:focus-visible{outline:3px solid var(--bela-card-focus);outline-offset:4px}@media(prefers-reduced-motion:reduce){.card-view{transition:none}}:root[data-reduced-motion=true] .card-view{transition:none}.card-preview{box-sizing:border-box;width:min(100%,92rem);margin:0 auto;padding:clamp(1rem,3vw,2rem);text-align:left}.card-preview h1,.card-preview h2{color:var(--color-cream)}.card-preview section{margin-block:1.5rem 2rem}.card-preview__row{display:flex;gap:clamp(.5rem,1.3vw,1.25rem);flex-wrap:wrap;align-items:flex-start}.card-preview__sample{display:grid;justify-items:center;gap:.75rem;max-width:calc(var(--bela-card-width) + 1.5rem);text-align:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch-target-min);padding:var(--space-2) var(--space-5);border-radius:var(--radius-pill);border:1px solid transparent;font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),opacity var(--transition-fast)}.btn:disabled{cursor:not-allowed;opacity:.5}.btn--primary{background-color:var(--color-primary);color:var(--text-on-primary)}.btn--primary:hover:not(:disabled){background-color:var(--color-primary-strong)}.btn--secondary{background-color:transparent;color:var(--text-primary);border-color:var(--color-border)}.btn--secondary:hover:not(:disabled){border-color:var(--color-gold)}.btn--ghost{background-color:transparent;color:var(--text-muted)}.btn--ghost:hover:not(:disabled){color:var(--text-primary)}.btn--danger{background-color:transparent;color:var(--color-error);border-color:var(--color-error)}.btn--danger:hover:not(:disabled){background-color:var(--color-error);color:var(--text-on-error)}.panel{background-color:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);padding:var(--space-5)}.field{display:flex;flex-direction:column;gap:var(--space-1);text-align:left}.field__label{font-size:var(--font-size-sm);color:var(--text-muted)}.field__input{min-height:var(--touch-target-min);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-panel-raised);color:var(--text-primary)}.field__input:focus-visible{border-color:var(--color-primary)}.field__hint{font-size:var(--font-size-sm);color:var(--text-muted)}.field__error{font-size:var(--font-size-sm);color:var(--color-error)}.status-message{border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm)}.status-message--error{background-color:#c94a4a26;color:var(--color-error);border:1px solid var(--color-error)}.status-message--info{background-color:#18b77c1f;color:var(--text-primary);border:1px solid var(--color-primary)}.loading-state{display:flex;align-items:center;gap:var(--space-2);color:var(--text-muted)}.empty-state{color:var(--text-muted);text-align:center;padding:var(--space-5)}.app-shell{min-height:100dvh;display:flex;flex-direction:column}.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background-color:var(--color-primary);color:var(--text-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md)}.skip-link:focus{left:var(--space-3);top:var(--space-3)}.app-shell__header{border-bottom:1px solid var(--color-border);background-color:var(--color-panel)}.app-shell__header-inner{max-width:var(--content-max-width);margin:0 auto;padding:var(--space-3) var(--space-4);display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}.app-shell__brand{font-size:var(--font-size-lg);font-weight:700;color:var(--color-gold);text-decoration:none;letter-spacing:.05em}.app-shell__nav{display:flex;gap:var(--space-2);flex-wrap:wrap}.app-shell__nav a{display:inline-flex;align-items:center;min-height:var(--touch-target-min);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);text-decoration:none;color:var(--text-muted);font-weight:600}.app-shell__nav a:hover{color:var(--text-primary)}.app-shell__nav a[aria-current=page]{color:var(--text-primary);background-color:var(--color-panel-raised)}.app-shell__identity{margin-left:auto;display:flex;align-items:center;gap:var(--space-3);color:var(--text-muted);font-size:var(--font-size-sm)}.app-shell__content{flex:1;width:100%;max-width:var(--content-max-width);margin:0 auto;padding:var(--space-5) var(--space-4)}@media(max-width:720px){.app-shell__header-inner{gap:var(--space-2)}.app-shell__identity{margin-left:0;width:100%;justify-content:space-between}.app-shell__content{padding:var(--space-4) var(--space-3)}}.home{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);text-align:center;padding-top:var(--space-6)}.home__title{font-size:var(--font-size-2xl);color:var(--color-gold);margin:0}.home__identity{color:var(--text-muted);margin:0}.home__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);width:100%;max-width:480px}.home__primary-action{flex:1 1 200px}.home__secondary-nav{display:flex;gap:var(--space-4)}.home__secondary-nav a{color:var(--text-muted);text-decoration:underline}.auth-form{max-width:420px;margin:0 auto}.auth-form h1{margin-top:0}.auth-form__fields{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-4)}.auth-form__submit{width:100%}.auth-form__switch{margin-top:var(--space-4);text-align:center;color:var(--text-muted)}.auth-form__switch a{color:var(--color-primary);font-weight:600;text-decoration:none}.auth-form__forgot-password{margin:0;text-align:right}.auth-form__forgot-password a{color:var(--color-primary);font-size:.9rem;text-decoration:none}.profile{max-width:560px;margin:0 auto}.profile__guest-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}.profile__details{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:0 0 var(--space-4)}.profile__details dt{color:var(--text-muted);font-size:var(--font-size-sm)}.profile__details dd{margin:0;font-size:var(--font-size-lg);font-weight:600}.profile__fields{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-4)}.profile__edit-actions{display:flex;gap:var(--space-3)}.profile__settings-link{display:inline-flex;align-items:center;min-height:var(--touch-target-min);color:var(--text-muted)}.profile__settings-link:hover{color:var(--text-primary)}@media(max-width:480px){.profile__details{grid-template-columns:1fr}}.leaderboard{padding:0;overflow-x:auto;margin-bottom:var(--space-4)}.leaderboard__table{width:100%;border-collapse:collapse}.leaderboard__table th,.leaderboard__table td{text-align:left;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}.leaderboard__table th{color:var(--text-muted);font-size:var(--font-size-sm);font-weight:600}.leaderboard__player-link{display:flex;flex-direction:column;text-decoration:none;color:var(--text-primary);font-weight:600;min-height:var(--touch-target-min);justify-content:center}.leaderboard__player-link:hover{color:var(--color-primary)}.leaderboard__city{font-weight:400;font-size:var(--font-size-sm);color:var(--text-muted)}.quick-match{max-width:480px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:var(--space-4)}.quick-match__count{font-size:var(--font-size-lg);font-weight:600;margin:0}.friend-game{max-width:420px;margin:0 auto}.friend-game__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3)}.room{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-4)}.room__notice{color:var(--text-muted);font-size:var(--font-size-sm);margin:0}.room__code-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}.room__code-label{color:var(--text-muted)}.room__code-value{font-size:var(--font-size-lg);font-weight:700;letter-spacing:.1em;color:var(--color-gold)}.room__teams{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.room__team h2{font-size:var(--font-size-base);color:var(--text-muted);margin:0 0 var(--space-2)}.room__seats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.room__seat{width:100%;min-height:var(--touch-target-min);border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-panel-raised);color:var(--text-primary);font-weight:600;cursor:pointer}.room__seat--taken{border-color:var(--color-primary);cursor:default}.room__seat--free:hover{border-color:var(--color-gold)}.room__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}@media(max-width:560px){.room__teams{grid-template-columns:1fr}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.gameplay-table{display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--content-max-width);margin:0 auto;padding:var(--space-3);box-sizing:border-box}.gameplay-score-bar{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;background:var(--color-panel);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);font-weight:600}.gameplay-table__seats{position:relative;display:grid;grid-template-areas:"partner partner partner" "left trick right";grid-template-columns:1fr minmax(auto,320px) 1fr;gap:var(--space-3);align-items:center;justify-items:center;background:var(--color-table);border-radius:var(--radius-lg);padding:var(--space-4);min-height:280px}.gameplay-table__seat-slot--partner{grid-area:partner}.gameplay-table__seat-slot--opponent-left{grid-area:left}.gameplay-table__seat-slot--opponent-right{grid-area:right}.gameplay-table__trick{grid-area:trick}@media(max-width:640px){.gameplay-table__seats{grid-template-areas:"partner" "left" "trick" "right";grid-template-columns:1fr}}.gameplay-opponent{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);color:var(--text-primary)}.gameplay-opponent--active{outline:2px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--space-1)}.gameplay-opponent__identity,.gameplay-opponent__hand{display:flex;align-items:center;gap:var(--space-2)}.gameplay-badge{font-size:var(--font-size-sm);padding:2px var(--space-2);border-radius:var(--radius-pill);background:var(--color-panel-raised);color:var(--text-muted)}.gameplay-badge--disconnected,.gameplay-badge--left{color:var(--text-on-error);background:var(--color-error)}.gameplay-badge--bot{color:var(--text-on-primary);background:var(--color-gold)}.gameplay-trick{display:grid;grid-template-areas:". partner ." "left center right" ". you .";gap:var(--space-2);place-items:center}.gameplay-trick__slot{min-inline-size:3rem;min-block-size:3rem}.gameplay-trick__slot--partner{grid-area:partner}.gameplay-trick__slot--opponent-left{grid-area:left}.gameplay-trick__slot--opponent-right{grid-area:right}.gameplay-trick__slot--you{grid-area:you}.gameplay-turn-indicator{text-align:center;font-weight:600;color:var(--color-primary)}.gameplay-turn-indicator--muted{color:var(--text-muted);font-weight:400}.gameplay-hand{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.gameplay-hand__cards{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}@media(max-width:480px){.gameplay-hand__cards{flex-wrap:nowrap;gap:0}.gameplay-hand__cards>.card-view:not(:first-child){margin-inline-start:calc(var(--bela-card-width) * -.42)}:root[data-card-size=small] .gameplay-hand__cards>.card-view:not(:first-child){margin-inline-start:calc(var(--bela-card-width) * -.32)}:root[data-card-size=large] .gameplay-hand__cards>.card-view:not(:first-child){margin-inline-start:calc(var(--bela-card-width) * -.52)}.gameplay-hand__cards>.card-view--selectable:hover,.gameplay-hand__cards>.card-view--selected,.gameplay-hand__cards>.card-view:focus-visible{z-index:1}}.gameplay-hand__actions{display:flex;align-items:center;gap:var(--space-3)}.gameplay-hand__bela-toggle{display:flex;align-items:center;gap:var(--space-1);min-height:var(--touch-target-min)}.gameplay-timer{text-align:center;font-variant-numeric:tabular-nums}.gameplay-timer--noticeable{color:var(--color-gold);font-weight:600}.gameplay-timer--urgent{color:var(--color-error);font-weight:700}.gameplay-seat-rail{list-style:none;display:flex;gap:var(--space-4);justify-content:center;padding:0;margin:0}.gameplay-seat-rail__item{display:flex;align-items:center;gap:var(--space-1)}.gameplay-pause-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0b1110d9;z-index:50}.gameplay-pause-overlay__panel{background:var(--color-panel);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center;max-width:360px}.gameplay-bot-banner{background:var(--color-panel-raised);border-radius:var(--radius-md);padding:var(--space-3);text-align:center}.gameplay-menu{position:relative;align-self:flex-end}.gameplay-menu__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:#0b1110b8;z-index:60;box-sizing:border-box}.gameplay-menu__dialog{background:var(--color-panel);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-panel);display:flex;flex-direction:column;gap:var(--space-2);width:min(90vw,420px);max-height:min(85vh,640px);overflow-y:auto;outline:none}.gameplay-menu__dialog:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.gameplay-menu__rules-list{max-height:50vh;overflow-y:auto;padding-left:var(--space-5)}.gameplay-zvanja__list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.gameplay-zvanja__option{display:flex;align-items:center;gap:var(--space-2);min-height:var(--touch-target-min)}.gameplay-zvanja__actions{display:flex;gap:var(--space-3)}.gameplay-round-complete__table{width:100%;border-collapse:collapse}.gameplay-round-complete__table th,.gameplay-round-complete__table td{padding:var(--space-2);border-bottom:1px solid var(--color-border);text-align:center}.gameplay-result{font-size:var(--font-size-2xl);font-weight:700;text-align:center}.gameplay-result--victory{color:var(--color-primary)}.gameplay-result--defeat{color:var(--color-error)}.gameplay-progress{text-align:center;color:var(--text-muted)}@media(prefers-reduced-motion:reduce){.gameplay-table *{transition:none!important;animation:none!important}}:root[data-reduced-motion=true] .gameplay-table *{transition:none!important;animation:none!important}.settings-body{display:flex;flex-direction:column;gap:var(--space-5);text-align:left}.settings-section{display:flex;flex-direction:column;gap:var(--space-3)}.settings-section h2{font-size:var(--font-size-base);color:var(--text-muted);margin:0}.settings-section--info p{color:var(--text-muted);font-size:var(--font-size-sm)}.settings-toggle{display:flex;align-items:center;gap:var(--space-2);min-height:var(--touch-target-min);cursor:pointer}.settings-toggle input{width:20px;height:20px;flex:none;accent-color:var(--color-primary)}.settings-toggle__state{margin-left:auto;color:var(--text-muted);font-size:var(--font-size-sm)}.settings-card-size{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}.settings-card-size legend{padding:0;color:var(--text-primary)}.settings-card-size__options{display:flex;flex-wrap:wrap;gap:var(--space-3)}.settings-card-size__option{display:flex;align-items:center;gap:var(--space-1);min-height:var(--touch-target-min);cursor:pointer}.settings-card-size__option input{accent-color:var(--color-primary)}.settings-section details{color:var(--text-primary)}.settings-section summary{cursor:pointer;min-height:var(--touch-target-min);display:flex;align-items:center;font-weight:600}.settings-body__logout-hint{color:var(--text-muted);font-size:var(--font-size-sm)}.match-transition{max-width:480px;margin:var(--space-6) auto 0;text-align:center}:root{color-scheme:dark;--color-bg: #0b1110;--color-table: #063e31;--color-panel: #121817;--color-panel-raised: #182220;--color-border: #23302c;--color-cream: #f4e8cf;--color-cream-muted: #cabd9f;--color-gold: #d9ad68;--color-primary: #18b77c;--color-primary-strong: #14a06c;--color-error: #c94a4a;--color-error-strong: #ad3c3c;--text-primary: var(--color-cream);--text-muted: var(--color-cream-muted);--text-on-primary: #06120d;--text-on-error: #fbeaea;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-pill: 999px;--font-family: "Segoe UI", system-ui, -apple-system, sans-serif;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--content-max-width: 1280px;--touch-target-min: 44px;--focus-ring: 0 0 0 3px rgba(24, 183, 124, .55);--shadow-panel: 0 8px 24px rgba(0, 0, 0, .35);--transition-fast: .12s ease}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-height:100dvh;background-color:var(--color-bg);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.5;-webkit-text-size-adjust:100%}#root{min-height:100dvh;display:flex;flex-direction:column}a{color:inherit}button,input,select,textarea{font-family:inherit;font-size:inherit}:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}