/* Supergurka-modulens egna layoutklasser. Skalet laddar den (som supergurka.js). Delade klasser (.card/.hand/.mini/.pile/.badge/.row/.card.trickbest) bor i tokens.css - redefiniera dem INTE här. Bara Supergurka-specifika klasser, som annars försvann när standalone-index.html togs bort i Fas 3 I8b. */ /* Egen accentfärg (gurkgrön) när Supergurka är aktivt. data-game sätts på av skalet; accenten drivs av --gold/--gold-bright (--pico-primary härleds från dem), så knappar/aktiv-ramar/rubrik/badges byter ton medan felt-basen är kvar. Chicago (data-game="chicago" eller inget) är oförändrat. */ :root[data-game="supergurka"] { --gold: #8bbf5c; /* gurkgrön accent (mörkt läge, mot grön filt) */ --gold-bright: #b3e07f; /* ljusare lime för hover/aktiv/rubrik */ --pico-primary-inverse: #10240c; /* mörk text på accentknappar */ /* Supergurkas template använder plain Pico-knappar/formfält (Chicago har egna .btn) - styr även Pico-accenten så knappar/ramar/fokus blir gurkgröna. */ --pico-primary: var(--gold); --pico-primary-background: var(--gold); --pico-primary-hover-background: var(--gold-bright); --pico-primary-border: var(--gold); --pico-primary-hover-border: var(--gold-bright); --pico-primary-focus: #8bbf5c66; } @media (prefers-color-scheme: light) { :root[data-game="supergurka"] { --gold: #567d24; /* mörkare gurkgrön för kontrast på pergament */ --gold-bright: #45641a; --pico-primary-inverse: #ffffff; --pico-primary-focus: #567d2455; } } /* Fasvyerna använder Pico-
(grå kort-yta). Ge dem samma felt-tonade look som Chicagos spelyta (jfr .table) i st f grå Pico-kort - toned, inte grått. */ #gameview article { background: #00000022; border: 1px solid #ffffff14; border-radius: 12px; box-shadow: none; color: var(--ink); } @media (prefers-color-scheme: light) { #gameview article { background: #0000000d; border-color: #00000014; } } /* Reserverade status-slots OVANFÖR handen (jfr Chicagos .swap-status-slot/.trick-status-slot) så handens Y-position är stabil när status-raderna växlar mellan turer och kort inte hoppar. Byte: upp till 2 kompakta rader (min tur / väntar + pre-swap-hint). Stick: trick_won-raden. */ .sg-status-slot { min-height: 3.7rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: .8rem; } /* Enhetligt kompakta rader (samma storlek) så tvåradsläget alltid ryms i min-height och sloten aldrig växer - annars skiftar handens Y mellan en- och tvåradsstatus. */ .sg-status-slot p { margin: .1rem 0; font-size: .8rem; line-height: 1.3; } .sg-trick-status-slot { min-height: 1.5rem; display: flex; align-items: center; justify-content: center; text-align: center; } /* Auto-sortera-knapp under handen (liten, diskret) */ .sg-sort { display: block; width: fit-content; margin: .1rem auto .3rem; padding: .3rem .8rem; font-size: .78rem; background: var(--surface); color: var(--ink); border: 1px solid var(--hair-strong); border-radius: var(--radius); cursor: pointer; } .sg-sort:hover { background: var(--surface-hover); } /* Kort som inte går att välja just nu (inte min tur i sticket) tonas ner men är fortfarande dragbara för omordning. */ .hand .card.dim-card { opacity: .5; } /* Spelarlista (horisontella kort) */ .sg-players { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; } .sg-p { border: 1px solid var(--pico-muted-border-color); border-radius: .5rem; padding: .4rem .6rem; flex: 1 1 8rem; min-width: 8rem; } .sg-p.turn { border-color: var(--pico-primary); box-shadow: 0 0 0 1px var(--pico-primary); } .sg-p.out { opacity: .5; } .sg-p .nm { font-weight: 600; display: flex; gap: .3rem; align-items: center; justify-content: space-between; } .sg-p .sc { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Bordet/visningen: spelarnas utspel i EN rad (inte staplade). Reserverad min-höjd (som Chicagos .table) så handen/knapparna inte hoppar när kort spelas ut/städas. */ .trickrow { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0; min-height: calc(3.7rem + 1.6rem); align-items: center; } .trickrow .who { font-size: .8rem; } .sg-trickdone { outline: 2px solid var(--pico-primary); } /* En spelares flera utspelade kort (och poängkorten i spelarlistan) ligger i rad. Delade .card är display:grid (block) -> utan flex-container staplas de vertikalt. Scopat till Supergurka så Chicagos egna .pile-högar inte påverkas. */ .trickrow .pile, .sg-players .pile { display: inline-flex; gap: .15rem; align-items: center; } /* Andra spelares utspel i sticket större än de pyttesmå minikorten i spelarlistan (Supergurka spelar SET per spelare, så mellanstorlek håller bordet kompakt). Gap:et måste rymma .card.trickbest-outlinen (2px + 2px offset varje sida) så markeringen på intilliggande kort inte korsar. */ .trickrow .pile { --card-w: 2.6rem; --card-h: 3.7rem; gap: .5rem; } .trickrow .pile .card .p { font-size: 1.9rem; } .trickrow .pile .card .r { font-size: .72rem; } /* Utslagen-badge (röd) + dämpad text (Supergurka använder .muted, Chicago .dim) */ .badge.loser { background: var(--suit-red); color: #fff; } .muted { color: var(--pico-muted-color); }