.jtb { --cream:#fff8e9; --navy:#132d3d; --red:#a32937; --gold:#f3d07f; max-width:980px; margin:2rem auto; padding:clamp(16px,4vw,36px); border-radius:28px; background:var(--cream); color:var(--navy); box-shadow:0 14px 44px #10273325; box-sizing:border-box; font-family:system-ui,-apple-system,sans-serif; }
.jtb * { box-sizing:border-box; }
.jtb-intro { text-align:center; max-width:630px; margin:auto; }
.jtb-kicker { color:var(--red); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; }
.jtb h2 { color:var(--navy); font-size:clamp(1.8rem,5vw,2.75rem); line-height:1.12; margin:.3em 0; }
body .jtb h2 { color:#132d3d!important; text-shadow:none; }
.jtb p { line-height:1.5; }
.jtb-scenes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:1.5rem 0; }
.jtb button { font:inherit; cursor:pointer; }
.jtb button:focus-visible { outline:3px solid #1d6696; outline-offset:3px; }
.jtb-scene { min-width:0; border:3px solid transparent; background:#fff; color:var(--navy); padding:5px 5px 11px; border-radius:16px; text-align:left; box-shadow:0 3px 12px #10273318; }
.jtb-scene[aria-pressed="true"] { border-color:var(--red); }
.jtb-scene img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; border-radius:10px; }
.jtb-scene span { display:block; padding:8px 6px 0; font-weight:700; line-height:1.25; }
.jtb-panel { background:white; border-radius:20px; padding:clamp(12px,3vw,24px); border:1px solid #e8dfce; min-width:0; }
.jtb-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.jtb-levels { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-weight:700; }
.jtb-levels button,.jtb-help,.jtb-actions button { min-height:44px; padding:8px 15px; border-radius:12px; border:2px solid var(--navy); background:white; color:var(--navy); font-weight:750; }
.jtb-levels button[aria-pressed="true"] { background:var(--navy); color:white; }
body .jtb-levels button[aria-pressed="true"] { background:#132d3d!important; color:white!important; }
.jtb-help { background:#f8e7b0; }
.jtb-help:disabled { opacity:.55; cursor:default; }
.jtb-guide { margin:15px 0 4px; font-size:.95rem; }
.jtb-status { min-height:1.5em; font-weight:750; color:#5a2730; margin:4px 0 13px; }
.jtb-board { --jtb-columns:3; --jtb-rows:2; display:grid; grid-template-columns:repeat(var(--jtb-columns),minmax(0,1fr)); grid-template-rows:repeat(var(--jtb-rows),minmax(0,1fr)); aspect-ratio:3/2; width:min(100%,660px); margin:auto; border:4px solid #a95b40; border-radius:13px; overflow:hidden; background:#d5e2e4; }
.jtb-cell { border:1px solid #ffffffaa; width:100%; height:100%; min-width:0; min-height:0; border-radius:0; background-color:#d5e2e4; background-repeat:no-repeat; padding:0; }
.jtb-target { display:grid; place-items:center; background:#dce8e8; color:#254653; font-size:clamp(.7rem,3vw,1.2rem); }
.jtb-target:hover,.jtb-target:focus-visible { background:#fceac6; }
.jtb-filled { background-color:#bfd2dd; }
.jtb-tray-head { display:flex; gap:6px 14px; justify-content:space-between; flex-wrap:wrap; margin:18px 0 6px; font-size:.85rem; }
.jtb-tray-wrap { display:flex; gap:6px; min-width:0; align-items:center; }
.jtb-tray { display:flex; gap:9px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; padding:8px 3px 15px; min-width:0; flex:1; touch-action:pan-x pan-y; }
.jtb-tile { flex:0 0 clamp(60px,18vw,92px); aspect-ratio:1.5; background-repeat:no-repeat; border:3px solid #596d73; border-radius:7px; scroll-snap-align:start; }
.jtb-tile.is-selected { border-color:#b52637; box-shadow:0 0 0 3px #f2cb6b; }
.jtb-arrow { flex:0 0 42px; min-height:48px; border:1px solid #456270; border-radius:9px; background:#e5eff0; color:var(--navy); font-size:1.8rem!important; line-height:1; }
.jtb-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.jtb-actions .jtb-share { background:var(--red); border-color:var(--red); color:white; }
.jtb-note { font-size:.85rem; margin:17px 3px 0; }
@media(max-width:540px) { .jtb { margin:14px 8px; padding:14px; border-radius:18px; } .jtb-scenes { gap:6px; } .jtb-scene { padding:3px 3px 8px; font-size:.72rem; border-width:2px; } .jtb-scene span { padding:6px 3px 0; } .jtb-board { border-width:2px; } .jtb-tray-head span { flex-basis:100%; } }
@media(prefers-reduced-motion:reduce) { .jtb * { scroll-behavior:auto!important; } }

/* Interlocking SVG pieces: the shape and clipped image share one path. */
.jtb-board{position:relative}
.jtb-cell{position:relative;overflow:visible;border:0;background:transparent}
.jtb-target{z-index:1}
.jtb-target:hover,.jtb-target:focus-visible{background:#fceac6}
.jtb-filled{z-index:2;pointer-events:none}
.jtb-board-art{position:absolute;left:var(--jtb-svg-left);top:var(--jtb-svg-top);width:var(--jtb-svg-width);height:var(--jtb-svg-height);pointer-events:none}
.jtb-piece-art{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.jtb-number{position:relative;z-index:3;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:#fff8e9dd;font-weight:800;pointer-events:none}
.jtb-tile{display:block;flex:0 0 clamp(74px,19vw,108px);aspect-ratio:var(--jtb-piece-ratio);min-height:60px;padding:0;border:0;border-radius:7px;background:transparent;scroll-snap-align:start}
.jtb-tile.is-selected{border:0;outline:3px solid #b52637;outline-offset:1px;box-shadow:0 0 0 5px #f2cb6b}
.jtb-sound{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:.85rem;font-weight:750}
.jtb-sound button{min-height:44px;padding:7px 10px;border:2px solid #456270;border-radius:10px;background:white;color:var(--navy);font-weight:750}
.jtb-sound button[aria-pressed="true"]{background:#132d3d;color:white}
@media(max-width:540px){.jtb-toolbar{align-items:flex-start}.jtb-sound{flex-basis:100%}.jtb-sound button{flex:1 1 auto}}