/* TETRIS: okolí hry má grafiku našeho webu (tečkovaný papír, bílé karty, černá a zlatá, písmo Figtree).
   Uvnitř hry (hrací plocha, odložený a další dílek, nápisy nad plochou) zůstává tmavý neonový styl. */
body.atelier #tetrisArea{position:relative;box-sizing:border-box;min-height:calc(100vh - 6px);min-height:calc(100dvh - 6px);margin:0 -24px;padding:20px 34px 12px;color:var(--ink);
 background-color:#FBFAF6;background-image:radial-gradient(circle,#D5D1C4 1.2px,transparent 1.6px),radial-gradient(900px 460px at 14% 0,#FFFFFF 0,#FFFFFF00 72%);background-size:28px 28px,auto;background-position:14px 14px,0 0;background-repeat:repeat,no-repeat}
.ttApp{position:relative;max-width:1700px;margin:0 auto}
.ttBar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.ttBrand{display:flex;align-items:baseline;gap:12px}
.ttBrand h1{margin:0;position:relative;font-size:30px;font-weight:300;letter-spacing:.26em;color:var(--ink)}
.ttBrand h1::after{content:"";position:absolute;left:0;bottom:-6px;width:42px;height:3px;border-radius:2px;background:var(--gold)}
.ttMode{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold-soft);border-radius:999px;padding:4px 12px;font-weight:600}
.ttBarBtns{display:flex;gap:8px;flex-wrap:wrap}
.ttGhostBtn{min-height:38px;padding:7px 16px;font-size:13px;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px}
.ttGhostBtn:hover{background:#fff;border-color:var(--ink)}
.ttLayout{display:grid;grid-template-columns:var(--sideL,120px) var(--bw,320px) var(--sideR,250px);gap:24px;justify-content:center;align-items:start}
.ttCol{display:grid;gap:12px}
.ttPanel{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--shadow-1)}
.ttLab{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-bottom:6px}
.ttPanel canvas{display:block;width:calc(var(--side,160px) - 30px);height:auto;margin:0 auto}
/* odložený a další dílek patří ke hře: tmavé okénko */
.ttNextBox{background:linear-gradient(180deg,#0b1236,#050816);border-color:#1E1E1C;color:#E6ECFF}
.ttNextBox .ttLab{color:#8FA6E8}
.ttStats{display:grid;gap:10px}
.ttStat span{display:block;font-size:clamp(10px,calc(var(--sideL,120px)*.1),13px);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ttStat b{display:block;font-size:clamp(20px,calc(var(--sideL,120px)*.2),30px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.ttBadges{display:grid;gap:8px}
.ttBadge{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.06em;text-align:center;color:var(--gold);background:var(--ink)}
.ttBadge#ttCombo{color:var(--gold-ink);background:var(--gold-soft)}
.ttBadge[hidden]{display:none}
/* hrací plocha: neonový vnitřek, rámeček v barvě webu */
.ttBoardBox{position:relative;width:var(--bw,min(320px,calc((100dvh - 150px)/2)));margin:0 auto;border-radius:16px;overflow:hidden;border:5px solid var(--ink);box-shadow:0 2px 6px #1E1E1C26,0 26px 44px -18px #1E1E1C66}
#ttBoard{display:block;width:100%;height:auto;aspect-ratio:1/2;touch-action:none}
.ttBanners{position:absolute;left:0;right:0;top:20%;display:grid;gap:6px;justify-items:center;pointer-events:none}
.ttBanner{font-weight:800;letter-spacing:.08em;font-size:clamp(24px,calc(var(--bw,320px)*.075),46px);color:#fff;text-shadow:0 0 16px #00E5FF,0 0 4px #00E5FF;animation:ttPop 1.4s ease-out forwards;white-space:nowrap}
.ttBanner.big{font-size:clamp(32px,calc(var(--bw,320px)*.1),62px);color:#FFE600;text-shadow:0 0 20px #FF9F1C,0 0 6px #FFE600}
.ttBanner.spin{color:#E3C2FF;text-shadow:0 0 18px #B04CFF,0 0 5px #B04CFF}
.ttBanner.sub{font-size:14px;letter-spacing:.16em;color:#CFE0FF;text-shadow:0 0 8px #5B7CFF}
@keyframes ttPop{0%{opacity:0;transform:scale(.6) translateY(10px)}12%{opacity:1;transform:scale(1.12)}22%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
.ttCalm .ttBanner{animation:ttFade .9s ease-out forwards}
@keyframes ttFade{0%{opacity:0}15%{opacity:1}80%{opacity:1}100%{opacity:0}}
.ttOverlay{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;background:rgba(3,6,20,.8);backdrop-filter:blur(3px);color:#E6ECFF}
.ttOverlay[hidden]{display:none}
.ttOverBox h2{margin:0 0 10px;font-size:clamp(28px,calc(var(--bw,320px)*.085),48px);font-weight:800;letter-spacing:.1em;color:#fff}
.ttStart .ttOverBox h2{font-size:clamp(40px,calc(var(--bw,320px)*.12),68px);letter-spacing:.24em;background:linear-gradient(90deg,#00E5FF,#B04CFF 55%,#FF3B5C);-webkit-background-clip:text;background-clip:text;color:transparent}
.ttRecord .ttOverBox h2{color:#FFE600;text-shadow:0 0 22px #FF9F1C}
.ttOver .ttOverBox h2{color:#FF6B86}
.ttOverText{margin:0 0 16px;font-size:14px;line-height:1.55;color:#C7D5FF}
.ttKeys{display:block;margin-top:12px;font-size:12px;line-height:1.7;color:#8FA6E8}
.ttOverBtns{display:grid;gap:8px;justify-items:center}
.ttOverlay .ttBtn{min-width:190px;min-height:44px;padding:10px 22px;font-size:15px;font-weight:700;color:#E6ECFF;background:rgba(255,255,255,.08);border:1px solid rgba(140,170,255,.35);border-radius:999px}
.ttOverlay .ttBtn:hover{background:rgba(255,255,255,.16)}
.ttOverlay .ttBtn.primary{color:#04112E;border:0;background:linear-gradient(90deg,#00E5FF,#6FA0FF);box-shadow:0 0 24px #00E5FF55}
.ttOverlay .ttBtn.primary:hover{filter:brightness(1.1)}
.ttCountNum{font-size:clamp(110px,calc(var(--bw,320px)*.34),200px);font-weight:800;color:#fff;text-shadow:0 0 30px #00E5FF;animation:ttCount .65s ease-out}
@keyframes ttCount{0%{transform:scale(1.6);opacity:0}30%{opacity:1}100%{transform:scale(.9);opacity:.85}}
.ttCalm .ttCountNum{animation:none}
.ttResult{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;text-align:left;min-width:220px}
.ttResult div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(140,170,255,.18);padding:4px 0}
.ttResult span{color:#8FA6E8;font-size:13px}.ttResult b{color:#fff;font-variant-numeric:tabular-nums}
/* panel žebříčků: karta webu */
.ttTabs{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.ttTabs button{min-height:0;padding:5px 10px;font-size:11px;font-weight:600;color:var(--ink-soft);background:transparent;border:1px solid var(--line);border-radius:999px}
.ttTabs button.on{color:#fff;background:var(--ink);border-color:var(--ink)}
.ttSoon{margin:0 0 8px;font-size:12px;line-height:1.45;color:var(--muted)}
.ttLb{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:3px;max-height:260px;overflow:auto}
.ttLb li{display:grid;grid-template-columns:22px 32px 1fr auto;gap:8px;align-items:center;padding:5px 8px;border-radius:8px;font-size:13px;line-height:1.3;background:rgba(0,0,0,.035)}
.ttLb li.me{background:var(--gold,#FFE600);color:#111;font-weight:700}
.ttLbPlace{font-weight:700;color:var(--muted)}.ttLb li.me .ttLbPlace{color:#111}
.ttLbName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttLbNote{margin:0 0 8px;font-size:12px;line-height:1.45;color:var(--muted)}
.ttQuota{margin:10px 0 0;font-size:14px}
.ttRanked .ttMode{background:var(--gold,#FFE600);color:#111;border-color:transparent}
.ttBest{display:flex;justify-content:space-between;gap:8px;align-items:baseline;border-top:1px solid var(--line);padding-top:8px}
.ttBest span{font-size:11.5px;color:var(--muted)}.ttBest b{font-size:16px;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.ttPad{display:none;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.ttPad button{min-height:58px;font-size:22px;font-weight:600;color:#fff;background:var(--ink);border:0;border-radius:16px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:var(--shadow-1)}
.ttPad button.down{background:var(--gold);color:var(--ink)}
/* okna pravidel a nastavení: karta webu */
.ttModal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#1E1E1C73;backdrop-filter:blur(2px)}
.ttModal[hidden]{display:none}
.ttModalCard{width:min(580px,92vw);max-height:88vh;overflow:auto;padding:24px 26px;color:var(--ink);background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.ttModalCard h2{margin:0 0 12px;font-size:22px;font-weight:600}.ttModalCard h3{margin:18px 0 8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.ttRules dt{font-weight:700;color:var(--ink);margin-top:10px}.ttRules dd{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.ttKeysGrid{display:grid;gap:6px;margin-bottom:10px}
.ttKeyRow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
.ttKeyBtn{min-height:36px;min-width:140px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm)}
.ttKeyBtn:hover{border-color:var(--ink);background:#fff}
.ttKeyBtn.wait{border-color:var(--gold);color:var(--gold-ink);background:var(--gold-soft)}
.ttRange,.ttSel,.ttChk{display:flex;align-items:center;gap:12px;margin:8px 0;font-size:14px}
.ttRange span,.ttSel span{flex:1}.ttRange input{flex:1.4;min-height:0;padding:0}.ttRange b{min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.ttSel select{flex:1;min-height:38px;padding:6px 10px}
.ttChk input{width:18px;min-height:18px}
.ttModalCard .ttBtn{margin-top:16px;min-width:160px;min-height:42px;padding:9px 22px;font-size:14px;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px}
.ttModalCard .ttBtn.primary{color:#fff;background:var(--ink);border-color:var(--ink)}
.ttModalCard .ttBtn.primary:hover{background:#34332F}
@media(max-width:900px){
 body.atelier #tetrisArea{margin:0 -14px;padding:14px 14px 28px;min-height:calc(100dvh - var(--bar,0px))}
 .ttBrand h1{font-size:22px}.ttBar{margin-bottom:12px}
 .ttLayout{grid-template-columns:minmax(0,1fr) 74px;grid-template-areas:"l l" "c r" "p p" "b b";gap:8px}
 .ttLeft{grid-area:l}.ttCenter{grid-area:c}.ttRight{display:contents}.ttNextBox{grid-area:r}.ttBoards{grid-area:b}.ttPad{grid-area:p;display:grid}
 .ttPanel{padding:8px 8px;border-radius:12px}.ttPanel canvas{width:62px}.ttStat b{font-size:15px}.ttStat span,.ttLab{font-size:9.5px}.ttStats{gap:6px}
 .ttBadge{font-size:10px;padding:4px 6px}
 .ttBoardBox{width:min(100%,calc((100vh - 360px)/2),calc((100dvh - 360px)/2));min-width:150px;margin:0 auto}
 .ttStats{grid-template-columns:repeat(3,1fr);gap:4px 6px;text-align:center}.ttStats .ttStat b{font-size:clamp(15px,4.4vw,22px)}.ttStats .ttStat span{letter-spacing:.06em}
 .ttPad button{min-height:50px;height:50px}.ttPad{gap:6px}
 .ttCountNum{font-size:80px}.ttStart .ttOverBox h2{font-size:30px}
}
@media(min-width:901px) and (pointer:coarse){.ttPad{display:grid;grid-column:1/-1}}
.ttModalCard input[type=range],.ttModalCard input[type=checkbox]{accent-color:#B6942D}
.ttNote{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.ttModalCard .ttGhostBtn{margin-top:10px}

.ttLbAv{width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--avatar-background,#d9e4ec);display:block;flex:none}.ttLbAv .illustratedAvatar{width:100%;height:100%;display:block}
.ttLbInit{display:grid;place-items:center;font-weight:700;font-size:14px;color:#26354b}
.ttLb li{font-size:14px;padding:6px 10px}.ttLb li.me .ttLbAv{box-shadow:0 0 0 2px #111}
.ttPanel.ttStats{padding:12px 14px}

/* Vizuální stupně tempa (podle času hry). Efekty jen kolem plochy a mimo dílky, aby nezhoršovaly čitelnost. */
.ttPhase{margin-left:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:4px 12px;background:#e8f1f3;color:#245;border:1px solid transparent}
.ttBoardBox{--glow:0,229,255;transition:box-shadow .8s}
.ttStage1 .ttBoardBox{box-shadow:0 0 18px 2px rgba(var(--glow),.25)}
.ttStage2 .ttBoardBox{box-shadow:0 0 28px 4px rgba(var(--glow),.4)}
.ttStage3 .ttBoardBox{box-shadow:0 0 34px 6px rgba(var(--glow),.5);animation:ttPulse 1.6s ease-in-out infinite}
.ttStage4{--g:255,140,0}.ttStage4 .ttBoardBox{--glow:255,140,0;box-shadow:0 0 42px 8px rgba(255,140,0,.6);animation:ttPulse 1s ease-in-out infinite}
.ttStage5{--g:255,40,70}.ttStage5 .ttBoardBox{--glow:255,40,70;box-shadow:0 0 50px 10px rgba(255,40,70,.65);animation:ttPulse .7s ease-in-out infinite}
.ttStage6 .ttBoardBox{--glow:190,120,255;box-shadow:0 0 60px 12px rgba(190,120,255,.7);animation:ttPulse .5s ease-in-out infinite,ttHue 4s linear infinite}
.ttStage4 .ttPhase{background:#ff8c00;color:#111}.ttStage5 .ttPhase{background:#ff2846;color:#fff}.ttStage6 .ttPhase{background:linear-gradient(90deg,#b078ff,#fff);color:#111}
.ttStage5 .ttBoardBox::after,.ttStage6 .ttBoardBox::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)}
@keyframes ttPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@keyframes ttHue{to{filter:hue-rotate(360deg)}}
.ttNoFlash .ttBoardBox,.ttCalm .ttBoardBox{animation:none!important}
.ttLongest{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:0 0 8px;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.035);font-size:13px}.ttLongest span{color:var(--muted)}.ttLongest em{font-style:normal;color:var(--muted)}

/* Telefon: během hry celá obrazovka, průhledná tlačítka dole přes plochu, bez tabulky a statistik navíc */
.ttHudPause{display:none}
@media(max-width:900px){
 body.ttPlaying{overflow:hidden!important;position:fixed!important;inset:0;width:100%;overscroll-behavior:none}
 body.atelier #tetrisArea.ttPlay{position:fixed;inset:0;z-index:10000;margin:0;padding:max(8px,env(safe-area-inset-top)) 10px 0;box-sizing:border-box;min-height:0;height:100dvh;overflow:hidden;background:radial-gradient(120% 80% at 50% 0,#0b1440,#050816 70%);color:#E6ECFF;display:block}
 #tetrisArea.ttPlay .ttApp{height:100%;max-width:none;position:relative}
 #tetrisArea.ttPlay .ttBar,#tetrisArea.ttPlay .ttBadges,#tetrisArea.ttPlay .ttBoards{display:none}
 #tetrisArea.ttPlay .ttHudPause{display:grid;place-items:center;position:absolute;top:2px;right:0;z-index:5;width:44px;height:44px;border-radius:12px;border:1px solid rgba(140,170,255,.4);background:rgba(255,255,255,.08);color:#E6ECFF;font-size:15px;touch-action:none}
 #tetrisArea.ttPlay .ttLayout{height:100%;grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"l l" "c r";gap:6px;align-items:start}
 #tetrisArea.ttPlay .ttStats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:4px 50px 4px 8px;background:transparent;border:0;box-shadow:none;text-align:left}
 #tetrisArea.ttPlay .ttStats .ttStat:nth-child(2),#tetrisArea.ttPlay .ttStats .ttStat:nth-child(6){display:none}
 #tetrisArea.ttPlay .ttStat span{color:#8fa3d9;font-size:9px}
 #tetrisArea.ttPlay .ttStat b{color:#fff;font-size:clamp(15px,4.6vw,20px)}
 #tetrisArea.ttPlay .ttCenter{align-self:start}
 #tetrisArea.ttPlay .ttBoardBox{width:min(100%,calc((100dvh - 78px - env(safe-area-inset-top,0px)) / 2));min-width:0;margin:0 auto;border-width:3px;border-radius:12px}
 #tetrisArea.ttPlay .ttNextBox{background:rgba(255,255,255,.04);border-color:rgba(140,170,255,.25);padding:6px 4px;box-shadow:none}
 #tetrisArea.ttPlay .ttNextBox canvas{width:54px}
 #tetrisArea.ttPlay .ttLab{color:#8fa3d9}
 /* tlačítka: otočit, doleva, dolů, doprava; průhledná, částečně přes dolní část plochy */
 #tetrisArea.ttPlay .ttPad{position:absolute;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 6px calc(10px + env(safe-area-inset-bottom,0px));margin:0;pointer-events:none}
 #tetrisArea.ttPlay .ttPad button{pointer-events:auto;height:64px;min-height:64px;border-radius:16px;font-size:26px;color:#fff;background:rgba(255,255,255,.12);border:1.5px solid rgba(0,229,255,.55);box-shadow:0 0 14px rgba(0,229,255,.2) inset;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
 #tetrisArea.ttPlay .ttPad button.down{background:rgba(0,229,255,.35)}
 #tetrisArea.ttPlay .ttPad [data-act=ccw],#tetrisArea.ttPlay .ttPad [data-act=hard]{display:none}
 #tetrisArea.ttPlay .ttPad [data-act=cw]{order:1}#tetrisArea.ttPlay .ttPad [data-act=left]{order:2}#tetrisArea.ttPlay .ttPad [data-act=soft]{order:3}#tetrisArea.ttPlay .ttPad [data-act=right]{order:4}
}

@media(max-width:900px){
 .ttRoot:not(.ttPlay) .ttPad{display:none}
 .ttResult{min-width:0;width:100%;gap:6px 12px;font-size:13px}.ttResult>div{min-width:0}.ttResult b{font-size:15px;white-space:nowrap}.ttResult span{font-size:11px}
 .ttOver .ttOverBox,.ttRecord .ttOverBox{padding-left:12px;padding-right:12px}
}