/* the table cube: six kinds of table on six sides */
:root{--ts:min(92vw,720px)}
body.shell .gridwrap{overflow:visible;padding:0}
#tstage{position:relative;width:100%;min-height:360px;display:flex;align-items:center;justify-content:center;perspective:1100px;perspective-origin:50% 40%}
#thold{transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.7,.3,1);transform:translateZ(calc(var(--ts) / -2))}
#thold.choose{transform:translateZ(calc(var(--ts) / -2 - 90px)) rotateX(-26deg) rotateY(-34deg) scale(.86)}
#thold.turning{transform:translateZ(calc(var(--ts) / -2 - 160px)) scale(.84)}
#thold.choose.turning{transform:translateZ(calc(var(--ts) / -2 - 160px)) rotateX(-26deg) rotateY(-34deg) scale(.8)}
#tcube{position:relative;width:var(--ts);height:var(--ts);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.7,.3,1);cursor:grab}
.tface{position:absolute;inset:0;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:var(--radius);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:var(--ink)}
.tface .kind{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 18px 6px;color:#fff}
.tface .kind b{font:700 clamp(1.1rem,3.2vw,1.7rem) 'Poppins',sans-serif;letter-spacing:.04em}
.tface .kind span{font:600 .62rem 'Poppins',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
.tface .scroll{flex:1;overflow:hidden;position:relative;padding:4px;margin:0 8px 8px}
.tface .scroll table{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tface table.side{border-collapse:separate;border-spacing:6px;margin:0 auto}
.tface .cell{width:46px;height:46px;font-size:.95rem}
.tface th{color:#fff}
.tface.done{background:rgba(123,242,168,.42);border-color:#7BF2A8;box-shadow:0 0 0 2px rgba(123,242,168,.9), 0 0 40px rgba(123,242,168,.5)}
.tface.done .kind span::after{color:#7BF2A8}
.tface.done .kind span::after{content:' · DONE'}
.tface:not(.front) input{pointer-events:none}
#thold.choose .tface{cursor:pointer} #thold.choose .tface .scroll{pointer-events:none;overflow:hidden}
#thold.choose .tface.f0::after,#thold.choose .tface.f1::after,#thold.choose .tface.f4::after{content:'TAP TO WORK THIS SIDE';position:absolute;left:0;right:0;bottom:10px;text-align:center;font:600 .62rem 'Poppins',sans-serif;letter-spacing:.26em;color:#fff;z-index:2;pointer-events:none;background:linear-gradient(to top,var(--deep-soft),transparent);padding:24px 0 6px}
.tface.f0{transform:rotateY(0deg) translateZ(calc(var(--ts)/2))} .tface.f1{transform:rotateY(90deg) translateZ(calc(var(--ts)/2))} .tface.f2{transform:rotateY(180deg) translateZ(calc(var(--ts)/2))}
.tface.f3{transform:rotateY(-90deg) translateZ(calc(var(--ts)/2))} .tface.f4{transform:rotateX(90deg) translateZ(calc(var(--ts)/2))} .tface.f5{transform:rotateX(-90deg) translateZ(calc(var(--ts)/2))}
#thint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font:600 .58rem 'Poppins',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap;max-width:96vw;overflow:hidden;text-overflow:ellipsis}
#thint.on{opacity:1}
body.shell .shPane{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;width:100%}
/* phones: the working side fills the screen; the floor and Trunko step aside; the pad never covers a square */
@media(max-width:900px){
  .tface .kind{padding:10px 12px 4px}
  body.tc-work #shDash,body.tc-work #shMate,body.tc-work #shSay,body.tc-work .ht-plane{display:none}
  body.tc-work main.wrap{padding-bottom:12px !important}
  body.tc-work .shTab{top:auto;bottom:16px;height:44px;width:auto;writing-mode:horizontal-tb;transform:none;border-radius:999px;padding:0 14px;z-index:1180}
  body.tc-work .shTab.l{left:10px;border-left:1px solid var(--glass-border)} body.tc-work .shTab.r{right:10px;border-right:1px solid var(--glass-border)}
  body.tc-work #turnBtnPhone{display:inline-flex}
}
#turnBtnPhone{display:none;position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1180;border:1px solid var(--glass-border);background:#fff;color:var(--deep);border-radius:999px;min-height:44px;padding:0 18px;font:600 .62rem 'Poppins',sans-serif;letter-spacing:.18em;text-transform:uppercase;box-shadow:var(--shadow)}
body.mpad-open #turnBtnPhone,body.mpad-open.tc-work .shTab{display:none !important}

/* the readout after a side: the glass window, white ink, the colour scale as it was */
body.shell #results{display:none;margin:18px auto 0;width:min(96vw,1080px);background:linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.09));border:1px solid var(--glass-border);border-radius:var(--radius);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 80px var(--deep-soft);padding:18px 22px 24px;color:var(--ink)}
body.shell #results.on{display:block}
body.shell #results h2{font:600 1.05rem 'Poppins',sans-serif;letter-spacing:.06em;color:#fff;margin:0 0 8px}
body.shell #results .lead,body.shell #results p,body.shell #results .legend span{color:var(--ink)}
body.shell #results .cheer{color:#7BF2A8}
body.shell #results .rating .grade,body.shell #results .rating .rate{color:var(--ink)}
body.shell #results .genius{color:var(--ink-soft)}
body.shell #results .slowlist li{background:rgba(255,255,255,.14);border:1px solid var(--glass-border);color:#fff}
body.shell #results .slowlist li span{color:var(--ink-soft)}
body.shell #results .scalekeys span{color:var(--ink-soft)} body.shell #results .scalekeys span.hit{color:#fff}

/* THE LENS: the square you are on, lifted and magnified, wherever you can see it */
#tlens{position:fixed;z-index:1250;min-width:150px;padding:10px 14px 12px;border-radius:16px;background:#fff;color:var(--deep);box-shadow:var(--shadow),0 0 0 3px rgba(255,255,255,.55);opacity:0;transform:scale(.9);transition:opacity .18s,transform .18s,left .25s,top .25s;pointer-events:none;text-align:center}
#tlens.on{opacity:1;transform:scale(1)}
#tlens .q{font:600 .7rem 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--card-soft)}
#tlens .v{font:700 2.2rem 'Poppins',sans-serif;line-height:1.1;min-height:2.4rem;color:var(--deep)}
#tlens .v:empty::before{content:'?';color:var(--card-line)}
#tlens.good{box-shadow:var(--shadow),0 0 0 3px #7BF2A8} #tlens.good .v{color:#1E7F70}
#tlens.bad{box-shadow:var(--shadow),0 0 0 3px #E07A67} #tlens.bad .v{color:#B23A2F}
#tlens .pt{position:absolute;left:var(--px,50%);width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg)}
#tlens.down .pt{bottom:-7px} #tlens.up .pt{top:-7px}
.tface input.lensed{outline:3px solid #fff;outline-offset:1px;box-shadow:0 0 0 6px rgba(255,255,255,.35)}

/* THE FOCUS: the working side, off the cube, filling the screen */
#tfocus{position:absolute;inset:0;display:none;flex-direction:column;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:var(--radius);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:var(--shadow);color:var(--ink);z-index:3}
#tfocus.on{display:flex}
#tfocus .kind{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 20px 4px;color:#fff}
#tfocus .kind b{font:700 clamp(1.2rem,2.4vw,1.8rem) 'Poppins',sans-serif;letter-spacing:.04em}
#tfocus .kind span{font:600 .62rem 'Poppins',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
#tfocus .host{flex:1;display:flex;min-height:0}
#tfocus .scroll{flex:1;overflow:hidden;position:relative;padding:4px;margin:0 10px 10px}
#tfocus .scroll table.side{margin:0}
#tstage.focus #thold{visibility:hidden}
#tstage.focus{width:min(98vw,1400px);margin:0 auto}
@media(min-width:901px){ #tstage.focus{width:min(calc(100vw - 420px),1400px);margin:0 200px 0 auto} body.tc-work #shMate{right:30px;bottom:110px;height:min(52vh,420px)} body.tc-work #shSay{max-width:150px} }
/* while a side is being worked, the floor band shrinks so the side can be as big as the screen allows */
body.tc-work #shDash{height:96px}
body.tc-work #shDash .plane{height:100%}
body.tc-work main.wrap{padding-bottom:100px !important}
body.tc-work #shMate{height:min(26vh,220px);bottom:70px}

/* THE MAP in the corner of the working side */
#tmap{position:absolute;right:12px;top:12px;width:132px;height:132px;padding:4px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--glass-border);backdrop-filter:blur(6px);display:none;z-index:4;cursor:pointer}
#tfocus.on #tmap{display:block}
#tmap .cells{display:grid;gap:1px;width:100%;height:100%}
#tmap .cells b{display:block;background:rgba(255,255,255,.35);border-radius:1px} #tmap .cells b.ok{background:#7BF2A8} #tmap .cells b.shown{background:#F5B840}
#tmap .frame{position:absolute;border:2px solid #fff;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none}
#tfocus.zoomed .kind{padding-right:132px}
#tfocus.zoomed .scroll{cursor:grab;touch-action:none}
#tfocus.zoomed .scroll table{transition:transform .25s cubic-bezier(.2,.8,.2,1)}

/* in the close-up you always know what kind of math this is */
#tlens .k{font:800 .62rem 'Poppins',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#fff;background:var(--deep);border-radius:999px;padding:4px 12px;display:inline-block;margin-bottom:4px}
#tlens .q{font-size:1rem;letter-spacing:.08em;text-transform:none;color:var(--deep)}
#tlens{min-width:190px}
#tfocus .kind b{font:800 clamp(1.6rem,3vw,2.4rem) 'Poppins',sans-serif;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
#tfocus .kind{padding-top:10px}