*,::after,::before{box-sizing:border-box;margin:0;padding:0}:root{--green:#2d6a4f;--green-dark:#1b4332;--green-light:#40916c;--felt:#1e5631;--gold:#f4a261;--gold-dark:#e76f51;--cream:#fefae0;--text-light:#fefae0;--text-dark:#1a1a2e;--card-bg:#ffffff;--card-border:#cccccc;--shadow:0 4px 16px rgba(0,0,0,0.35);--radius:8px;--red:#d62828;--trump-color:#f4d35e}body,html{height:100%;font-family:'Segoe UI',system-ui,sans-serif;background:var(--green-dark);color:var(--text-light);overflow:hidden}.screen{display:none;height:100vh;height:100dvh;width:100vw;position:fixed;inset:0}.screen.active{display:flex}#screen-start{align-items:center;justify-content:center;background:radial-gradient(ellipse at center,var(--green) 0,var(--green-dark) 80%)}.start-content{display:grid;gap:1rem;width:min(94vw,560px);max-height:94vh;max-height:94dvh;overflow-y:auto}.start-card{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:2rem 4rem;text-align:center;display:flex;flex-direction:column;gap:1.2rem;backdrop-filter:blur(6px);box-shadow:var(--shadow)}.ad-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:.65rem;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(0,0,0,.35);box-shadow:var(--shadow)}.ad-label{margin-bottom:.35rem;color:rgba(254,250,224,.6);font-size:.68rem;letter-spacing:.12em;text-align:center;text-transform:uppercase}.ad-card .adsbygoogle{min-height:250px;border-radius:8px;background:rgba(254,250,224,.08)}.start-card h1{font-size:3rem;font-weight:800;letter-spacing:2px;color:var(--trump-color);text-shadow:0 2px 8px rgba(0,0,0,.5)}.tagline{font-size:1.1rem;opacity:.8}.start-btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}#screen-rules{flex-direction:column;align-items:center;justify-content:flex-start;background:var(--green-dark);overflow-y:auto;padding:2rem 1rem}.rules-container{max-width:680px;width:100%;background:rgba(0,0,0,.35);border-radius:12px;padding:2rem;box-shadow:var(--shadow)}.rules-container h2{font-size:1.8rem;color:var(--trump-color);margin-bottom:1.5rem;text-align:center}.rules-close{position:fixed;top:.8rem;right:.9rem;z-index:5;width:2.2rem;height:2.2rem;padding:0;border-radius:50%;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center}.rules-content h3{font-size:1.1rem;color:var(--gold);margin-top:1.2rem;margin-bottom:.4rem}.rules-content li,.rules-content ol,.rules-content p{font-size:.95rem;line-height:1.6;opacity:.92}.rules-content ol{padding-left:1.4rem}.rules-table{width:100%;border-collapse:collapse;margin:.6rem 0;font-size:.9rem}.rules-table td,.rules-table th{border:1px solid rgba(255,255,255,.2);padding:.4rem .7rem;text-align:left}.rules-table th{background:rgba(255,255,255,.1);color:var(--gold)}.btn{cursor:pointer;border:none;border-radius:var(--radius);padding:.6rem 1.4rem;font-size:.95rem;font-weight:600;transition:transform .1s,filter .1s}.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}a.btn{text-decoration:none}.btn:active{transform:translateY(0);filter:brightness(.95)}.btn-primary{background:var(--gold);color:var(--text-dark)}.btn-secondary{background:rgba(255,255,255,.15);color:var(--text-light);border:1px solid rgba(255,255,255,.3)}.btn-danger{background:var(--red);color:#fff}.btn-hint{background:0 0;border:1px solid rgba(244,162,97,.45);color:var(--gold);font-size:.82rem;opacity:.85}.btn-hint:hover{background:rgba(244,162,97,.15);opacity:1}.btn-lg{padding:.85rem 2.2rem;font-size:1.1rem}.btn-sm{padding:.35rem .9rem;font-size:.85rem}.btn-disabled,.btn:disabled{opacity:.45;cursor:not-allowed}.btn-disabled:hover,.btn:disabled:hover{filter:none;transform:none}#screen-game{flex-direction:column;background:var(--felt);height:100vh;height:100dvh;overflow:hidden}.score-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.4);padding:.5rem 1.5rem;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.1)}.score-team{display:flex;flex-direction:column;align-items:center;min-width:72px}.score-team .team-score.low-man{color:#8ce99a}.score-team .team-score.high-man{color:var(--red)}.team-label{font-size:.75rem;opacity:.7;text-transform:uppercase;letter-spacing:1px}.team-score{font-size:2rem;font-weight:800;color:var(--trump-color);line-height:1}.trump-display{font-size:1.1rem;font-weight:700;color:var(--trump-color);letter-spacing:1px;text-align:center}.game-body{flex:1;display:flex;flex-direction:row;overflow:hidden}.table{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:.5rem;overflow:hidden}.player-area{display:flex;flex-direction:column;align-items:center;gap:4px}.player-label{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;opacity:.75;background:rgba(0,0,0,.3);padding:2px 10px;border-radius:10px;white-space:nowrap}.play-indicator{font-size:.75rem;color:var(--trump-color);height:1.1em;font-style:italic}.middle-row{display:flex;align-items:center;justify-content:space-between;width:100%;flex:1;max-height:260px;gap:.5rem;padding:0 .5rem}.player-left,.player-right{flex-direction:column;align-items:center;width:90px}.hand{display:flex;align-items:center;justify-content:center}.hand-bottom{min-height:112px}.hand-top{min-height:90px}.hand-bottom,.hand-top{flex-direction:row;flex-wrap:nowrap;gap:-8px}.hand-left,.hand-right{min-width:64px;flex-direction:column;gap:-8px}.card{width:80px;height:112px;border-radius:6px;position:relative;box-shadow:1px 1px 4px rgba(0,0,0,.3);user-select:none;transition:transform .15s,box-shadow .15s;flex-shrink:0;overflow:hidden;background:#fff}.card playing-card{position:absolute;top:0;left:0;right:0;bottom:0}.card playing-card img{width:100%;height:100%;display:block;-webkit-user-drag:none}.card.playable,.card.selectable{cursor:pointer}.card.illegal{cursor:not-allowed}.card.received-card{box-shadow:inset 0 3px 0 var(--gold),1px 1px 4px rgba(0,0,0,.3)}.play-indicator.warn-hint{color:var(--red);font-weight:700;font-style:normal;font-size:.95rem}.card.danger-card::after{content:'13';position:absolute;top:2px;right:3px;font-size:.55rem;font-weight:800;color:var(--red);z-index:1}.hand-bottom .card+.card{margin-left:-40px}.hand-top .card+.card{margin-left:-38px}.hand-left .card,.hand-right .card,.hand-top .card{width:56px;height:78px}.hand-left .card+.card,.hand-right .card+.card{margin-top:-67px}.play-area{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.played-row{display:flex;align-items:center;gap:8px}.played-card-slot{width:84px;height:116px;border:1px dashed rgba(255,255,255,.2);border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative}.played-card-slot .card{width:80px;height:112px;cursor:default}.played-card-slot .card.selectable{cursor:pointer}.played-pads{display:flex;align-items:center;justify-content:center;gap:6px;position:relative}.played-card-slot .card.staged{transform:translate(-10px,20px);box-shadow:0 20px 32px rgba(0,0,0,.6);z-index:5}.pad-arrow{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;font-size:1.05rem;font-weight:700;color:rgba(254,250,224,.35);text-shadow:0 1px 3px rgba(0,0,0,.7);cursor:default;user-select:none;transition:transform .12s,color .12s}.pad-arrow.armed{color:var(--gold);cursor:pointer;background:rgba(0,0,0,.55);border:1px solid rgba(244,162,97,.6);box-shadow:0 3px 10px rgba(0,0,0,.5)}.pad-arrow.armed:hover{transform:translateX(-50%) scale(1.3);background:rgba(244,162,97,.3)}.pad-arrow.play-arrow{left:auto;right:-22px;top:10px;bottom:auto;transform:none;font-size:2.1rem}.pad-arrow.play-arrow.armed:hover{transform:scale(1.25)}.pad-arrow.pass-arrow{bottom:auto;top:-20px;font-size:2.3rem;z-index:6;animation:.18s ease-out arrow-pop}.pad-arrow.pass-arrow.armed:hover{transform:translateX(-50%) scale(1.2)}@keyframes arrow-pop{from{transform:translateX(-50%) scale(.4);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}.played-card-slot .card.dropped{animation:.35s ease-out card-drop}@keyframes card-drop{0%{transform:translate(-10px,20px)}60%{transform:translateY(-2px)}100%{transform:translateY(0)}}.played-pads.drop-armed .played-card-slot{border-color:var(--gold)}.played-pads.drop-hover .played-card-slot{border:1px solid var(--gold);background:rgba(244,162,97,.15);box-shadow:0 0 14px rgba(244,162,97,.45)}.trick-count .pts-line{font-size:.72rem;font-weight:600;opacity:.85}.trick-count{font-size:.95rem;font-weight:700;color:var(--trump-color);opacity:1;text-align:center;width:148px;line-height:1.5;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:4px 8px;text-shadow:0 1px 3px rgba(0,0,0,.6)}.winner-btn{display:block;margin:0 auto;border:none;background:var(--gold);color:var(--text-dark);font-family:inherit;font-size:.95rem;font-weight:800;padding:.4rem .9rem;min-width:64px;text-align:center;cursor:pointer}.winner-btn:hover{filter:brightness(1.1)}.winner-btn[data-dir=left]{clip-path:polygon(0 50%,35% 0,35% 20%,100% 20%,100% 80%,35% 80%,35% 100%);padding-left:38%}.winner-btn[data-dir=right]{clip-path:polygon(100% 50%,65% 0,65% 20%,0 20%,0 80%,65% 80%,65% 100%);padding-right:38%}.winner-btn[data-dir=bottom],.winner-btn[data-dir=top]{width:56px;height:60px;font-size:.85rem}.winner-btn[data-dir=top]{clip-path:polygon(50% 0,100% 40%,75% 40%,75% 100%,25% 100%,25% 40%,0 40%);padding-top:22px}.winner-btn[data-dir=bottom]{clip-path:polygon(50% 100%,0 60%,25% 60%,25% 0,75% 0,75% 60%,100% 60%);padding-bottom:22px}.action-panel{background:rgba(0,0,0,.4);border-left:1px solid rgba(255,255,255,.1);padding:.75rem 1rem;display:flex;flex-direction:column;justify-content:space-between;gap:.75rem;width:210px;flex-shrink:0;overflow:hidden}.message-text{font-size:.9rem;flex:1;opacity:.95;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem;padding-right:.6rem}.message-text p{margin:0;line-height:1.4}.message-text p:last-child{font-weight:600;opacity:1}.message-text p:not(:last-child){opacity:.6}.message-text p.msg-new{animation:1s ease-out msg-flash;border-radius:4px;padding:0 4px;margin:0 -4px}@keyframes msg-flash{0%{color:var(--trump-color);background:rgba(244,212,94,.28);opacity:1}55%{color:var(--trump-color);background:rgba(244,212,94,.15)}100%{color:var(--text-light);background:0 0}}.action-buttons{display:flex;flex-direction:column;gap:.5rem}.action-buttons .btn{width:100%}.hint-sep{border:none;border-top:1px solid rgba(255,255,255,.12);margin:.15rem 0}.advice-content{text-align:left;line-height:1.7;font-size:.92rem}.recap-list{margin:.5rem 0 0;padding-left:1.2rem}.recap-list li{margin-bottom:.3rem}.game-log{text-align:left;font-size:.85rem;line-height:1.5}.game-log p{margin:0 0 .15rem}.game-log-entry{display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;padding:.2rem 0;border-bottom:1px solid rgba(255,255,255,.06)}.game-log-divider{display:block;text-align:center;font-weight:700;color:var(--trump-color);border-top:1px solid rgba(255,255,255,.2);border-bottom:none;margin-top:.6rem;padding-top:.4rem}.game-log-divider:first-child{border-top:none;margin-top:0;padding-top:0}.game-log-hand{font-size:.72rem;font-weight:600;line-height:1.6}.mini-card{display:inline-block;background:var(--card-bg);border-radius:3px;padding:0 .24em;font-weight:700;font-size:.95em;line-height:1.4;box-shadow:0 1px 2px rgba(0,0,0,.4)}.mini-card .pip{font-size:1.25em;line-height:1}.mini-card.red{color:var(--red)}.mini-card.black{color:var(--text-dark)}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:100}.modal-overlay.hidden{display:none}.modal{position:relative;background:#1b3a2f;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:2rem;max-width:400px;width:90%;max-height:85vh;max-height:85dvh;box-shadow:var(--shadow);text-align:center;display:flex;flex-direction:column}.modal-corner{position:absolute;top:.75rem;right:1rem;font-size:.82rem;opacity:.65}.modal-title{font-size:1.4rem;font-weight:700;color:var(--trump-color);margin-bottom:.8rem;flex-shrink:0}.modal-body{font-size:.95rem;line-height:1.6;margin-bottom:1.4rem;opacity:.9;overflow-y:auto;flex-shrink:1;min-height:0;padding-right:.8rem;margin-right:-.8rem}.modal>.ad-card{margin-top:1.2rem;flex-shrink:0}.modal-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;flex-shrink:0}.modal-actions .btn-right{margin-left:auto}.suit-spades .card-suit::before{content:'♠'}.suit-hearts .card-suit::before{content:'♥'}.suit-diamonds .card-suit::before{content:'♦'}.suit-clubs .card-suit::before{content:'♣'}@media (max-width:640px){.game-body{flex-direction:column}.action-panel{width:100%;border-left:none;border-top:1px solid rgba(255,255,255,.1);padding:.4rem .6rem;padding-bottom:max(.4rem,env(safe-area-inset-bottom));gap:.35rem;justify-content:flex-end;max-height:32%;flex-shrink:0}.message-text{flex:0 1 auto;min-height:0;max-height:3.2em;font-size:.78rem;padding-right:.3rem}.action-buttons{flex-direction:row;flex-wrap:wrap;gap:.35rem}.action-buttons .btn{width:auto;flex:1 1 auto}.action-buttons .hint-sep{flex-basis:100%;margin:0}}@media (max-width:640px),(max-height:600px){.score-bar{padding:.3rem .8rem}.score-team{min-width:64px}.team-score{font-size:1.3rem}.trump-display{font-size:.85rem}.table{padding:.25rem}.player-area{gap:2px}.player-label{font-size:.62rem;padding:1px 8px}.play-indicator{font-size:.68rem;height:1em}.card{width:52px;height:72px}.hand-left .card,.hand-right .card,.hand-top .card{width:40px;height:56px}.hand-bottom .card+.card,.hand-top .card+.card{margin-left:-28px}.hand-left .card+.card,.hand-right .card+.card{margin-top:-48px}.hand-bottom{min-height:72px}.hand-top{min-height:56px}.hand-left,.hand-right{min-width:44px}.player-left,.player-right{width:50px}.middle-row{max-height:none;min-height:0;padding:0 .2rem;gap:.25rem}.play-area{min-height:0}.play-area>.played-card-slot,.play-area>.played-pads{margin:-6px 0}.played-card-slot{width:52px;height:72px;min-height:0}.played-card-slot .card{width:48px;height:66px}.played-card-slot .card.staged{transform:translate(-7px,14px)}.pad-arrow{padding:10px}.pad-arrow.pass-arrow{font-size:1.8rem;bottom:auto;top:-20px}.pad-arrow.play-arrow{font-size:1.6rem;right:-22px;top:-2px}.trick-count{font-size:.75rem;width:120px;padding:2px 5px}.trick-count .pts-line{font-size:.62rem}.winner-btn{font-size:.8rem;min-width:52px}.winner-btn[data-dir=bottom],.winner-btn[data-dir=top]{width:44px;height:48px;font-size:.72rem}.winner-btn[data-dir=top]{padding-top:17px}.winner-btn[data-dir=bottom]{padding-bottom:17px}}.hidden{display:none!important}.card.tut-target{overflow:visible;outline:3px solid var(--trump-color);outline-offset:-3px;animation:1.4s ease-in-out infinite tut-card-pulse}.card.tut-target playing-card img{border-radius:6px}.card.tut-target::before{content:'👇';position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);font-size:1.15rem;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));animation:.9s ease-in-out infinite tut-pointer-bob;pointer-events:none;z-index:6}.hand-bottom .card.tut-target::before{left:25%}.hand-bottom .card.tut-target:last-child::before{left:50%}@keyframes tut-pointer-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(4px)}}.btn.tut-flash,.pad-arrow.tut-flash{animation:1.2s ease-in-out infinite tut-btn-flash}@keyframes tut-btn-flash{0%,100%{box-shadow:0 0 2px 0 rgba(244,211,94,0)}50%{box-shadow:0 0 14px 5px rgba(244,211,94,.75)}}@keyframes tut-card-pulse{0%,100%{box-shadow:0 0 2px 0 rgba(244,211,94,.7)}50%{box-shadow:0 0 16px 5px rgba(244,211,94,.6)}}