*{box-sizing:border-box}:root{--card-w: 52px;--card-h: 74px;--trick-size: 210px}html,body,#root{margin:0;height:100%}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#0f1713;color:#e8efe9;overflow-x:hidden}.app{display:flex;flex-direction:column;min-height:100%}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#0b120e;border-bottom:1px solid #1d2a22}.topbar__left{display:flex;align-items:center;gap:14px}.topbar h1{font-size:1.05rem;margin:0;font-weight:600}.hint{position:relative}.hint__toggle{border:1px solid #2f4a3b;background:#16241c;color:#e8efe9;border-radius:8px;padding:5px 10px;font-size:.8rem;font-weight:600;cursor:pointer}.hint__toggle:hover{background:#1e3328}.hint__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:20;display:flex;gap:18px;padding:14px 16px;background:#0b120e;border:1px solid #2f4a3b;border-radius:10px;box-shadow:0 8px 24px #00000080}.hint__table{border-collapse:collapse;font-size:.85rem}.hint__table caption{font-weight:700;color:#ffd24a;padding-bottom:6px;text-align:left;white-space:nowrap}.hint__table td{padding:2px 10px 2px 0}.hint__rank{color:#cfe0d5;font-weight:600}.hint__val{color:#fff;text-align:right;font-variant-numeric:tabular-nums}.troef{display:flex;flex-direction:column;align-items:center;line-height:1.2;padding:3px 16px;background:#16241c;border:1px solid #2f4a3b;border-radius:10px}.troef__label{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:#9fb3a6}.troef__value{font-size:1.05rem;font-weight:800;color:#fff}.troef__value.red{color:#ff6b6b}.troef--none .troef__value{color:#6f8377;font-weight:600}.scoreboard{display:flex;gap:18px}.scoreboard__team{display:flex;flex-direction:column;align-items:flex-end;font-size:.75rem;color:#9fb3a6}.scoreboard__team strong{font-size:1.3rem;color:#fff}.table{flex:1;display:grid;grid-template-columns:minmax(70px,auto) 1fr minmax(70px,auto);grid-template-rows:auto 1fr auto;grid-template-areas:"top top top" "left center right" "south south south";gap:8px;padding:16px;background:radial-gradient(ellipse at center,#1f7a4d,#14573a 55%,#0c3b27)}.opponent--top{grid-area:top;justify-self:center}.opponent--left{grid-area:left;align-self:center}.opponent--right{grid-area:right;align-self:center}.center{grid-area:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.klop-btn{border:1px solid #2f4a3b;background:#16241c;color:#e8efe9;font-weight:700;font-size:.95rem;padding:7px 20px;border-radius:999px;cursor:pointer}.klop-btn:hover{background:#1e3328;border-color:#ffd24a}.klop-msg{background:#0b120e;border:1px solid #2f4a3b;border-radius:8px;padding:6px 14px;font-size:.9rem;font-weight:600;text-align:center;max-width:280px}.south{grid-area:south;display:flex;flex-direction:column;align-items:center;gap:8px}.opponent{display:flex;flex-direction:column;align-items:center;gap:6px}.opponent__cards{display:flex}.opponent__cards--top{flex-direction:row}.opponent__cards--top .card{margin-left:calc(var(--card-w) * -.42)}.opponent__cards--top .card:first-child{margin-left:0}.opponent__cards--left,.opponent__cards--right{flex-direction:column}.opponent__cards--left .card,.opponent__cards--right .card{margin-top:calc(var(--card-h) * -.62)}.opponent__cards--left .card:first-child,.opponent__cards--right .card:first-child{margin-top:0}.seatlabel{font-size:.8rem;color:#cfe0d5;padding:2px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}.seatlabel--active{background:#ffd24a;color:#2a1d00;font-weight:600;box-shadow:0 0 0 3px #ffd24a4d}.badge{font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;background:#0b120e;color:#9fb3a6;padding:1px 6px;border-radius:999px}.badge--maker{background:#2563eb;color:#fff}.seatlabel__bid{font-size:.72rem;font-weight:700;background:#ffd24a;color:#2a1d00;padding:1px 7px;border-radius:999px}.seatlabel__bid--pass{background:#2a2a2a;color:#b8b8b8}.card{width:var(--card-w);height:var(--card-h);border-radius:7px;border:1px solid #c9c9c9;background:#fff;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;padding:0;cursor:default;box-shadow:0 2px 4px #00000059;flex:0 0 auto}.card__rank{font-size:1.1rem;line-height:1}.card__suit{font-size:1.3rem;line-height:1.1}.card--red{color:#d11e1e}.card--black{color:#111}.card--back{background:repeating-linear-gradient(45deg,#2b4f8e,#2b4f8e 6px,#24437a 6px,#24437a 12px);border-color:#1b315c}.card--playable{cursor:pointer;outline:3px solid #ffd24a;transition:transform .08s ease}.card--playable:hover{transform:translateY(-10px)}.card--dimmed{opacity:.45}.card--error{outline:3px solid #ff5252;box-shadow:0 0 14px #ff5252b3;animation:card-shake .4s ease}@keyframes card-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.startscreen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;background:radial-gradient(ellipse at center,#1f7a4d,#14573a 55%,#0c3b27)}.startscreen h1{margin:0;font-size:2rem}.startscreen__sub{margin:0 0 18px;color:#cfe0d5;font-size:1.1rem}.startscreen__levels{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:820px}.levelcard{width:230px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 18px;background:#0b120e;border:1px solid #2f4a3b;border-radius:14px;color:#e8efe9;cursor:pointer;text-align:center;transition:transform .1s ease,border-color .1s ease}.levelcard:hover{transform:translateY(-4px);border-color:#ffd24a}.levelcard--sel{border-color:#ffd24a;background:#1b2c22;box-shadow:0 0 0 2px #ffd24a66}.levelcard--disabled{position:relative;opacity:.45;cursor:not-allowed}.levelcard--disabled:hover{transform:none;border-color:#2f4a3b}.levelcard__soon{position:absolute;top:8px;right:8px;font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;background:#2f4a3b;color:#cfe0d5;padding:2px 7px;border-radius:999px}.startscreen__format{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:8px}.formatrow{display:flex;gap:8px}.stepper{display:flex;align-items:center;gap:14px}.stepper__value{font-size:1.4rem;font-weight:800;min-width:120px;text-align:center}.stepper__value small{font-size:.8rem;font-weight:500;color:#9fb3a6}.startscreen__go{margin-top:18px;font-size:1.05rem;padding:12px 28px}.panel__progress{margin-top:6px;color:#9fb3a6;font-size:.82rem}.gameover__title{font-size:1.4rem;font-weight:800;margin-bottom:6px}.gameover__accuracy{margin-top:8px;font-size:1rem;color:#ffd24a}.telstaat{max-height:168px;overflow-y:auto;width:100%;max-width:420px}.telstaat table{width:100%;border-collapse:collapse;font-size:.82rem}.telstaat th,.telstaat td{padding:3px 8px;text-align:left}.telstaat th{color:#9fb3a6;font-weight:600;border-bottom:1px solid #233a2d;position:sticky;top:0;background:#0b120e}.telstaat td:nth-child(3),.telstaat td:nth-child(4),.telstaat th:nth-child(3),.telstaat th:nth-child(4){text-align:right;font-variant-numeric:tabular-nums}.telstaat tfoot td{border-top:1px solid #233a2d;font-weight:700}.telstaat__nat{color:#ff9b6b}.levelcard__emoji{font-size:1.8rem}.levelcard__label{font-size:1.25rem;font-weight:800}.levelcard__desc{font-size:.8rem;color:#9fb3a6;line-height:1.35}.levelbadge{font-size:.78rem;font-weight:700;background:#16241c;border:1px solid #2f4a3b;border-radius:999px;padding:3px 10px}.playerror{background:#3a1414;border:1px solid #7a2a2a;color:#ffb4b4;padding:6px 14px;border-radius:8px;font-size:.9rem;font-weight:600;text-align:center}.panel__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}.reviewcard{background:#0f1713;border:1px solid #2f4a3b;border-radius:14px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;padding:16px 18px}.startscreen__rules-link{margin-top:16px;background:none;border:none;color:#cfe0d5;font-size:.95rem;text-decoration:underline;cursor:pointer}.startscreen__rules-link:hover{color:#ffd24a}.rulescard{background:#0f1713;border:1px solid #2f4a3b;border-radius:14px;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;padding:16px 20px}.rulescard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:-16px;background:#0f1713;padding:6px 0 10px;margin:-6px 0 0;border-bottom:1px solid #1d2a22}.rulescard__head h2{margin:0;font-size:1.15rem}.rules h3{margin:18px 0 6px;font-size:1rem;color:#ffd24a}.rules p{margin:6px 0;line-height:1.5;font-size:.92rem}.rules ul{margin:6px 0;padding-left:20px}.rules li{margin:4px 0;line-height:1.45;font-size:.92rem}.rules__tables{display:flex;gap:22px;flex-wrap:wrap}.reviewcard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.reviewcard__head h2{margin:0;font-size:1.15rem}.reviewsummary{font-size:.95rem;font-weight:700;margin-bottom:8px}.bidreview{padding:8px 12px;border-radius:8px;margin-bottom:14px;background:#16241c;border-left:4px solid #6f8377;font-size:.9rem}.decisions{display:flex;flex-direction:column;gap:10px}.decision{background:#16241c;border-radius:10px;border-left:4px solid #6f8377;padding:10px 12px}.decision__head{display:flex;gap:8px;font-weight:700;font-size:.85rem;margin-bottom:8px}.decision__better{display:flex;align-items:center;gap:8px;font-size:.85rem;margin-top:8px}.decision__text{margin:8px 0 0;font-size:.85rem;color:#cfe0d5}.minitrick{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.minitrick__arrow{color:#9fb3a6;font-size:1.1rem;margin:0 2px}.verdict--goed{border-left-color:#3fbf6f}.verdict--twijfel{border-left-color:#ffd24a}.verdict--fout{border-left-color:#ff5252}.stepper-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 10px}.stepper-nav__label{font-weight:700;font-size:.9rem;padding:4px 12px;border-radius:999px;background:#16241c;border-left:4px solid #6f8377}.situation__label{font-size:.78rem;color:#9fb3a6;margin:10px 0 4px;text-transform:uppercase;letter-spacing:.04em}.situation__trick{display:flex;gap:12px;flex-wrap:wrap}.situation__play{display:flex;flex-direction:column;align-items:center;gap:3px}.situation__seat{font-size:.7rem;color:#cfe0d5}.situation__lead{color:#9fb3a6;font-size:.9rem}.situation__hand{display:flex;gap:5px;flex-wrap:wrap}.situation__legend{display:flex;gap:14px;margin-top:8px;font-size:.75rem}.legend{display:inline-flex;align-items:center;gap:5px}.legend:before{content:"";width:12px;height:12px;border-radius:3px}.legend--chosen:before{background:#ff5252}.legend--best:before{background:#3fbf6f}.situation__explanation{margin:14px 0 0;font-size:.95rem;line-height:1.4;background:#16241c;padding:10px 12px;border-radius:8px}.card--best{outline:3px solid #3fbf6f;box-shadow:0 0 14px #3fbf6f99}@media (max-width: 640px){:root{--card-w: clamp(30px, calc((100vw - 44px)/8) , 44px);--card-h: calc(var(--card-w) * 1.42);--trick-size: calc(var(--card-w) * 3)}.topbar{flex-wrap:wrap;justify-content:center;gap:4px 8px;padding:5px 8px}.topbar h1,.hint__label{display:none}.hint__toggle{padding:4px 8px}.topbar__left{gap:6px;flex-wrap:wrap;justify-content:center}.troef{padding:2px 10px}.troef__value{font-size:.9rem}.scoreboard{gap:12px}.scoreboard__team{font-size:.65rem}.scoreboard__team strong{font-size:1rem}.levelbadge{font-size:.7rem;padding:2px 8px}.table{grid-template-columns:minmax(44px,auto) 1fr minmax(44px,auto);gap:2px;padding:5px}.card__rank{font-size:.95rem}.card__suit{font-size:1.05rem}.hand{gap:3px;flex-wrap:nowrap}.panel{padding:10px 12px}.bidcontrols__value{font-size:1.6rem}.telstaat{max-height:140px}.hint__panel{position:fixed;top:50px;left:50%;right:auto;transform:translate(-50%);width:max-content;max-width:calc(100vw - 16px);flex-wrap:wrap}.startscreen{padding:16px}.startscreen__levels{flex-wrap:nowrap;gap:10px;align-self:stretch}.levelcard{width:auto;flex:1 1 0;min-width:0;padding:16px 12px}.levelcard__emoji{font-size:1.4rem}.levelcard__label{font-size:1.1rem}.levelcard__desc{font-size:.72rem}}@media (max-width: 380px){.card__rank{font-size:.82rem}.card__suit{font-size:.92rem}}.hand{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:720px}.trick{position:relative;width:var(--trick-size);height:var(--trick-size)}.trick__slot{position:absolute;width:var(--card-w);height:var(--card-h)}.trick__empty{width:var(--card-w);height:var(--card-h);border:1px dashed rgba(255,255,255,.18);border-radius:7px}.trick--top{top:0;left:50%;transform:translate(-50%)}.trick--bottom{bottom:0;left:50%;transform:translate(-50%)}.trick--left{left:0;top:50%;transform:translateY(-50%)}.trick--right{right:0;top:50%;transform:translateY(-50%)}.trick__slot--winner{outline:3px solid #ffd24a;border-radius:8px;box-shadow:0 0 16px #ffd24a99}.panel__info .wij{color:#6fe09a;font-weight:700}.panel__info .zij{color:#ff9b6b;font-weight:700}.trick__contract{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#00000059;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700}.trick__contract .red{color:#ff6b6b}.panel{padding:14px 16px;background:#0b120e;border-top:1px solid #1d2a22;display:flex;flex-direction:column;gap:10px;align-items:center}.panel__info{font-size:.95rem;text-align:center}.panel__tricks{margin-left:12px;color:#9fb3a6}.nat{color:#ff6b6b;font-weight:700}.bidlog{display:flex;flex-wrap:wrap;gap:6px 8px;justify-content:center;max-width:560px}.bidlog__row{display:inline-flex;align-items:center;gap:6px;background:#16241c;border:1px solid #233a2d;border-radius:999px;padding:2px 10px;font-size:.8rem}.bidlog__seat{color:#9fb3a6}.bidlog__action{font-weight:700;color:#ffd24a}.bidlog__action--pass{color:#9a9a9a;font-weight:600}.playbanner{font-size:1rem;padding:6px 14px;background:#16241c;border:1px solid #2f4a3b;border-radius:8px}.playbanner__team.wij{color:#6fe09a}.playbanner__team.zij{color:#ff9b6b}.bidbuttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.bidcontrols{display:flex;flex-direction:column;align-items:center;gap:12px}.bidcontrols__contracts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.btn--contract{display:flex;flex-direction:column;align-items:center;min-width:56px;padding:6px 10px;line-height:1.1}.btn--contract small{font-size:.6rem;color:#9fb3a6;font-weight:500}.btn--sel{background:#ffd24a;border-color:#ffd24a;color:#2a1d00}.btn--sel small{color:#5a4500}.bidcontrols__stepper{display:flex;align-items:center;gap:14px}.btn--step{width:44px;height:44px;font-size:1.1rem;padding:0}.btn--step:disabled{opacity:.35;cursor:not-allowed}.bidcontrols__value{font-size:2rem;font-weight:800;min-width:70px;text-align:center;font-variant-numeric:tabular-nums}.bidcontrols__actions{display:flex;gap:10px}.btn{border:1px solid #2f4a3b;background:#16241c;color:#e8efe9;border-radius:8px;padding:8px 14px;font-size:.95rem;font-weight:600;cursor:pointer}.btn:hover{background:#1e3328}.btn--pass{background:#3a1f1f;border-color:#5a2f2f}.btn--primary{background:#2563eb;border-color:#2563eb;color:#fff;padding:10px 22px}.btn--primary:hover{background:#1d4fd0}@media (max-width: 640px){.hand{flex-wrap:nowrap;gap:3px}.opponent__cards--left .card,.opponent__cards--right .card{margin-top:calc(var(--card-h) * -.74)}.opponent__cards--top .card{margin-left:calc(var(--card-w) * -.55)}.opponent{gap:2px}}