@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0b1512;--surface:#111f1a;--line:#284036;--text:#edf4ef;--muted:#9eb2a6;--green:#a9e6bf;--radius:20px}*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}body{margin:0;background:radial-gradient(ellipse at 80% 0%,#18372a 0,transparent 32%),var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;min-height:100vh}a{color:var(--green);text-decoration:none}a:hover{color:#d3f5de}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(18px,5vw,76px);border-bottom:1px solid #24372d;background:#0b1512e8;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:11px;color:var(--text);font:700 19px Manrope,sans-serif;letter-spacing:-.5px}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:var(--green);color:#10291d;font-size:24px}.brand b{color:var(--green)}.nav{display:flex;align-items:center;gap:22px;font-size:13px;color:var(--muted)}.nav a{color:var(--muted)}.nav a:hover{color:var(--text)}.nav-user{color:var(--text)}.nav-cta{border:1px solid #466c55;border-radius:10px;padding:10px 14px;color:var(--green)!important}.inline-form{display:inline}.nav-button{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer}.page-shell{width:min(1200px,calc(100% - 40px));margin:0 auto;min-height:calc(100vh - 130px)}.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:42px;align-items:center;padding:74px 0 64px}.hero-copy{max-width:530px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--green);text-transform:uppercase;display:flex;align-items:center;gap:9px}.status-dot{width:7px;height:7px;background:#80dca3;border-radius:50%;box-shadow:0 0 14px #80dca3}.hero h1,.auth-card h1,.welcome-row h1{font:800 clamp(42px,5vw,68px)/1.08 Manrope,sans-serif;letter-spacing:-2.8px;margin:22px 0}.hero h1 em{font-style:normal;color:var(--green)}.hero-copy>p{color:var(--muted);line-height:1.8;font-size:15px;max-width:480px}.hero-actions{display:flex;align-items:center;gap:12px;margin-top:27px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:13px 18px;border-radius:12px;border:1px solid transparent;font:700 13px 'DM Sans',sans-serif;cursor:pointer;transition:transform .15s,background .15s}.button:hover{transform:translateY(-1px)}.button-primary{background:var(--green);color:#10291d}.button-primary:hover{background:#c5f4d3;color:#10291d}.button-quiet{border-color:var(--line);color:var(--text);background:#13221b}.button-danger{border-color:#744344;color:#ffc1c1;background:#381e20}.button-small{padding:8px 11px;font-size:12px;border-radius:9px}.full-width{width:100%}.hero-notes{display:flex;gap:15px;flex-wrap:wrap;margin-top:27px;color:#81988a;font-size:11px}.table-art{position:relative;min-height:390px;border:1px solid #3d634b;border-radius:48%/40%;background:radial-gradient(ellipse at center,#236342 0,#17452f 55%,#103522 100%);box-shadow:inset 0 0 0 9px #15251b,inset 0 0 0 11px #4c674b,0 30px 80px #0005;overflow:hidden}.table-art:before{content:'';position:absolute;inset:17px;border:1px solid #8dbb8b55;border-radius:48%/40%}.seat{position:absolute;display:grid;grid-template-columns:34px auto;column-gap:8px;align-items:center;font-size:11px;color:#edf4ef}.seat small{grid-column:2;color:#a8c5b0;font-size:9px}.avatar{grid-row:span 2;display:grid;place-items:center;border:1px solid #9dc6a4;background:#315e42;border-radius:50%;width:34px;height:34px;font-weight:700}.seat-top{top:29px;left:50%;transform:translateX(-50%)}.seat-left{top:45%;left:22px}.seat-right{top:45%;right:22px}.center-badge{position:absolute;top:31%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;color:#d7edda}.center-badge span{font-size:30px}.center-badge b{font:800 16px Manrope;letter-spacing:3px}.center-badge small{font-size:8px;letter-spacing:4px;color:#a8c5b0}.mini-cards{position:absolute;left:50%;top:57%;transform:translateX(-50%) rotate(-3deg);display:flex;align-items:center}.playing-card{width:52px;height:75px;border-radius:7px;background:#f6f3e9;color:#1c2820;box-shadow:0 6px 14px #06150d88;border:1px solid #fff;display:flex;flex-direction:column;justify-content:space-between;padding:6px;font:700 14px Georgia}.playing-card span{align-self:flex-end;font-size:21px}.playing-card.red{color:#b9343a}.playing-card+.playing-card{margin-left:-15px}.table-label{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:#a9cbb2;white-space:nowrap}.table-label span{color:#e5c47d;padding:0 6px}.game-types{padding:28px 0 70px}.section-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:23px}.section-heading h2{font:700 clamp(23px,3vw,34px) Manrope;letter-spacing:-1.2px;margin:9px 0 0}.section-heading>p{max-width:300px;color:var(--muted);font-size:12px;line-height:1.7}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.mode-card{display:flex;align-items:flex-start;gap:13px;border:1px solid var(--line);background:linear-gradient(135deg,#14251c,#101b16);padding:20px;border-radius:16px;min-width:0}.mode-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:#234532;color:var(--green);font-size:23px}.mode-card h3{margin:2px 0 7px;font-size:14px}.mode-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.mode-tag{margin-left:auto;white-space:nowrap;color:#b8d9c0;border:1px solid #345642;border-radius:7px;padding:5px 7px;font-size:9px}.footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #20332a;padding:22px clamp(20px,5vw,76px);color:#708779;font-size:11px}.auth-wrap{display:grid;place-items:center;padding:54px 0}.auth-card{width:min(100%,460px);padding:clamp(24px,5vw,38px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#15251d,#101a15);box-shadow:0 20px 70px #0003}.auth-card h1{font-size:34px;letter-spacing:-1.4px;margin:13px 0}.muted{color:var(--muted);line-height:1.7;font-size:13px}.form-stack{display:grid;gap:16px;margin-top:25px}.form-stack label{display:grid;gap:8px;color:#dbe8de;font-size:12px;font-weight:600}.form-stack input{width:100%;border:1px solid #30483a;border-radius:10px;background:#0d1812;color:var(--text);padding:13px 14px;font:14px 'DM Sans',sans-serif;outline:none}.form-stack input:focus{border-color:#8acda0;box-shadow:0 0 0 3px #8acda01a}.auth-bottom{margin:22px 0 0;color:var(--muted);font-size:12px;text-align:center}.auth-bottom a{font-weight:700}.alert{padding:12px 14px;border-radius:10px;margin:16px 0;font-size:12px;line-height:1.6}.alert-success{background:#153a27;border:1px solid #2d7049;color:#baf0cb}.alert-error{background:#3b2021;border:1px solid #754244;color:#ffc1c1}.notice{margin-top:20px;padding:14px;border:1px solid #665834;border-radius:11px;background:#2b2618;color:#d8c89b;font-size:11px;line-height:1.7}.notice-large{padding:22px;font-size:13px}.notice-large p{color:#c2cbbd;line-height:1.7;margin-bottom:0}.welcome-row{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:45px 0 28px}.welcome-row h1{font-size:clamp(29px,4vw,42px);letter-spacing:-1.5px;margin:12px 0}.points-card{min-width:145px;padding:18px;border:1px solid #42684d;background:#173426;border-radius:15px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px}.points-card span{font-size:10px;color:#b4d2ba}.points-card strong{font:800 29px Manrope;color:var(--green);grid-row:span 2}.points-card small{font-size:10px;color:#8aa994}.dashboard-modes{margin:24px 0 60px}.panel{border:1px solid var(--line);border-radius:16px;background:#111e17;margin:20px 0;overflow:hidden}.panel-heading{display:flex;align-items:center;gap:10px;padding:19px 21px;border-bottom:1px solid var(--line)}.panel-heading h2{font:700 17px Manrope;margin:0}.count-pill{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:8px;background:#244531;color:var(--green);font-size:11px}.empty-state{padding:25px;color:var(--muted);font-size:13px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:680px;text-align:left;font-size:12px}th,td{padding:14px 18px;border-bottom:1px solid #21362a}th{color:#94ad9b;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.7px}td{color:#d7e3da}tbody tr:last-child td{border-bottom:0}.action-row{display:flex;gap:7px;align-items:center}.status{display:inline-block;padding:5px 8px;border-radius:7px;font-size:10px}.status-approved{background:#173e29;color:#b6efc7}.status-pending{background:#3b321c;color:#f1d68d}.status-rejected,.status-suspended{background:#3d2222;color:#f0b0b0}@media(max-width:900px){.hero{grid-template-columns:1fr;gap:38px;padding-top:48px}.hero-copy{max-width:700px}.table-art{width:min(100%,620px);justify-self:center;min-height:350px}.mode-grid{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column;gap:4px}.section-heading>p{margin:0}.mode-card{align-items:center}}@media(max-width:560px){.topbar{height:64px;padding:0 15px}.brand{font-size:16px}.brand-mark{width:31px;height:31px}.nav{gap:12px;font-size:12px}.nav-user{display:none}.nav-cta{padding:8px 10px}.page-shell{width:calc(100% - 28px)}.hero{padding:40px 0 42px;gap:30px}.hero h1{font-size:43px;letter-spacing:-2px}.hero-copy>p{font-size:13px}.hero-notes{gap:9px;font-size:10px}.table-art{min-height:290px;border-radius:42%/35%;box-shadow:inset 0 0 0 6px #15251b,inset 0 0 0 8px #4c674b,0 20px 50px #0004}.table-art:before{inset:12px}.seat-top{top:22px}.seat-left{left:13px}.seat-right{right:13px}.avatar{width:29px;height:29px}.seat{font-size:10px;grid-template-columns:29px auto}.seat small{font-size:8px}.center-badge{top:30%}.center-badge span{font-size:24px}.center-badge b{font-size:13px}.mini-cards{top:57%}.playing-card{width:43px;height:63px;padding:5px;font-size:12px}.playing-card span{font-size:17px}.table-label{bottom:20px;font-size:8px}.game-types{padding-bottom:40px}.section-heading h2{font-size:25px}.mode-card{padding:15px}.mode-tag{font-size:8px}.footer{padding:18px 15px;font-size:10px}.footer span:last-child{max-width:55%;text-align:right}.auth-wrap{padding:28px 0}.auth-card{padding:23px}.welcome-row{align-items:flex-start;padding-top:32px}.welcome-row h1{font-size:29px}.points-card{min-width:108px;padding:12px;gap:3px 8px}.points-card span{font-size:9px}.points-card strong{font-size:24px}.points-card small{font-size:9px}.panel-heading{padding:15px}.notice-large{padding:17px}}@media(orientation:landscape) and (max-height:500px){.topbar{height:52px}.hero{padding:20px 0 25px;grid-template-columns:.9fr 1fr;gap:20px}.hero h1{font-size:36px;margin:10px 0}.hero-copy>p{font-size:12px;line-height:1.5}.hero-actions{margin-top:12px}.hero-notes{margin-top:12px}.table-art{min-height:245px}.game-types{padding-top:10px}}

