.tc-root{max-width:560px;margin:0 auto;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#12332b;box-sizing:border-box}
.tc-root *{box-sizing:border-box}
.tc-h{margin:0 0 .4em;font-size:1.9rem;font-weight:800;letter-spacing:-.02em}
.tc-h3{margin:0 0 .3em;font-size:1.2rem;font-weight:800}
.tc-p{margin:0 0 1em}
.tc-lbl{display:block;margin-bottom:1em;font-weight:600}
.tc-sel{margin-left:.5em;padding:.4em .6em;font-size:1rem}
.tc-grid{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);width:100%;height:100%}
.tc-c{position:relative;border:1px solid rgba(18,51,43,.18);color:#12332b}
.tc-c b{position:absolute;top:2px;left:3px;font-size:clamp(8px,2.2vw,12px);font-weight:600}
.tc-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tc-bar{display:flex;align-items:center;gap:12px;margin:14px 0}
.tc-turn{flex:1;font-weight:700}
.tc-roll,.tc-opt{font:inherit;font-weight:700;border:0;border-radius:8px;cursor:pointer;background:#12332b;color:#fff;padding:.7em 1.1em}
.tc-opt{display:block;width:100%;margin-top:8px;text-align:left;background:#fff;color:#12332b;border:2px solid #12332b}
.tc-roll:hover,.tc-opt:hover{background:#f2b31b;color:#12332b}
.tc-roll:disabled{opacity:.45;cursor:default;background:#12332b;color:#fff}
.tc-roll:focus-visible,.tc-opt:focus-visible{outline:3px solid #1f6feb;outline-offset:2px}
.tc-panel{min-height:96px;padding:14px;border:2px solid #12332b;border-radius:8px;background:#fffbea}
.tc-panel p{margin:0}
.tc-score{margin-top:12px;display:grid;gap:6px}
.tc-pl{padding:8px 10px;border:1px solid rgba(18,51,43,.3);border-radius:8px;font-size:.92rem}
.tc-pl.on{border:2px solid #12332b;background:#f2b31b33}
.tc-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.tc-tag{margin-left:6px;padding:1px 6px;border-radius:4px;background:#cfe8c8;font-size:.8rem}
.tc-tag.bad{background:#f6cdb9}
.tc-ol{margin:.4em 0 .8em;padding-left:1.3em}
.tc-lb{margin-top:16px}
.tc-row{display:block;margin:6px 0;font-weight:600}
.tc-in{display:block;width:100%;margin-top:4px;padding:.5em .6em;font:inherit;border:2px solid #12332b;border-radius:6px;background:#fff;color:#12332b}
.tc-in:focus-visible{outline:3px solid #1f6feb;outline-offset:2px}
.tc-frame{padding:clamp(8px,2.6vw,16px);border-radius:12px;background:#8a5a2b url(img/wood.svg);background-size:256px;box-shadow:0 10px 22px rgba(0,0,0,.35),inset 0 0 0 2px rgba(0,0,0,.3),inset 0 3px 5px rgba(255,255,255,.25)}
.tc-board{position:relative;aspect-ratio:1;border:2px solid rgba(0,0,0,.55);border-radius:3px;overflow:hidden;box-shadow:inset 0 0 12px rgba(0,0,0,.35)}
.tc-board::after{content:"";position:absolute;inset:0;z-index:1;background:url(img/paper.svg);mix-blend-mode:multiply;opacity:.55;pointer-events:none}
.tc-svg{z-index:2}
.tc-ic{position:absolute;right:2px;bottom:2px;width:clamp(13px,3.8vw,22px);height:clamp(13px,3.8vw,22px);background:center/contain no-repeat}
.tc-ic-K{background-image:url(img/ic-k.svg)}.tc-ic-D{background-image:url(img/ic-d.svg)}.tc-ic-I{background-image:url(img/ic-i.svg)}.tc-ic-B{background-image:url(img/ic-b.svg)}.tc-ic-Q{background-image:url(img/ic-q.svg)}
.tc-pawn{position:absolute;z-index:3;width:22px;height:29px;pointer-events:none;transform:translate(-50%,-78%) translate(var(--dx),var(--dy));transition:left .22s,top .22s}
.tc-pawn.jump{transition-duration:.7s}
.tc-pawn svg{display:block;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3))}
.tc-pawn.hop svg{animation:tc-hop .22s}
@keyframes tc-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-7px)}}
.tc-dicewrap{width:64px;height:64px;margin:6px 10px;perspective:420px;flex:none}
.tc-dicewrap.toss{animation:tc-toss 1s}
@keyframes tc-toss{0%,100%{transform:translateY(0)}30%{transform:translateY(-30px)}55%{transform:translateY(0)}70%{transform:translateY(-9px)}}
.tc-cube{position:relative;width:64px;height:64px;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.7,.25,1)}
.tc-f{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:10px;border-radius:11px;background:linear-gradient(145deg,var(--d1,#ee4a43),var(--d2,#b02320));box-shadow:inset 0 0 9px rgba(0,0,0,.4),inset 2px 2px 3px rgba(255,255,255,.25)}
.tc-f span{width:11px;height:11px;margin:auto;border-radius:50%}
.tc-f span.on{background:radial-gradient(circle at 35% 30%,#fff,#d8d4cc);box-shadow:inset -1px -1px 2px rgba(0,0,0,.45)}
.tc-tools{display:flex;justify-content:flex-end;margin-bottom:6px}
.tc-mute{font:inherit;font-size:.85rem;padding:.3em .8em;border:1.5px solid #12332b;border-radius:99px;background:#fff;color:#12332b;cursor:pointer}
.tc-mute:focus-visible{outline:3px solid #1f6feb;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tc-pawn,.tc-cube{transition:none}.tc-pawn.hop svg,.tc-dicewrap.toss{animation:none}}
@media (orientation:landscape) and (min-width:640px){
.tc-root.tc-game{max-width:1040px;display:grid;grid-template-columns:minmax(0,min(calc(100vh - 2rem),640px)) minmax(0,1fr);grid-template-columns:minmax(0,min(calc(100dvh - 2rem),640px)) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:20px;align-content:start;align-items:start}
.tc-game .tc-frame{grid-column:1;grid-row:1/span 4;position:sticky;top:1rem}
.tc-game .tc-tools,.tc-game .tc-bar,.tc-game .tc-panel,.tc-game .tc-score{grid-column:2}
.tc-game .tc-tools{grid-row:1}
.tc-game .tc-bar{grid-row:2;margin-top:0}
.tc-game .tc-panel{grid-row:3}
.tc-game .tc-score{grid-row:4;margin-top:12px}
}
/* v1.3.3: keterbacaan teks (tahan terhadap gaya tema WordPress) */
.tc-root p,.tc-root li,.tc-root label,.tc-root h2,.tc-root h3,.tc-panel,.tc-pl,.tc-turn{color:#12332b!important;opacity:1!important;text-align:left!important;letter-spacing:normal!important;word-spacing:normal!important;text-shadow:none!important;text-transform:none!important}
.tc-panel{font-size:1.05rem;line-height:1.5}
.tc-panel p{margin:0 0 .4em}
.tc-panel .tc-opt{color:#12332b!important;font-size:1rem}
.tc-panel .tc-opt:hover{color:#12332b!important}
.tc-h3{color:#12332b!important}
/* nomor dan ikon petak selalu di atas tangga dan ular */
.tc-c b{z-index:3;padding:0 3px;border-radius:3px;background:rgba(255,255,255,.7);color:#12332b;line-height:1.25}
.tc-ic{z-index:3;border-radius:4px;background-color:rgba(255,255,255,.55)}
.tc-prow{display:flex;gap:8px;align-items:center;margin:6px 0}
.tc-prow .tc-in{flex:1;width:auto;min-width:0;margin:0}
.tc-prow .tc-sel{margin:0}
.tc-prow .tc-dot{margin:0;flex:none;width:16px;height:16px}