/* SurfIZM — warstwa design system (22.10, „stół fizyczny”). Ładowana PO style.css; tylko wygląd — bez zmian układu (pozycje/rozmiary bez zmian, by fit_check pozostał zielony). */
:root{
 --ds-navy:#0B2E4A;--ds-navy2:#123d5f;--ds-or:#E8731A;--ds-gold:#F2B33D;--ds-sand:#f3e3c3;--ds-sand2:#e3c896;--ds-paper:#fffdf7;--ds-ok:#2E7D32;--ds-bad:#B3261E;--ds-teal:#0a6e8a;
 --ds-r1:6px;--ds-r2:10px;--ds-r3:14px;--ds-r4:20px;
 --ds-s1:4px;--ds-s2:8px;--ds-s3:12px;--ds-s4:16px;
 --ds-fs-xs:11px;--ds-fs-s:13px;--ds-fs-m:15px;--ds-fs-l:19px;--ds-fs-xl:24px;
 --ds-sh1:0 1px 0 #ffffff80 inset,0 1px 2px #0003,0 2px 6px #0002;
 --ds-sh2:0 1px 0 #ffffff60 inset,0 4px 10px #0003,0 10px 24px #0b2e4a2a;
 --ds-sh3:0 14px 28px #0b2e4a55,0 6px 10px #0003;
 --ds-ease:cubic-bezier(.2,.8,.2,1);--ds-spring:cubic-bezier(.34,1.56,.64,1);--ds-t1:.12s;--ds-t2:.22s;
}
/* stół: drewno/tkanina pod matami, głębia */
body{background:radial-gradient(ellipse at 50% 0,#fffaf0 0,transparent 60%),repeating-linear-gradient(90deg,#0000 0 3px,#00000006 3px 4px),linear-gradient(#efe4cf,#e2d2b4)}
.mat{border-radius:var(--ds-r3);box-shadow:var(--ds-sh2),0 0 0 1px #0b2e4a18}
.mat.ocean{box-shadow:inset 0 2px 18px #0006,inset 0 -1px 0 #ffffff22,var(--ds-sh2)}
.beach{background:radial-gradient(#7a4a1414 1px,transparent 1.6px) 0 0/8px 8px,radial-gradient(ellipse at 30% 0,#fff6 0,transparent 55%),linear-gradient(var(--ds-sand),var(--ds-sand2))}
.mh b{text-shadow:0 1px 0 #fff8}.mat.ocean .mh b{text-shadow:0 2px 4px #0008}
.mh span{font-size:var(--ds-fs-s)}
aside .panel{border-radius:var(--ds-r3);background:linear-gradient(var(--ds-paper),#fbf6ea);box-shadow:var(--ds-sh1),0 0 0 1px #0b2e4a14}
aside h3{font-size:var(--ds-fs-l);letter-spacing:.03em;color:var(--ds-navy);border-bottom:1px solid #0b2e4a14;padding-bottom:4px}
/* karty: krawędź, połysk, cień pod podniesioną */
.card{border-radius:var(--ds-r1);box-shadow:0 0 0 1px #0b2e4a26,0 1px 1px #0003,0 3px 6px #0b2e4a33;transition:transform var(--ds-t2) var(--ds-ease),box-shadow var(--ds-t2) var(--ds-ease)}
.hand .card:not(.newcard)::before,.beach .slot .card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:linear-gradient(135deg,#ffffff38 0,#fff0 38%,#fff0 70%,#00000014 100%);box-shadow:inset 0 0 0 1px #ffffff40}
.hand .card:hover,.hand .card.sel{box-shadow:0 0 0 1px #0b2e4a26,var(--ds-sh3)}
@media (hover:hover){.hand .card.playable:hover{transform:translateY(-12px) rotate(-1.2deg)}}
.hand .card.sel{transform:translateY(-12px)}
@keyframes dsPlay{0%{transform:scale(.86)}60%{transform:scale(1.06)}100%{transform:none}}
/* przyciski: stan wciśnięcia i najechania */
.btn{border-radius:var(--ds-r2);box-shadow:0 1px 0 #ffffff40 inset,0 3px 0 #0003,0 4px 8px #0002;transition:transform var(--ds-t1) var(--ds-ease),box-shadow var(--ds-t1),filter var(--ds-t1)}
@media (hover:hover){.btn:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px)}}
.btn:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #ffffff30 inset,0 1px 0 #0003}
.btn:disabled{filter:saturate(.3);opacity:.6;box-shadow:none}
.btn:focus-visible{outline:3px solid var(--ds-gold);outline-offset:2px}
/* pasek faz */
.phst li{border-radius:var(--ds-r1);transition:background var(--ds-t2),color var(--ds-t2)}
.phst li.on,.phst li.cur{box-shadow:0 2px 6px #e8731a55}
/* toasty i banery */
.drawtoast,.botmsg,.reveal>div{box-shadow:var(--ds-sh3)}
.drawtoast{border-radius:var(--ds-r4);animation:dsToast .3s var(--ds-spring)}
@keyframes dsToast{from{opacity:0;transform:translate(-50%,8px) scale(.94)}}
/* wynik: licznik i konfetti (subtelne) */
.dscount{display:inline-block;animation:dsPop .4s var(--ds-spring)}@keyframes dsPop{0%{transform:scale(1.5);color:var(--ds-or)}}
.dsconf{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.dsconf i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:.9;animation:dsFall 2.4s linear forwards}
@keyframes dsFall{to{transform:translate(var(--dx),105vh) rotate(540deg);opacity:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.dsconf{display:none}}
/* 1024×600 i podobne: trener w pustej prawej kolumnie (nad ręką), nie na grzbietach fal */
@media (max-height:639px) and (orientation:landscape) and (min-width:900px){aside#tutor{left:auto!important;right:6px!important;top:auto!important;bottom:calc(25dvh + 74px)!important;width:min(410px,calc(100vw - 612px))!important;max-height:calc(75dvh - 250px)!important;font-size:12px!important}}
/* desktop + mysz: bez ikon ⤢ na kartach ręki (klik = podgląd), najechana karta wychodzi na wierzch i jest w całości klikalna; cele ≥44 px */
@media (hover:hover) and (pointer:fine){
 .hand .card .zb{display:none!important}
 .hand .card:hover{z-index:30!important}
 .actionbar .btn,.game .btn{min-height:44px!important}
  .btn,header button,header a.btn,#hdrHelp .helpt,.helpt,#tutor .tg,.coachbar button{min-height:44px;min-width:44px}
}
@media (min-height:501px) and (max-height:639px) and (orientation:landscape) and (min-width:900px){.mgame .mhand .hand{--cw:min(190px,32dvh)!important}}
/* podpowiedzi „Tor wyniku” i „AP”: obszar dotyku ≥44 px bez zmiany układu */
.track.tablica[role=button],.rb[role=button]{position:relative}
.track.tablica[role=button]::after,.rb[role=button]::after{content:'';position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
.btn small.gol{font:600 13px Barlow;opacity:.9;letter-spacing:0}
.mtabs .helpt.mini{position:relative;z-index:5;flex:none;background:#0B2E4A}.mtabs .helpt.mini.on{background:#2E7D32}
/* Banery kluczowych momentów (wzorzec: pas koloru + gruby obrysowany napis + wskakująca postać) */
.bnr{position:fixed;left:0;right:0;top:30%;z-index:90;pointer-events:none;display:flex;justify-content:center}
.bnr-band{position:relative;width:100%;display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 10px;background:linear-gradient(90deg,#0000,var(--bc,#E8731A) 12%,var(--bc,#E8731A) 88%,#0000);box-shadow:0 8px 24px #0006;animation:bnrIn .28s var(--ds-spring) both}
.bnr b{font:900 clamp(34px,8vw,64px)/1 BC,Barlow,sans-serif;letter-spacing:.04em;color:#fff;-webkit-text-stroke:3px var(--ds-navy);paint-order:stroke fill;text-shadow:0 4px 0 var(--ds-navy),0 8px 16px #0007;transform:rotate(-2deg);animation:bnrTxt .36s var(--ds-spring) .06s both}
.bnr-av{height:clamp(64px,14vw,110px);margin:-30px 0;filter:drop-shadow(0 6px 8px #0008);animation:bnrAv .4s var(--ds-spring) .1s both}
.bnr-turn{--bc:#0a8a5a}.bnr-wipe{--bc:#C62828}.bnr-pb{--bc:#E8731A}.bnr-exc{--bc:#D4A017}
.bnr.out .bnr-band{animation:bnrOut .2s ease-in forwards}
@keyframes bnrIn{from{transform:scaleY(0);opacity:0}}
@keyframes bnrTxt{from{transform:scale(2.2) rotate(-6deg);opacity:0}}
@keyframes bnrAv{from{transform:translateY(40px) scale(.6);opacity:0}}
@keyframes bnrOut{to{transform:translateX(30%);opacity:0}}
/* grube, obrysowane nagłówki sekcji */
.mh b,.wiz h2,.decide h3,#decide h3{font-weight:900;letter-spacing:.03em}
.mat.ocean .mh b{-webkit-text-stroke:1px #0B2E4A;paint-order:stroke fill}
/* strefa upuszczenia podczas przeciągania */
.droptarget{outline:3px dashed var(--ds-gold)!important;outline-offset:-6px}
.droptarget::after{content:'ZAGRAJ TUTAJ';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;pointer-events:none;font:900 26px/1 BC,Barlow;color:#fff;-webkit-text-stroke:2px #0B2E4A;paint-order:stroke fill;background:#E8731Acc;padding:8px 16px;border-radius:12px;animation:dsPop .3s var(--ds-spring)}
.flyplay{position:fixed;z-index:85;pointer-events:none;will-change:transform}.flyplay>.card{width:100%;height:100%;--cw:100%;box-shadow:0 20px 40px #0008}
.rgauge{display:block;height:6px;margin:4px auto 0;width:80%;border-radius:3px;background:#ffffff40;overflow:hidden}.rgauge i{display:block;height:100%;background:linear-gradient(90deg,#FFD54F,#FF7043,#D32F2F);border-radius:3px}
.turn .tav{height:30px;width:30px;object-fit:contain;vertical-align:middle;margin:-8px 4px -6px -4px;border-radius:50%;background:#fff3;filter:drop-shadow(0 2px 2px #0006)}