/* v0.2 playable game */
.game-page{padding:30px 0 70px}.game-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.game-topline h1{font:800 clamp(34px,5vw,48px)/1.1 Manrope,sans-serif;letter-spacing:-1.8px;margin:12px 0 7px}.game-topline p{margin:0}.panel,.hand-panel{background:linear-gradient(145deg,#14251d,#101b16);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,4vw,34px)}.game-intro{max-width:760px;margin:35px auto;text-align:center}.game-spade{font-size:54px;color:var(--green)}.game-intro h2,.play-feature h2{font:800 clamp(25px,4vw,36px) Manrope;margin:12px 0}.game-intro p,.play-feature p{max-width:610px;margin:0 auto 24px;color:var(--muted);line-height:1.7}.game-scoreboard{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.score-seat{background:#13231b;border:1px solid #2a4033;border-radius:13px;padding:12px 15px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px}.score-seat span{font-weight:700;font-size:13px}.score-seat strong{font:800 25px Manrope;color:var(--green);grid-row:span 2}.score-seat small{font-size:11px;color:var(--muted)}.score-seat.you{border-color:#7cb68c}.felt-table{min-height:400px;position:relative;overflow:hidden;border:8px solid #17251b;border-radius:30px;background:radial-gradient(ellipse at center,#236342,#17442e 66%,#103321);box-shadow:inset 0 0 0 2px #537b56,0 16px 40px #0003}.felt-label{position:absolute;top:17px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;letter-spacing:1.5px;color:#c0ddc5}.felt-label span{padding:0 8px;color:#e7ce85}.opponent{position:absolute;display:flex;align-items:center;gap:7px;color:#eff7ef;font-size:12px;z-index:1}.opponent small{color:#b7d0bd}.opponent-top{top:43px;left:50%;transform:translateX(-50%)}.opponent-left{left:15px;top:43%}.opponent-right{right:15px;top:43%}.bot-avatar{width:29px;height:29px;border:1px solid #a2c9a7;border-radius:50%;display:grid;place-items:center;background:#2c5b3e;font-size:9px;font-weight:800}.back-cards{display:flex;gap:2px;margin-left:2px}.back-cards i{font-style:normal;background:#e9efe5;color:#215338;border:1px solid #b4cbb8;border-radius:3px;width:12px;height:17px;display:grid;place-items:center;font-size:8px}.trick-area{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:8px;min-width:80%;min-height:105px}.table-hint{font-size:13px;color:#c7e1cb;text-align:center}.played-card{width:53px;height:76px;border:1px solid #e2e8de;border-radius:7px;background:#faf8ee;color:#1a2c21;display:flex;flex-direction:column;justify-content:space-between;padding:5px;box-shadow:0 4px 10px #05150a66}.played-card small{font-size:8px;color:#42574a}.played-card strong{font:700 16px Georgia}.played-card span{font-size:22px;align-self:flex-end}.red-card{color:#c43b42!important}.game-status{position:absolute;bottom:14px;left:12px;right:12px;text-align:center;font-size:11px;color:#c3dec8}.hand-panel{margin-top:16px;padding:20px}.hand-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.hand-heading h2{font:800 24px Manrope;margin:6px 0}.player-hand{display:flex;justify-content:center;gap:clamp(2px,.6vw,8px);padding:8px 0 3px;overflow-x:auto}.hand-card{flex:0 0 auto;width:clamp(39px,6.4vw,65px);height:clamp(82px,12vw,112px);border:1px solid #e5e6db;border-radius:8px;background:#fbf9f0;color:#17271d;display:flex;flex-direction:column;justify-content:space-between;padding:7px;cursor:pointer;box-shadow:0 4px 9px #0002;transition:transform .12s,border-color .12s;font-family:Georgia,serif}.hand-card strong{font-size:clamp(13px,2vw,18px);align-self:flex-start}.hand-card span{font-size:clamp(20px,3vw,29px);align-self:flex-end}.hand-card:hover:not(:disabled){transform:translateY(-8px);border-color:var(--green)}.hand-card:disabled{cursor:not-allowed;opacity:.38}.game-actions{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-top:15px}.game-actions p{font-size:11px}.game-result{margin-top:15px}.play-feature{display:flex;align-items:center;gap:24px;margin:20px 0 34px}.play-feature-icon{width:88px;height:88px;flex:0 0 88px;border-radius:22px;background:#203e2b;display:grid;place-items:center;font-size:48px;color:var(--green)}.play-feature p{margin:0 0 20px;max-width:690px}.play-feature h2{margin:8px 0}.play-feature .eyebrow{margin-top:4px}
@media(max-width:680px){.game-topline{align-items:flex-start}.game-topline>.button{padding:10px;font-size:11px}.game-scoreboard{gap:5px}.score-seat{padding:9px 7px;gap:2px 4px}.score-seat span{font-size:11px}.score-seat strong{font-size:21px}.felt-table{min-height:350px;border-width:5px;border-radius:22px}.opponent-left{left:7px;top:39%;flex-direction:column;gap:3px}.opponent-right{right:7px;top:39%;flex-direction:column;gap:3px}.opponent-top{top:42px}.back-cards{display:none}.trick-area{top:56%;gap:5px}.played-card{width:43px;height:65px;padding:4px}.game-status{font-size:10px}.hand-panel{padding:13px 8px}.hand-heading{padding:0 6px}.player-hand{justify-content:flex-start;padding-left:3px;padding-right:3px}.hand-card{width:43px;height:80px;padding:5px}.game-actions{align-items:flex-start;flex-direction:column;gap:8px}.play-feature{align-items:flex-start;gap:14px;padding:18px}.play-feature-icon{width:56px;height:56px;flex-basis:56px;border-radius:15px;font-size:32px}.play-feature .button{margin-top:2px}}

/* v0.3: premium playing cards and persistent trick display */
.hand-panel{background:linear-gradient(160deg,#17291f 0%,#0e1913 100%);border-color:#385943;box-shadow:0 18px 45px #0003}
.player-hand{gap:clamp(3px,.65vw,9px);align-items:flex-end;padding:18px 8px 12px;overflow-x:auto;scrollbar-color:#557b5d #122219}
.hand-card{position:relative;isolation:isolate;overflow:hidden;width:clamp(45px,6.2vw,72px);height:clamp(104px,13vw,132px);padding:5px;border:1px solid #d8d7c9;border-radius:9px;background:linear-gradient(135deg,#fffef8 0%,#f5f0e2 60%,#e7e2d4 100%);color:#17251d;box-shadow:0 7px 12px #03100870,inset 0 0 0 2px #fff,inset 0 0 0 3px #d6d0bf;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.hand-card:before{content:"";position:absolute;inset:5px;border:1px solid #d7d0bd;border-radius:5px;pointer-events:none;z-index:-1}
.hand-card:after{content:"";position:absolute;inset:10px 7px;background:radial-gradient(circle at center,#fff 0 1px,transparent 1.5px);background-size:7px 7px;opacity:.16;pointer-events:none;z-index:-1}
.hand-card:hover:not(:disabled){transform:translateY(-13px) rotate(-1deg);border-color:#bce9c5;box-shadow:0 15px 24px #020a06a8,0 0 0 2px #b2e7bd66}
.card-corner{display:flex;flex-direction:column;align-items:center;gap:0;line-height:.9;position:absolute;z-index:1;font-family:Georgia,serif}
.card-corner b{font-size:clamp(12px,1.55vw,18px);font-weight:800}
.card-corner i{font-style:normal;font-size:clamp(10px,1.25vw,15px)}
.card-corner-top{top:10px;left:9px}
.card-corner-bottom{right:9px;bottom:10px;transform:rotate(180deg)}
.card-large-suit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(31px,4.4vw,48px)!important;line-height:1;align-self:auto!important;filter:drop-shadow(0 1px 0 #fff8)}
.hand-card.red-card,.played-card.red-card{color:#c32f45!important}
.hand-card.card-disabled{filter:saturate(.5);opacity:.38}
.back-cards i{width:18px;height:25px;border-radius:4px;border:1px solid #e5d9b4;color:#f2d995;background:repeating-linear-gradient(45deg,#17452f 0 3px,#286344 3px 6px);box-shadow:inset 0 0 0 2px #d4bd79,inset 0 0 0 4px #17452f;font-size:10px}
.trick-area{width:min(84%,560px);min-width:280px;min-height:150px;gap:clamp(7px,1.4vw,16px);padding:14px 6px;flex-wrap:wrap}
.played-card{position:relative;width:clamp(61px,7.2vw,82px);height:clamp(91px,10vw,112px);padding:5px 5px 4px;border:1px solid #e6dfcc;border-radius:9px;background:linear-gradient(140deg,#fffef8,#eee8d9);box-shadow:0 8px 18px #03100888,inset 0 0 0 2px #fff,inset 0 0 0 3px #d5cdb9;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;animation:cardLand .22s ease-out}
.played-card:before{content:"";position:absolute;inset:5px;border:1px solid #d8d0bc;border-radius:5px;pointer-events:none}
.played-card>small{position:relative;z-index:1;display:block;text-align:center;font:700 9px/1.2 'DM Sans',sans-serif;color:#294735;background:#e8eee2;border-radius:4px;padding:4px 2px;white-space:nowrap}
.played-card-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;flex:1;font-family:Georgia,serif}
.played-card-face strong{font-size:clamp(18px,2.1vw,24px);line-height:1.05}
.played-card-face span{font-size:clamp(29px,3.2vw,38px);line-height:1.05}
.played-card-caption{display:block!important;align-self:center!important;font:700 8px 'DM Sans',sans-serif!important;color:#637264!important;white-space:nowrap}
.trick-complete .played-card{border-color:#d9c47c;box-shadow:0 8px 18px #03100888,0 0 0 1px #e9d28b55,inset 0 0 0 2px #fff,inset 0 0 0 3px #d5cdb9}
@keyframes cardLand{from{opacity:.45;transform:translateY(-8px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:680px){.trick-area{width:92%;min-width:0;gap:5px;min-height:135px}.played-card{width:clamp(54px,15vw,68px);height:88px;padding:4px}.played-card>small{font-size:8px}.played-card-face strong{font-size:18px}.played-card-face span{font-size:29px}.played-card-caption{font-size:7px!important}.hand-card{width:46px;height:94px}.card-corner-top{top:8px;left:7px}.card-corner-bottom{right:7px;bottom:8px}.card-large-suit{font-size:31px!important}.player-hand{justify-content:flex-start;gap:4px}}

/* v0.4: bot cards are played one at a time so every move is visible */
.bot-thinking{display:flex;justify-content:center;align-items:center;gap:9px;color:#c5e7ce;font-size:12px;margin:10px auto;padding:10px}.thinking-dot{width:8px;height:8px;border-radius:50%;background:#a9e6bf;box-shadow:0 0 12px #a9e6bf;animation:thinkingPulse .8s ease-in-out infinite alternate}.played-card{animation:cardLand .28s cubic-bezier(.2,.8,.2,1)}@keyframes thinkingPulse{from{opacity:.35;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}

/* v0.5 - Koz Maça tahmin/ihale ekranı */
.bid-panel{max-width:900px;margin:24px auto;padding:clamp(22px,4vw,42px)}
.bid-panel h2{margin:8px 0 12px}
.bid-panel>p{max-width:680px;color:var(--muted,#b9c8bf);line-height:1.65}
.bid-hand-preview{margin:24px 0 20px;padding:16px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(0,0,0,.12)}
.bid-mini-cards{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bid-mini-card{width:43px;height:60px;border-radius:7px;background:#fff;color:#151515;display:flex;flex-direction:column;justify-content:space-between;padding:5px;font-size:14px;box-shadow:0 2px 5px #0003}
.bid-mini-card i{font-style:normal;font-size:21px;align-self:flex-end;line-height:1}
.red-card .card-corner,.red-card .card-large-suit,.bid-mini-card.red-card{color:#c51f35}
.bid-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-top:20px}
.bid-form label{display:flex;flex-direction:column;gap:8px;font-weight:700}
.bid-form select{min-width:130px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:#102d24;color:inherit;font:inherit}
.bid-badge{display:block;margin-top:5px;font-size:11px;font-style:normal;opacity:.8}
.bid-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin-top:20px}
.bid-result{display:flex;flex-direction:column;gap:6px;padding:13px;border-radius:12px;border:1px solid rgba(255,255,255,.13)}
.bid-result span{font-size:13px;opacity:.8}.bid-result b{font-size:12px;letter-spacing:.04em}
.bid-result.busted{border-color:#e65d67;background:rgba(190,30,50,.14)}.bid-result.busted b{color:#ff7c86}
.bid-result.safe{border-color:#4dbb86;background:rgba(40,150,100,.12)}.bid-result.safe b{color:#70dda6}
@media(max-width:600px){.bid-form{align-items:stretch;flex-direction:column}.bid-form select,.bid-form .button{width:100%}.bid-mini-card{width:36px;height:52px}}


/* v0.6: classic clean playing cards and visible active turn */
.played-card{
  position:absolute;width:74px;height:106px;box-sizing:border-box;
  border:1px solid #d9d9d4;border-radius:10px;background:#fffef9;color:#151515;
  padding:6px;display:block;box-shadow:0 8px 20px #06170d55;
  font-family:Georgia,'Times New Roman',serif;
}
.played-card:before{content:"";position:absolute;inset:3px;border:1px solid #e5e1d7;border-radius:7px;pointer-events:none}
.played-card .played-card-corner{position:absolute;left:8px;top:7px;display:flex;flex-direction:column;align-items:center;line-height:.9;gap:2px}
.played-card .played-card-corner strong{font-size:18px;font-weight:700}
.played-card .played-card-corner span{font-size:15px;line-height:1}
.played-card .played-card-center{position:absolute;inset:0;display:grid;place-items:center;font-size:42px;line-height:1}
.played-card .played-card-corner.bottom{left:auto;top:auto;right:8px;bottom:7px;transform:rotate(180deg)}
.played-card.red-card{color:#d21f3c!important}
.trick-area{gap:clamp(8px,2vw,24px)}
.score-seat.active-turn,.opponent.active-turn{
  border-color:#a9f3c4!important;
  box-shadow:0 0 0 2px #73e6a54d,0 0 22px #6ce9a966;
  background:#214b36!important;
  animation:turnGlow 1.5s ease-in-out infinite alternate;
}
.score-seat.active-turn>span,.opponent.active-turn b{color:#b8ffd1;text-shadow:0 0 9px #77f3ad88}
.score-seat.active-turn:after{content:"HAMLE SIRASI";display:block;grid-column:1/-1;font-size:9px;letter-spacing:.08em;color:#a9f3c4;font-weight:800}
.game-status{font-weight:700;font-size:12px;letter-spacing:.02em}
@keyframes turnGlow{from{box-shadow:0 0 0 1px #73e6a533,0 0 10px #6ce9a933}to{box-shadow:0 0 0 3px #73e6a566,0 0 22px #6ce9a977}}
@media(max-width:680px){.played-card{width:54px;height:80px;padding:4px}.played-card .played-card-corner{left:6px;top:6px}.played-card .played-card-corner strong{font-size:14px}.played-card .played-card-corner span{font-size:12px}.played-card .played-card-center{font-size:30px}.played-card .played-card-corner.bottom{right:6px;bottom:6px}}


/* v0.7 — kompakt skorlar, belirgin aktif oyuncu ve kart atma animasyonu */
.game-page{padding-top:16px;padding-bottom:32px}
.game-topline{margin-bottom:12px}
.game-topline h1{margin:4px 0;font-size:clamp(28px,4vw,42px)}
.game-topline .eyebrow{display:none}
.game-topline p{font-size:11px}
.game-scoreboard{gap:7px;margin-bottom:8px}
.score-seat{padding:8px 10px;border-radius:10px;grid-template-columns:1fr auto;gap:0 6px;min-height:56px}
.score-seat span{font-size:12px}
.score-seat strong{font-size:22px;grid-row:span 2}
.score-seat small{font-size:10px}
.bid-badge{font-size:10px;margin-top:2px;color:#b9cbbb;grid-column:1/-1}
.score-seat.active-turn:after{font-size:8px;letter-spacing:.04em;margin-top:2px}
.felt-table{min-height:clamp(310px,43vw,440px);border-width:6px;border-radius:24px}
.trick-area{min-height:132px}
.played-card{transform-origin:center bottom;animation:cardThrow .36s cubic-bezier(.16,.84,.22,1) both;}
.played-card.seat-player-0{--dx:0px;--dy:58px;--rot:0deg}
.played-card.seat-player-1{--dx:0px;--dy:-48px;--rot:0deg}
.played-card.seat-player-2{--dx:-62px;--dy:0px;--rot:-7deg}
.played-card.seat-player-3{--dx:62px;--dy:0px;--rot:7deg}
@keyframes cardThrow{0%{opacity:.25;transform:translate(var(--dx,0),var(--dy,24px)) scale(.68) rotate(var(--rot,0deg));filter:blur(1px)}65%{opacity:1;transform:translate(0,-3px) scale(1.04) rotate(0);filter:blur(0)}100%{opacity:1;transform:translate(0,0) scale(1) rotate(0);filter:none}}
.hand-card{background:linear-gradient(135deg,#fff 0%,#fff 60%,#f0eee7 100%);border-radius:9px;box-shadow:0 7px 13px #020b06a0,inset 0 0 0 2px #fff,inset 0 0 0 3px #d6d6d2}
.hand-card:before{inset:5px;border-color:#d9d9d4}
.hand-card:after{inset:12px 9px;background:radial-gradient(ellipse at center,#f6f4ed 0 24%,transparent 70%);opacity:.55}
.card-large-suit{font-size:clamp(34px,4.5vw,50px)!important;text-shadow:0 1px #fff}
.played-card{background:linear-gradient(135deg,#fff 0%,#fff 66%,#f0eee7 100%);box-shadow:0 12px 22px #03100899,inset 0 0 0 2px #fff,inset 0 0 0 3px #d6d6d2}
.played-card:before{border-color:#d9d9d4}
.compact-bid-results{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:12px}
.compact-bid-results .bid-result{padding:8px 10px;gap:3px;align-items:center;justify-content:center;min-width:0}
.compact-bid-results .bid-result strong{font-size:11px;align-self:flex-start}
.compact-bid-results .bid-fraction{font-size:22px;line-height:1.1;letter-spacing:0}
.compact-bid-results .bid-result.safe{color:#78e6a6;border-color:#3a9e69;background:rgba(40,150,100,.12)}
.compact-bid-results .bid-result.busted{color:#ff7c86;border-color:#d34a59;background:rgba(190,30,50,.14)}
.compact-bid-results .bid-result.safe .bid-fraction{color:#78e6a6}
.compact-bid-results .bid-result.busted .bid-fraction{color:#ff7c86}
.game-result{padding:14px;margin-top:8px}
.game-result h2{font-size:20px;margin:0 0 5px}
.game-result>p{margin:0;font-size:12px}
.game-status{bottom:9px;font-size:10px;opacity:.8}
@media(max-width:680px){
 .game-page{padding-top:10px}.game-topline{margin-bottom:8px}.game-scoreboard{gap:4px}.score-seat{padding:7px 5px;min-height:51px}.score-seat span{font-size:10px}.score-seat strong{font-size:18px}.bid-badge{font-size:9px}.felt-table{min-height:320px}.compact-bid-results{gap:4px}.compact-bid-results .bid-result{padding:7px 4px}.compact-bid-results .bid-result strong{font-size:10px}.compact-bid-results .bid-fraction{font-size:19px}.played-card{animation:cardThrow .32s cubic-bezier(.16,.84,.22,1) both}
}
@media(prefers-reduced-motion:reduce){.played-card{animation:none!important}}

/* v0.8: oyuncunun eli her turda görünür kalır; sıra dışındayken soluklaşmaz. */
.player-hand.waiting-turn .hand-card.waiting-card{opacity:1;filter:none;cursor:default;transform:none;box-shadow:0 7px 13px #020b06a0,inset 0 0 0 2px #fff,inset 0 0 0 3px #d6d6d2}
.player-hand.waiting-turn .hand-card.waiting-card:hover{transform:none;border-color:#d8d7c9}
.player-hand.is-your-turn .hand-card.card-disabled{opacity:.42;filter:saturate(.45)}
.player-hand{min-height:clamp(104px,13vw,132px)}
@media(max-width:680px){.player-hand{min-height:94px}}


/* v0.9: table cards occupy four distinct seats; animation must not override placement */
.felt-table{min-height:clamp(330px,43vw,440px)}
.trick-area{left:50%;top:51%;width:min(88%,650px);height:clamp(190px,23vw,230px);min-width:0;min-height:0;padding:0;display:block;transform:translate(-50%,-50%);overflow:visible;}
.trick-area .table-hint{position:absolute;inset:0;display:grid;place-items:center;}
.trick-area .played-card{position:absolute;width:clamp(58px,6.4vw,76px);height:clamp(86px,9.2vw,104px);margin:0;z-index:2;transform-origin:center center;translate:0 0;animation:cardThrowV09 .34s cubic-bezier(.16,.84,.22,1) both;}
.trick-area .played-card.seat-player-0{left:50%;top:auto;bottom:0;transform:translateX(-50%);--dx:0px;--dy:42px;--rot:0deg;}
.trick-area .played-card.seat-player-1{left:50%;top:0;bottom:auto;transform:translateX(-50%);--dx:0px;--dy:-38px;--rot:0deg;}
.trick-area .played-card.seat-player-2{left:17%;top:50%;bottom:auto;transform:translate(-50%,-50%);--dx:-44px;--dy:0px;--rot:-3deg;}
.trick-area .played-card.seat-player-3{left:auto;right:17%;top:50%;bottom:auto;transform:translate(50%,-50%);--dx:44px;--dy:0px;--rot:3deg;}
@keyframes cardThrowV09{0%{opacity:.2;translate:var(--dx,0) var(--dy,24px);scale:.78;filter:blur(1px)}65%{opacity:1;translate:0 -3px;scale:1.035;filter:none}100%{opacity:1;translate:0 0;scale:1;filter:none}}
.trick-area .played-card .played-card-center{font-size:clamp(34px,3.6vw,43px)}
.trick-area .played-card .played-card-corner strong{font-size:clamp(14px,1.6vw,18px)}
.trick-area .played-card .played-card-corner span{font-size:clamp(12px,1.3vw,15px)}
@media(max-width:680px){
 .felt-table{min-height:320px}
 .trick-area{width:96%;height:176px;top:52%}
 .trick-area .played-card{width:52px;height:78px}
 .trick-area .played-card.seat-player-0{bottom:0}
 .trick-area .played-card.seat-player-1{top:0}
 .trick-area .played-card.seat-player-2{left:13%;top:50%}
 .trick-area .played-card.seat-player-3{right:13%;top:50%}
 .trick-area .played-card .played-card-center{font-size:29px}
 .trick-area .played-card .played-card-corner strong{font-size:13px}
 .trick-area .played-card .played-card-corner span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.trick-area .played-card{animation:none!important;translate:0 0!important}}


/* v0.10 — daha okunaklı klasik iskambil yüzleri ve net masa sırası */
/* Kart yüzünde çift ince çerçeve, büyük orta sembol ve köşe indeksleri. */
.hand-card,.trick-area .played-card{
  position:relative; overflow:hidden; isolation:isolate;
  color:#17231b; border:1px solid #d4d0c5; border-radius:8px;
  background:linear-gradient(118deg,#fff 0%,#fffefa 48%,#f1eee5 100%);
  box-shadow:0 7px 15px #06140b70,inset 0 0 0 2px #fff,inset 0 0 0 3px #d8d4c9;
  font-family:Georgia,'Times New Roman',serif;
}
.hand-card:before,.trick-area .played-card:before{
  content:"";position:absolute;inset:5px;border:1px solid #ded9cc;border-radius:4px;pointer-events:none;z-index:0;
}
.hand-card:after{content:none!important}
.hand-card .card-corner,.trick-area .played-card-corner{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:0;
  z-index:2;line-height:.88;color:inherit;font-family:Georgia,'Times New Roman',serif;
}
.hand-card .card-corner-top{left:9px;top:8px;right:auto;bottom:auto}
.hand-card .card-corner-bottom{right:9px;bottom:8px;left:auto;top:auto;transform:rotate(180deg)}
.hand-card .card-corner b{font-size:clamp(14px,1.6vw,19px);font-weight:700}
.hand-card .card-corner i{font-style:normal;font-size:clamp(11px,1.3vw,15px)}
.hand-card .card-large-suit{position:absolute;inset:0;display:grid;place-items:center;align-self:auto;font-size:clamp(34px,4vw,49px)!important;line-height:1;text-shadow:0 1px #fff9;z-index:1}
.hand-card.red-card,.trick-area .played-card.red-card{color:#c9273d!important}
.hand-card:disabled{filter:saturate(.75)}
.hand-card.waiting-card{opacity:.82}
.trick-area .played-card{display:block;overflow:hidden;}
.trick-area .played-card-corner{left:8px;top:7px;right:auto;bottom:auto;align-items:center;}
.trick-area .played-card-corner strong{font-size:clamp(16px,1.7vw,20px);line-height:.9;font-weight:700}
.trick-area .played-card-corner span{font-size:clamp(12px,1.25vw,15px);line-height:1.05;align-self:center}
.trick-area .played-card-center{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(34px,4vw,47px);line-height:1;z-index:1;color:inherit}
.trick-area .played-card-corner.bottom{left:auto;top:auto;right:8px;bottom:7px;transform:rotate(180deg)}
.trick-area .played-card-corner.bottom strong{font-size:clamp(16px,1.7vw,20px)}
.trick-area .played-card-corner.bottom span{font-size:clamp(12px,1.25vw,15px)}
.trick-area .played-card{box-shadow:0 9px 20px #031008a8,inset 0 0 0 2px #fff,inset 0 0 0 3px #d8d4c9;}
.trick-area .played-card.trick-complete{border-color:#d7c17b}
@media(max-width:680px){
 .hand-card .card-corner-top{left:6px;top:7px}
 .hand-card .card-corner-bottom{right:6px;bottom:7px}
 .hand-card .card-corner b{font-size:13px}
 .hand-card .card-corner i{font-size:11px}
 .hand-card .card-large-suit{font-size:30px!important}
 .trick-area .played-card-corner{left:6px;top:6px}
 .trick-area .played-card-corner strong,.trick-area .played-card-corner.bottom strong{font-size:13px}
 .trick-area .played-card-corner span,.trick-area .played-card-corner.bottom span{font-size:11px}
 .trick-area .played-card-corner.bottom{right:6px;bottom:6px}
 .trick-area .played-card-center{font-size:29px}
}


/* v0.11: klasik iskambil yüzleri ve gerçek yelpaze biçimli el */
.player-hand{
  display:flex;align-items:flex-end;justify-content:center;gap:0;
  width:100%;padding:8px 8px 3px;overflow:visible;isolation:isolate;
}
.player-hand .hand-card{
  position:relative;flex:0 1 clamp(39px,5.2vw,66px);width:clamp(39px,5.2vw,66px);
  min-width:0;height:clamp(112px,14vw,144px);padding:0;margin:0 0 0 -15px;
  border:1px solid #d5d3cc;border-radius:8px 8px 6px 6px;
  background:linear-gradient(110deg,#e9e7df 0%,#fffefa 12%,#fff 78%,#e8e5dc 100%);
  color:#111;box-shadow:0 5px 11px #00170c75,inset 0 0 0 2px #fff,inset 0 0 0 3px #d9d6cd;
  transform-origin:50% 112%;transition:transform .16s ease,margin .16s ease,box-shadow .16s ease;
}
.player-hand .hand-card:first-child{margin-left:0}
.player-hand .hand-card:before{content:"";position:absolute;inset:4px;border:1px solid #e4e0d6;border-radius:5px;pointer-events:none}
.player-hand .hand-card:after{content:none!important}
.player-hand .hand-card:nth-child(1){transform:rotate(-13deg) translateY(8px)}
.player-hand .hand-card:nth-child(2){transform:rotate(-11deg) translateY(5px)}
.player-hand .hand-card:nth-child(3){transform:rotate(-9deg) translateY(3px)}
.player-hand .hand-card:nth-child(4){transform:rotate(-7deg) translateY(1px)}
.player-hand .hand-card:nth-child(5){transform:rotate(-5deg)}
.player-hand .hand-card:nth-child(6){transform:rotate(-3deg)}
.player-hand .hand-card:nth-child(7){transform:rotate(-1deg)}
.player-hand .hand-card:nth-child(8){transform:rotate(1deg)}
.player-hand .hand-card:nth-child(9){transform:rotate(3deg)}
.player-hand .hand-card:nth-child(10){transform:rotate(5deg)}
.player-hand .hand-card:nth-child(11){transform:rotate(7deg) translateY(1px)}
.player-hand .hand-card:nth-child(12){transform:rotate(9deg) translateY(3px)}
.player-hand .hand-card:nth-child(13){transform:rotate(11deg) translateY(6px)}
.player-hand .hand-card:hover:not(:disabled){z-index:30;transform:translateY(-19px) rotate(0deg);box-shadow:0 12px 20px #00170c99,inset 0 0 0 2px #fff,inset 0 0 0 3px #d9d6cd}
.player-hand .hand-card:focus-visible{z-index:31;outline:3px solid #f2d77d;outline-offset:2px}
.player-hand .hand-card:disabled{cursor:default}
.player-hand.waiting-turn .hand-card.waiting-card:hover{transform:inherit}
.player-hand .card-corner{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:.9;z-index:2;font-family:Georgia,'Times New Roman',serif}
.player-hand .card-corner-top{left:5px;top:6px;right:auto;bottom:auto}
.player-hand .card-corner-bottom{right:5px;bottom:6px;left:auto;top:auto;transform:rotate(180deg)}
.player-hand .card-corner b{font-size:clamp(13px,1.35vw,18px);font-weight:800;line-height:.95}
.player-hand .card-corner i{font-style:normal;font-size:clamp(11px,1.15vw,15px);line-height:1}
.player-hand .card-large-suit{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(28px,3.5vw,43px)!important;line-height:1;z-index:1;text-shadow:none}
.player-hand .hand-card.red-card{color:#d11f36!important}
.player-hand .hand-card.card-disabled{opacity:.42;filter:grayscale(.25)}
.trick-area .played-card{border:1px solid #d7d4ca;border-radius:9px;background:linear-gradient(110deg,#e9e7df 0%,#fffefa 12%,#fff 78%,#e8e5dc 100%);color:#111;box-shadow:0 9px 20px #00170c99,inset 0 0 0 2px #fff,inset 0 0 0 3px #d9d6cd}
.trick-area .played-card:before{content:"";position:absolute;inset:4px;border:1px solid #e4e0d6;border-radius:6px;pointer-events:none}
.trick-area .played-card-center{font-family:Georgia,'Times New Roman',serif;text-shadow:none}
.trick-area .played-card.red-card{color:#d11f36!important}
@media(max-width:680px){
 .player-hand{padding:8px 1px 3px;justify-content:center}
 .player-hand .hand-card{flex:0 1 clamp(25px,7.1vw,43px);width:clamp(25px,7.1vw,43px);height:clamp(86px,23vw,112px);margin-left:-13px;border-radius:6px}
 .player-hand .hand-card:first-child{margin-left:0}
 .player-hand .card-corner-top{left:3px;top:5px}
 .player-hand .card-corner-bottom{right:3px;bottom:5px}
 .player-hand .card-corner b{font-size:clamp(10px,2.8vw,14px)}
 .player-hand .card-corner i{font-size:clamp(9px,2.4vw,12px)}
 .player-hand .card-large-suit{font-size:clamp(21px,5.7vw,31px)!important}
 .player-hand .hand-card:hover:not(:disabled){transform:translateY(-12px) rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){.player-hand .hand-card{transition:none}}


/* v0.12: played cards stay inside the full table; do not anchor them to a small center box */
.felt-table{position:relative;overflow:hidden}
.felt-table .trick-area{
  left:0;top:0;width:100%;height:100%;min-height:0;min-width:0;
  padding:0;display:block;transform:none;overflow:hidden;
}
.felt-table .trick-area .table-hint{position:absolute;inset:0;display:grid;place-items:center}
.felt-table .trick-area .played-card{
  position:absolute;width:clamp(58px,6.4vw,76px);height:clamp(86px,9.2vw,104px);
  margin:0;z-index:2;transform-origin:center center;translate:0 0;
  animation:cardThrowV12 .34s cubic-bezier(.16,.84,.22,1) both;
}
/* Seat 0 = human at bottom; seat 1 = opposite; seats 2/3 = left/right. */
.felt-table .trick-area .played-card.seat-player-0{left:50%;top:68%;bottom:auto;right:auto;transform:translate(-50%,-50%);--dx:0px;--dy:36px;}
.felt-table .trick-area .played-card.seat-player-1{left:50%;top:32%;bottom:auto;right:auto;transform:translate(-50%,-50%);--dx:0px;--dy:-36px;}
.felt-table .trick-area .played-card.seat-player-2{left:34%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);--dx:-36px;--dy:0px;}
.felt-table .trick-area .played-card.seat-player-3{left:66%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);--dx:36px;--dy:0px;}
@keyframes cardThrowV12{0%{opacity:.2;translate:var(--dx,0) var(--dy,24px);scale:.78;filter:blur(1px)}65%{opacity:1;translate:0 -3px;scale:1.035;filter:none}100%{opacity:1;translate:0 0;scale:1;filter:none}}
@media(max-width:680px){
 .felt-table{min-height:320px}
 .felt-table .trick-area{width:100%;height:100%;top:0;left:0}
 .felt-table .trick-area .played-card{width:52px;height:78px}
 .felt-table .trick-area .played-card.seat-player-0{left:50%;top:68%}
 .felt-table .trick-area .played-card.seat-player-1{left:50%;top:32%}
 .felt-table .trick-area .played-card.seat-player-2{left:30%;top:50%}
 .felt-table .trick-area .played-card.seat-player-3{left:70%;top:50%}
 .felt-table .trick-area .played-card .played-card-center{font-size:29px}
 .felt-table .trick-area .played-card .played-card-corner strong{font-size:13px}
 .felt-table .trick-area .played-card .played-card-corner span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.felt-table .trick-area .played-card{animation:none!important;translate:0 0!important}}


/* v0.13: playing cards are wider/less elongated; keep all four seats visible */
.felt-table .trick-area{overflow:visible!important}
.felt-table .trick-area .played-card{
  width:clamp(68px,7.1vw,84px)!important;
  height:clamp(88px,9.1vw,108px)!important;
  box-sizing:border-box;
  visibility:visible!important;
}
.felt-table .trick-area .played-card.seat-player-0{
  left:50%!important;right:auto!important;top:70%!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
}
.felt-table .trick-area .played-card.seat-player-1{
  left:50%!important;right:auto!important;top:30%!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
}
.felt-table .trick-area .played-card.seat-player-2{
  left:30%!important;right:auto!important;top:50%!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
}
.felt-table .trick-area .played-card.seat-player-3{
  left:70%!important;right:auto!important;top:50%!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
}
.felt-table .trick-area .played-card-center{font-size:clamp(34px,3.8vw,43px)!important}
.felt-table .trick-area .played-card-corner{left:7px;top:7px}
.felt-table .trick-area .played-card-corner strong,
.felt-table .trick-area .played-card-corner.bottom strong{font-size:clamp(15px,1.5vw,18px)!important}
.felt-table .trick-area .played-card-corner span,
.felt-table .trick-area .played-card-corner.bottom span{font-size:clamp(11px,1.2vw,14px)!important}
@media(max-width:680px){
  .felt-table{min-height:320px}
  .felt-table .trick-area{overflow:visible!important}
  .felt-table .trick-area .played-card{width:58px!important;height:80px!important}
  .felt-table .trick-area .played-card.seat-player-0{left:50%!important;top:70%!important}
  .felt-table .trick-area .played-card.seat-player-1{left:50%!important;top:30%!important}
  .felt-table .trick-area .played-card.seat-player-2{left:24%!important;top:50%!important}
  .felt-table .trick-area .played-card.seat-player-3{left:76%!important;top:50%!important}
  .felt-table .trick-area .played-card-center{font-size:28px!important}
  .felt-table .trick-area .played-card-corner{left:5px;top:5px}
  .felt-table .trick-area .played-card-corner strong,
  .felt-table .trick-area .played-card-corner.bottom strong{font-size:12px!important}
  .felt-table .trick-area .played-card-corner span,
  .felt-table .trick-area .played-card-corner.bottom span{font-size:10px!important}
}
@media(prefers-reduced-motion:reduce){.felt-table .trick-area .played-card{animation:none!important;translate:0 0!important}}


/* v0.15: classic wider fan hand, clear card faces, and a restrained throw animation */
.player-hand{
  display:flex!important;
  justify-content:center!important;
  align-items:flex-end!important;
  gap:0!important;
  padding:24px 14px 18px!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  min-height:164px;
  scrollbar-width:thin;
}
.player-hand .hand-card{
  flex:0 0 auto!important;
  width:clamp(64px,6.4vw,82px)!important;
  height:clamp(104px,10.7vw,132px)!important;
  margin-left:clamp(-34px,-2.8vw,-22px)!important;
  padding:6px!important;
  border-radius:9px!important;
  background:linear-gradient(145deg,#fff 0%,#fffdf7 72%,#e8e4d9 100%)!important;
  box-shadow:0 7px 15px #0005,inset 0 0 0 2px #fff,inset 0 0 0 3px #d7d1c2!important;
  transform-origin:50% 100%;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
  overflow:visible!important;
}
.player-hand .hand-card:first-of-type{margin-left:0!important}
.player-hand .hand-card:nth-of-type(1){transform:rotate(-15deg) translateY(13px);z-index:1}
.player-hand .hand-card:nth-of-type(2){transform:rotate(-12deg) translateY(8px);z-index:2}
.player-hand .hand-card:nth-of-type(3){transform:rotate(-9deg) translateY(4px);z-index:3}
.player-hand .hand-card:nth-of-type(4){transform:rotate(-6deg) translateY(1px);z-index:4}
.player-hand .hand-card:nth-of-type(5){transform:rotate(-3deg);z-index:5}
.player-hand .hand-card:nth-of-type(6){transform:rotate(-1deg);z-index:6}
.player-hand .hand-card:nth-of-type(7){transform:rotate(1deg);z-index:7}
.player-hand .hand-card:nth-of-type(8){transform:rotate(3deg);z-index:8}
.player-hand .hand-card:nth-of-type(9){transform:rotate(6deg) translateY(1px);z-index:9}
.player-hand .hand-card:nth-of-type(10){transform:rotate(9deg) translateY(4px);z-index:10}
.player-hand .hand-card:nth-of-type(11){transform:rotate(12deg) translateY(8px);z-index:11}
.player-hand .hand-card:nth-of-type(12){transform:rotate(15deg) translateY(13px);z-index:12}
.player-hand .hand-card:nth-of-type(13){transform:rotate(18deg) translateY(17px);z-index:13}
.player-hand .hand-card:hover:not(:disabled){
  transform:translateY(-18px) rotate(0deg)!important;
  z-index:30!important;
  filter:brightness(1.04);
  box-shadow:0 12px 22px #0007,inset 0 0 0 2px #fff,inset 0 0 0 3px #d7d1c2!important;
}
.player-hand .card-corner{position:absolute;display:flex;flex-direction:column;align-items:center;gap:0;line-height:.95}
.player-hand .card-corner-top{left:7px;top:7px}
.player-hand .card-corner-bottom{right:7px;bottom:7px;transform:rotate(180deg)}
.player-hand .card-corner b{font:700 clamp(15px,1.5vw,20px)/.95 Georgia,serif!important}
.player-hand .card-corner i{font:normal clamp(13px,1.3vw,17px)/1 Georgia,serif!important}
.player-hand .card-large-suit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(28px,3vw,39px)!important;line-height:1}
.player-hand .hand-card:disabled{opacity:1!important;filter:none}
.player-hand.waiting-turn .hand-card{filter:saturate(.88)}
.felt-table .trick-area .played-card{
  width:clamp(66px,6.2vw,82px)!important;
  height:clamp(94px,8.8vw,116px)!important;
  border-radius:9px!important;
  background:linear-gradient(145deg,#fff 0%,#fffdf7 72%,#e8e4d9 100%)!important;
  box-shadow:0 8px 16px #00180c66,inset 0 0 0 2px #fff,inset 0 0 0 3px #d7d1c2!important;
}
.felt-table .trick-area .played-card-center{font-size:clamp(35px,3.7vw,46px)!important}
.felt-table .trick-area .played-card-corner strong{font-family:Georgia,serif!important}
.felt-table .trick-area .played-card{animation:batakCardThrowV015 .32s cubic-bezier(.2,.8,.2,1) both!important}
@keyframes batakCardThrowV015{
  0%{opacity:.25;scale:.82;filter:blur(1px)}
  70%{opacity:1;scale:1.045;filter:none}
  100%{opacity:1;scale:1;filter:none}
}
@media(max-width:680px){
  .player-hand{justify-content:flex-start!important;padding:22px 8px 16px!important;min-height:144px}
  .player-hand .hand-card{width:clamp(58px,16vw,72px)!important;height:clamp(94px,27vw,116px)!important;margin-left:-42px!important}
  .player-hand .hand-card:first-of-type{margin-left:0!important}
  .player-hand .hand-card:nth-of-type(1){transform:rotate(-12deg) translateY(10px)}
  .player-hand .hand-card:nth-of-type(2){transform:rotate(-10deg) translateY(7px)}
  .player-hand .hand-card:nth-of-type(3){transform:rotate(-8deg) translateY(4px)}
  .player-hand .hand-card:nth-of-type(4){transform:rotate(-6deg) translateY(2px)}
  .player-hand .hand-card:nth-of-type(5){transform:rotate(-4deg)}
  .player-hand .hand-card:nth-of-type(6){transform:rotate(-2deg)}
  .player-hand .hand-card:nth-of-type(7){transform:rotate(0deg)}
  .player-hand .hand-card:nth-of-type(8){transform:rotate(2deg)}
  .player-hand .hand-card:nth-of-type(9){transform:rotate(4deg)}
  .player-hand .hand-card:nth-of-type(10){transform:rotate(6deg) translateY(2px)}
  .player-hand .hand-card:nth-of-type(11){transform:rotate(8deg) translateY(4px)}
  .player-hand .hand-card:nth-of-type(12){transform:rotate(10deg) translateY(7px)}
  .player-hand .hand-card:nth-of-type(13){transform:rotate(12deg) translateY(10px)}
  .player-hand .card-corner-top{left:5px;top:6px}
  .player-hand .card-corner-bottom{right:5px;bottom:6px}
  .player-hand .card-corner b{font-size:15px!important}
  .player-hand .card-corner i{font-size:12px!important}
  .player-hand .card-large-suit{font-size:clamp(25px,7vw,33px)!important}
  .felt-table .trick-area .played-card{width:56px!important;height:82px!important}
  .felt-table .trick-area .played-card-center{font-size:29px!important}
}
@media(prefers-reduced-motion:reduce){.player-hand .hand-card,.felt-table .trick-area .played-card{animation:none!important;transition:none!important}}


/* v0.18: wider readable hand cards and illustrated Jack/Queen/King faces */
.player-hand .hand-card{
  flex:0 0 clamp(48px,5.3vw,66px)!important;
  width:clamp(48px,5.3vw,66px)!important;
  height:clamp(92px,9.5vw,116px)!important;
  margin-left:-22px!important;
  overflow:hidden;
}
.player-hand .hand-card:first-of-type{margin-left:0!important}
.player-hand .hand-card .card-large-suit{font-size:clamp(28px,3.5vw,43px)!important}
.player-hand .hand-card .card-corner-top{left:5px;top:6px}
.player-hand .hand-card .card-corner-bottom{right:5px;bottom:6px}
.player-hand .hand-card .card-corner b{font-size:clamp(14px,1.5vw,19px)!important}
.player-hand .hand-card .card-corner i{font-size:clamp(11px,1.2vw,15px)!important}

.court-art{
  position:absolute;left:15%;right:15%;top:23%;bottom:23%;
  display:block;overflow:hidden;border:1px solid #d6bd79;border-radius:5px;
  background:
    repeating-linear-gradient(45deg,transparent 0 5px,#d7c28b66 5px 7px),
    linear-gradient(135deg,#fff7d9,#f3dfaa 45%,#fff9e9);
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #d3b66b;
  color:#193c8b!important;
}
.court-art:before,.court-art:after{
  content:"";position:absolute;left:8%;right:8%;height:42%;
  border:1px solid currentColor;border-radius:4px;
  background:repeating-linear-gradient(90deg,#f9e9b9 0 4px,#244c9b 4px 7px,#c92b3d 7px 10px);
}
.court-art:before{top:4%}
.court-art:after{bottom:4%;transform:rotate(180deg)}
.court-art .court-head{
  position:absolute;z-index:2;width:27%;height:19%;left:36.5%;top:27%;
  border-radius:45% 45% 40% 40%;background:#f0c59a;border:1px solid #593d32;
  box-shadow:inset 0 -3px #bb795f;
}
.court-art .court-body{
  position:absolute;z-index:1;left:21%;right:21%;top:42%;height:38%;
  border:1px solid #c9a44f;border-radius:45% 45% 6px 6px;
  background:repeating-linear-gradient(45deg,#173c91 0 6px,#f9e8a9 6px 10px,#b92237 10px 14px);
}
.court-art .court-crown{
  position:absolute;z-index:3;left:28%;top:18%;width:44%;height:12%;
  background:#e7b933;clip-path:polygon(0 100%,8% 0,34% 55%,50% 0,68% 55%,92% 0,100% 100%);
  border-bottom:2px solid #9a6d17;
}
.court-art .court-ornament{
  position:absolute;z-index:4;left:40%;top:50%;width:20%;height:20%;
  border:2px solid #e8c75e;border-radius:50%;background:#fff1b8;
}
.court-art.court-jack{color:#153c8d!important}
.court-art.court-queen{color:#bd1f39!important}
.court-art.court-queen .court-crown{height:10%;top:19%;clip-path:polygon(0 100%,0 35%,18% 35%,28% 0,42% 35%,58% 0,72% 35%,84% 0,100% 35%,100% 100%)}
.court-art.court-queen .court-body{background:repeating-linear-gradient(45deg,#b91e3b 0 6px,#f8e7b0 6px 10px,#23488f 10px 14px)}
.court-art.court-king{color:#173f8c!important}
.court-art.court-king .court-crown{height:14%;top:16%;clip-path:polygon(0 100%,0 40%,15% 40%,15% 0,32% 0,32% 40%,50% 40%,50% 0,68% 0,68% 40%,85% 40%,85% 0,100% 0,100% 100%)}
.court-art>b{position:absolute;z-index:5;right:2px;bottom:1px;font:bold 9px Georgia,serif;color:currentColor;background:#fff9e8;border:1px solid #d6bd79;border-radius:2px;padding:0 2px}
.played-court-art{left:19%;right:19%;top:19%;bottom:19%}
.trick-area .played-court-art{position:absolute}
.trick-area .played-court-art>b{font-size:11px}
@media(max-width:680px){
 .player-hand .hand-card{flex-basis:52px!important;width:52px!important;height:clamp(90px,27vw,112px)!important;margin-left:-25px!important}
 .player-hand .hand-card:first-of-type{margin-left:0!important}
 .player-hand .hand-card .card-large-suit{font-size:30px!important}
 .player-hand .hand-card .card-corner b{font-size:14px!important}
 .player-hand .hand-card .card-corner i{font-size:11px!important}
 .court-art{left:13%;right:13%;top:24%;bottom:24%}
 .court-art .court-head{height:17%}
 .court-art .court-body{top:41%;height:38%}
 .felt-table .trick-area .played-card{width:58px!important;height:82px!important}
}


/* v0.19: use the real SVG-cards 2.0 deck faces, rendered at high resolution */
.real-card-face{display:block;width:100%;height:100%;object-fit:fill;border:0;border-radius:6px;user-select:none;-webkit-user-drag:none}
.player-hand{gap:0;overflow-x:auto;overflow-y:visible;padding:22px 24px 20px;scrollbar-width:thin}
.player-hand .hand-card{flex:0 0 auto;width:clamp(54px,6vw,76px);height:clamp(76px,9.6vw,108px);padding:0;margin-left:-26px;border:0;border-radius:6px;background:transparent;box-shadow:none;overflow:visible;position:relative}
.player-hand .hand-card:first-child{margin-left:0}
.player-hand .hand-card .real-card-face{border-radius:6px;filter:drop-shadow(0 3px 3px #0004)}
.player-hand .hand-card:disabled{opacity:.78}
.player-hand .hand-card.card-disabled:not(:disabled){opacity:.55}
.player-hand .hand-card:hover:not(:disabled){z-index:40;border:0;box-shadow:none}
.trick-area .played-card{width:clamp(64px,7vw,84px);height:clamp(90px,10vw,119px);padding:0;border:0;border-radius:7px;background:transparent;overflow:visible;box-shadow:0 5px 11px #0005}
.trick-area .played-card .real-card-face{border-radius:7px;filter:drop-shadow(0 3px 4px #0005)}
.back-cards img{display:block;width:14px;height:20px;object-fit:fill;border:0;border-radius:2px}
@media(max-width:680px){
 .player-hand{padding:24px 14px 18px;justify-content:flex-start}
 .player-hand .hand-card{width:clamp(50px,13.5vw,62px);height:clamp(71px,19vw,88px);margin-left:-25px}
 .player-hand .hand-card:first-child{margin-left:0}
 .trick-area .played-card{width:clamp(52px,14vw,66px);height:clamp(74px,19vw,94px)}
}

/* v0.21: keep all cards readable in the player's hand; reduce the heavy fan overlap */
.player-hand{gap:0!important;overflow-x:auto!important;overflow-y:visible!important;padding:24px 14px 24px!important;align-items:flex-end!important}
.player-hand .hand-card{width:clamp(58px,5.7vw,72px)!important;height:clamp(84px,8.8vw,104px)!important;margin-left:-18px!important;flex:0 0 auto!important;overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}
.player-hand .hand-card:first-child{margin-left:0!important}
.player-hand .hand-card .real-card-face{display:block!important;width:100%!important;height:100%!important;padding:0!important;object-fit:contain!important;border:0!important;border-radius:6px!important;filter:drop-shadow(0 2px 2px #0005)!important}
.player-hand .hand-card:nth-of-type(1){transform:rotate(-8deg) translateY(6px)!important}
.player-hand .hand-card:nth-of-type(2){transform:rotate(-7deg) translateY(4px)!important}
.player-hand .hand-card:nth-of-type(3){transform:rotate(-6deg) translateY(3px)!important}
.player-hand .hand-card:nth-of-type(4){transform:rotate(-5deg) translateY(2px)!important}
.player-hand .hand-card:nth-of-type(5){transform:rotate(-4deg) translateY(1px)!important}
.player-hand .hand-card:nth-of-type(6){transform:rotate(-2deg)!important}
.player-hand .hand-card:nth-of-type(7){transform:rotate(0deg)!important}
.player-hand .hand-card:nth-of-type(8){transform:rotate(2deg)!important}
.player-hand .hand-card:nth-of-type(9){transform:rotate(4deg) translateY(1px)!important}
.player-hand .hand-card:nth-of-type(10){transform:rotate(5deg) translateY(2px)!important}
.player-hand .hand-card:nth-of-type(11){transform:rotate(6deg) translateY(3px)!important}
.player-hand .hand-card:nth-of-type(12){transform:rotate(7deg) translateY(4px)!important}
.player-hand .hand-card:nth-of-type(13){transform:rotate(8deg) translateY(6px)!important}
.player-hand .hand-card:hover:not(:disabled){z-index:50!important;transform:translateY(-14px) rotate(0deg)!important}
@media(max-width:680px){
 .player-hand{padding:20px 10px 22px!important}
 .player-hand .hand-card{width:clamp(48px,12vw,58px)!important;height:clamp(70px,18vw,84px)!important;margin-left:-20px!important}
 .player-hand .hand-card:first-child{margin-left:0!important}
}