/* TAMGA Rules Tutorial v104.8 - mobile optimized with real card/avatar images */
.rules-page .seo-hero{min-height:auto;grid-template-columns:minmax(0,.95fr) minmax(300px,.82fr);padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(10px,2vw,20px)}
.rules-page .seo-hero h1{font-size:clamp(2.3rem,5vw,4.8rem)}.rules-page .seo-hero-art{transform:scale(.92);transform-origin:center}.rules-page .rules-tutorial-section{margin-top:clamp(8px,1.8vw,18px)}
.rules-tutorial-shell{position:relative;overflow:hidden;isolation:isolate}.rules-tutorial-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,390px);gap:18px;margin-bottom:20px}.rules-tutorial-kicker{color:#67e8f9;text-transform:uppercase;letter-spacing:.14em;font-weight:900;font-size:.78rem}.rules-tutorial-title{margin:4px 0 8px;color:#f7e7bf;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.75rem,3.2vw,2.8rem)}.rules-tutorial-lead{max-width:760px;margin:0;color:#cbd5e1;line-height:1.7}.rules-tutorial-steptext{border:1px solid rgba(216,180,106,.28);border-radius:22px;padding:16px;background:rgba(2,6,23,.52)}.rules-tutorial-steptext strong{display:block;color:#fff7d6;margin-bottom:6px}.rules-tutorial-steptext p{margin:0;color:rgba(203,213,225,.9);line-height:1.6}
.rules-tutorial-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}.tamga-demo-table{position:relative;min-height:520px;border:1px solid rgba(216,180,106,.30);border-radius:34px;background:radial-gradient(ellipse at center,rgba(12,74,110,.70),rgba(6,15,32,.92) 68%);box-shadow:0 30px 80px rgba(0,0,0,.46);overflow:hidden}.tamga-demo-table.has-table-image{background-image:linear-gradient(180deg,rgba(2,6,23,.04),rgba(2,6,23,.22)),var(--rules-table-image);background-size:cover;background-position:center;background-repeat:no-repeat}.tamga-demo-table::before{content:"";position:absolute;inset:15%;border-radius:999px;border:1px solid rgba(216,180,106,.18)}.tamga-demo-table.has-table-image::before{opacity:.05}
.demo-player{position:absolute;z-index:3;display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;align-items:center;min-width:168px;padding:10px 12px;border-radius:22px;border:1px solid rgba(148,163,184,.20);background:rgba(2,6,23,.70);backdrop-filter:blur(10px);box-shadow:0 18px 42px rgba(0,0,0,.35)}.demo-player.top{top:18px;left:50%;transform:translateX(-50%)}.demo-player.left{left:18px;top:50%;transform:translateY(-50%)}.demo-player.right{right:18px;top:50%;transform:translateY(-50%)}.demo-player.self{left:50%;bottom:18px;transform:translateX(-50%);border-color:rgba(216,180,106,.50)}
.demo-avatar{width:54px;height:54px;border-radius:18px;overflow:hidden;border:1px solid rgba(216,180,106,.38);background:rgba(15,23,42,.82)}.demo-avatar img{width:100%;height:100%;object-fit:cover;display:block}.demo-name{display:block;color:#f8fafc;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-role{display:block;margin-top:2px;color:rgba(203,213,225,.70);font-size:.78rem;text-transform:uppercase}.demo-bid{display:inline-flex;margin-top:6px;padding:4px 8px;border-radius:999px;background:rgba(216,180,106,.14);color:#fde68a;font-size:.76rem;font-weight:900}
.demo-trump{position:absolute;z-index:3;top:16px;right:18px;display:grid;gap:6px;place-items:center;width:92px;padding:10px;border-radius:20px;background:rgba(2,6,23,.70);border:1px solid rgba(216,180,106,.34);opacity:.35;transform:translateY(-8px);transition:.35s}.demo-trump-card{width:48px;height:68px;border-radius:11px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.30)}.demo-trump-card img,.demo-card img,.demo-hand-card img{width:100%;height:100%;object-fit:cover;display:block}.demo-trump span{color:#fde68a;font-size:.75rem;font-weight:900}
.demo-center{position:absolute;z-index:2;inset:28%;display:grid;place-items:center}.demo-trick-zone{position:relative;width:min(270px,44vw);height:min(230px,42vw)}.demo-card{position:absolute;width:74px;height:104px;border-radius:14px;overflow:hidden;border:1px solid rgba(216,180,106,.65);box-shadow:0 16px 32px rgba(0,0,0,.38);transform:translate(-50%,-50%) scale(.86);opacity:.35;transition:.45s}.demo-card.self{left:50%;top:74%}.demo-card.left{left:22%;top:50%}.demo-card.top{left:50%;top:23%}.demo-card.right{left:78%;top:50%}
.demo-hand{position:absolute;z-index:3;left:50%;bottom:96px;transform:translateX(-50%);display:flex;justify-content:center;width:min(320px,70%);height:122px;pointer-events:none}.demo-hand-card{width:62px;height:92px;margin-left:-18px;border-radius:13px;overflow:hidden;border:1px solid rgba(216,180,106,.50);box-shadow:0 12px 24px rgba(0,0,0,.28);transform-origin:50% 110%;opacity:.78}.demo-hand-card:nth-child(1){transform:rotate(-18deg) translateY(12px)}.demo-hand-card:nth-child(2){transform:rotate(-7deg) translateY(2px)}.demo-hand-card:nth-child(3){transform:rotate(6deg)}.demo-hand-card:nth-child(4){transform:rotate(17deg) translateY(12px)}.demo-score{position:absolute;z-index:3;left:18px;bottom:18px;display:flex;gap:8px;flex-wrap:wrap}.demo-score span{border-radius:999px;border:1px solid rgba(148,163,184,.20);background:rgba(2,6,23,.62);color:#f8fafc;padding:8px 10px;font-weight:850;font-size:.8rem}
.rules-step-panel{border:1px solid rgba(216,180,106,.28);border-radius:28px;background:rgba(2,6,23,.58);padding:16px}.rules-step-buttons{display:grid;gap:10px}.rules-step-button{width:100%;text-align:left;border:1px solid rgba(148,163,184,.20);border-radius:18px;background:rgba(15,23,42,.68);color:#e2e8f0;padding:12px 14px;cursor:pointer;font-weight:900}.rules-step-button.active,.rules-step-button:hover{border-color:rgba(216,180,106,.62);background:rgba(30,64,175,.52);color:#fff7d6}.rules-step-button small{display:block;margin-top:3px;color:rgba(203,213,225,.68)}.rules-step-controls{display:flex;gap:10px;margin-top:14px}.rules-step-controls button{flex:1;border-radius:999px;border:1px solid rgba(216,180,106,.32);background:rgba(216,180,106,.12);color:#fff7d6;padding:10px 12px;font-weight:950;cursor:pointer}
.rules-tutorial-shell[data-step="0"] .demo-hand-card{opacity:1}.rules-tutorial-shell[data-step="1"] .demo-trump{opacity:1;transform:translateY(0)}.rules-tutorial-shell[data-step="2"] .demo-bid{box-shadow:0 0 20px rgba(216,180,106,.35)}.rules-tutorial-shell[data-step="3"] .demo-card{opacity:1;filter:brightness(1.04)}.rules-tutorial-shell[data-step="3"] .demo-card.self{transform:translate(-50%,-50%) rotate(-8deg) scale(1.02)}.rules-tutorial-shell[data-step="3"] .demo-card.left{transform:translate(-50%,-50%) rotate(7deg) scale(.96)}.rules-tutorial-shell[data-step="3"] .demo-card.top{transform:translate(-50%,-50%) rotate(4deg) scale(.96)}.rules-tutorial-shell[data-step="3"] .demo-card.right{transform:translate(-50%,-50%) rotate(-5deg) scale(.96)}.rules-tutorial-shell[data-step="4"] .demo-card.self{opacity:1;transform:translate(-50%,-68%) rotate(-8deg) scale(1.12);box-shadow:0 0 34px rgba(216,180,106,.42)}.rules-tutorial-shell[data-step="4"] .demo-score span:last-child{border-color:rgba(134,239,172,.58);color:#bbf7d0;background:rgba(22,101,52,.24)}
@media(max-width:980px){.rules-page .seo-hero,.rules-tutorial-head,.rules-tutorial-layout{grid-template-columns:1fr}.rules-page .seo-hero-art{transform:none}.tamga-demo-table{min-height:620px}.rules-step-panel{order:-1}.rules-step-buttons{grid-template-columns:repeat(5,minmax(160px,1fr));overflow-x:auto;padding-bottom:4px}.rules-step-button small{display:none}}
@media(max-width:640px){.rules-page .seo-hero{padding-top:22px;padding-bottom:8px}.rules-page .seo-hero h1{font-size:clamp(2rem,14vw,3.4rem)}.rules-tutorial-head{gap:12px;margin-bottom:14px}.rules-tutorial-steptext{padding:12px;border-radius:18px}.rules-tutorial-layout{gap:12px}.tamga-demo-table{min-height:640px;border-radius:24px;background-position:center;background-size:cover}.demo-player{width:132px;min-width:0;grid-template-columns:40px minmax(0,1fr);gap:7px;padding:7px 8px;border-radius:17px}.demo-avatar{width:40px;height:40px;border-radius:13px}.demo-name{font-size:.86rem}.demo-role{display:none}.demo-bid{font-size:.68rem;margin-top:3px;padding:3px 6px}.demo-player.top{top:10px}.demo-player.left{left:7px;top:35%}.demo-player.right{right:7px;top:35%}.demo-player.self{bottom:8px;width:142px}.demo-trump{top:76px;right:8px;width:66px;padding:7px;border-radius:16px}.demo-trump-card{width:38px;height:54px}.demo-trump span{font-size:.66rem}.demo-center{inset:24% 8% 25%}.demo-trick-zone{width:210px;height:190px}.demo-card{width:52px;height:74px;border-radius:10px}.demo-hand{bottom:76px;width:220px;height:92px}.demo-hand-card{width:46px;height:68px;margin-left:-13px;border-radius:10px}.demo-score{left:8px;right:8px;bottom:58px;justify-content:center;gap:5px}.demo-score span{font-size:.68rem;padding:6px 7px}.rules-step-panel{padding:12px;border-radius:20px}.rules-step-buttons{grid-template-columns:repeat(5,minmax(126px,1fr));gap:7px}.rules-step-button{padding:9px 10px;border-radius:14px;font-size:.82rem}.rules-step-controls{margin-top:10px}.rules-step-controls button{padding:9px 10px}}
@media(max-width:390px){.tamga-demo-table{min-height:610px}.demo-player{width:118px;grid-template-columns:34px minmax(0,1fr)}.demo-avatar{width:34px;height:34px}.demo-player.self{width:128px}.demo-center{inset:25% 4% 26%}.demo-trick-zone{width:190px;height:174px}.demo-card{width:48px;height:68px}.demo-hand{bottom:72px;width:200px}.demo-hand-card{width:42px;height:62px}.demo-score span{font-size:.62rem;padding:5px 6px}}