/* Neutral surfaces and text; deep blue consistently means an available or selected action. */
:root { color-scheme:light; font-family:Arial,Helvetica,sans-serif; --ink:#25282b; --muted:#5c6268; --paper:#f5f4ef; --action:#244d70; --rule:#c8cace; --gold:#b8c6d2; }
* { box-sizing:border-box; }
html,body,#root { margin:0; min-height:100%; }
body { color:var(--ink); background:#303437 url('img/materials/wood-table.webp') center/700px; background-blend-mode:luminosity; }
button,a { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible { outline:3px solid #244d70; outline-offset:3px; }
button:disabled { cursor:not-allowed; }
.tp-app { height:100dvh; min-height:660px; display:flex; flex-direction:column; }
.tp-topbar { display:flex; align-items:center; gap:24px; height:66px; flex:0 0 66px; padding:0 24px; color:var(--paper); background:#272d35; border-bottom:1px solid #69717a; }
.tp-brand { display:flex; align-items:center; gap:12px; font:700 20px Georgia,serif; letter-spacing:.03em; }
.tp-brand strong { display:block; font:10px/1.6 Arial,sans-serif; letter-spacing:.3em; color:#c6cbd0; }
.tp-brand-mark { display:none; }
.tp-top-stats { margin-left:auto; display:flex; gap:28px; color:#c6cbd0; font-size:10px; letter-spacing:.12em; }
.tp-top-stats b { display:block; font:700 17px/1.5 Georgia,serif; color:var(--paper); letter-spacing:0; }
.tp-back { color:var(--paper); text-decoration:none; border-bottom:1px solid #9099a2; padding:8px 0; font-size:11px; }
.tp-layout { flex:1; min-height:0; display:grid; grid-template-columns:minmax(270px,29%) minmax(300px,1fr) minmax(310px,28%); gap:10px; padding:12px; }
.tp-left { position:relative; min-height:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; color:var(--paper); background:linear-gradient(#272d35ed,#272d35db),url('img/materials/green-metal.webp') center/650px; border:1px solid #242a31; box-shadow:0 3px 8px #0004; }
.tp-score { width:calc(100% - 40px); margin-top:28px; text-align:center; padding:16px 5px; border-top:1px solid #e5e8ec66; border-bottom:1px solid #e5e8ec66; }
.tp-score-label { color:#d4d9de; font-size:10px; letter-spacing:.22em; }
.tp-score-number { margin-top:8px; font:700 clamp(30px,3vw,46px)/1.2 Georgia,serif; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.tp-score-number span { font:20px Arial; }
.tp-cps { color:#d4d9de; font-size:12px; margin-top:8px; }
.tp-click-zone { flex:1; width:100%; min-height:290px; position:relative; display:grid; place-items:center; }
.tp-bathroom-light,.tp-orbit { display:none; }
.tp-click-target { width:min(78%,300px); aspect-ratio:1; position:relative; border:5px solid #b5c0ca; border-radius:50%; padding:0; background:#272d35; box-shadow:0 3px 0 #151b22,0 12px 18px #0005; touch-action:manipulation; transition:transform .08s; }
.tp-click-target:hover { transform:translateY(-2px); }
.tp-click-target.is-pressed { transform:scale(.96); }
.tp-click-target:disabled { opacity:.65; }
.tp-click-target img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; pointer-events:none; user-select:none; }
.tp-float { position:absolute; pointer-events:none; color:white; font:bold 22px Arial; text-shadow:0 2px 3px #000; animation:tp-float .65s ease-out forwards; }
@keyframes tp-float { to { opacity:0; transform:translateY(-65px); } }
.tp-golden { position:absolute; top:10%; right:5%; border:2px solid #f8e1a0; background:#d9b25f; border-radius:50%; padding:12px; font-size:24px; }
.tp-click-caption { font-size:12px; letter-spacing:.15em; text-align:center; }
.tp-click-caption span { display:block; margin-top:7px; color:#d4d9de; font-size:11px; letter-spacing:0; }
.tp-audio-controls { display:flex; gap:8px; align-items:center; margin:18px 10px; font-size:11px; }
.tp-audio-controls button { padding:7px 12px; border:1px solid #9da8b3; color:var(--paper); background:#303942; border-radius:2px; }
.tp-left-footer { width:100%; padding:13px 5px; text-align:center; font:10px Georgia,serif; letter-spacing:.15em; background:#242a31; color:#bbc2c9; }
.tp-left-footer span { padding:0 5px; }
.tp-center { min-width:0; min-height:0; display:flex; flex-direction:column; background:var(--paper); box-shadow:0 3px 8px #0004; }
.tp-tabs { display:flex; gap:24px; padding:0 22px; border-bottom:1px solid var(--rule); }
.tp-tabs button { padding:18px 0 12px; border:0; border-bottom:3px solid transparent; background:none; color:var(--muted); font-size:13px; }
.tp-tabs button.is-active { color:var(--action); border-color:var(--action); font-weight:bold; }
.tp-news { padding:10px 22px; font:italic 12px/1.4 Georgia,serif; color:var(--muted); border-bottom:1px solid var(--rule); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp-news b { font:700 9px Arial; letter-spacing:.1em; margin-right:8px; }
.tp-center-scroll { flex:1; min-height:0; overflow-y:auto; padding:24px; }
.tp-workshop-title { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0 21px; margin-bottom:20px; border-bottom:3px double var(--ink); }
.tp-workshop-title strong { font:700 clamp(19px,2vw,29px)/1.1 Georgia,serif; text-align:center; }
.tp-workshop-title span { font-size:8px; letter-spacing:.1em; max-width:50px; line-height:1.5; }
.tp-section-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:20px 0 12px; font:700 15px Georgia,serif; }
.tp-section-head small { font:9px Arial; color:var(--muted); letter-spacing:.08em; }
.tp-production-grid { display:grid; grid-template-columns:1fr 1fr; border-block:1px solid var(--rule); margin-bottom:22px; }
.tp-metric { padding:14px 0; display:flex; flex-direction:column; gap:6px; }
.tp-metric + .tp-metric { border-left:1px solid var(--rule); padding-left:20px; }
.tp-metric span { font-size:11px; color:var(--muted); }
.tp-metric strong { font:700 25px Georgia,serif; }
.tp-room-list { display:grid; gap:17px; }
.tp-room { border-bottom:1px solid var(--rule); padding-bottom:12px; }
.tp-room-head { display:flex; justify-content:space-between; gap:10px; font-size:10px; font-weight:bold; letter-spacing:.08em; margin-bottom:9px; }
.tp-room-head b { font-size:10px; color:var(--muted); }
.tp-room-scene { display:flex; overflow:hidden; gap:8px; min-height:72px; align-items:center; }
.tp-room-figure { flex:0 0 64px; height:64px; box-shadow:0 2px 4px #0002; transform:rotate(-2deg); }
.tp-room-figure:nth-child(even) { transform:rotate(2deg); }
.tp-room-figure img { display:block; width:100%; height:100%; object-fit:cover; border:3px solid #ffffff; }
.tp-room.is-idle .tp-room-figure { filter:saturate(.45); opacity:.65; }
.tp-room-foot { margin-top:8px; font:11px Georgia,serif; color:var(--muted); }
.tp-upgrades { display:grid; gap:8px; }
.tp-upgrade { display:flex; gap:10px; align-items:center; padding:10px 0; width:100%; border:0; border-bottom:1px solid var(--rule); background:transparent; text-align:left; color:var(--ink); }
.tp-upgrade > span:nth-child(2) { flex:1; }
.tp-upgrade-icon img { width:44px; height:44px; object-fit:cover; }
.tp-upgrade strong,.tp-upgrade small { display:block; }
.tp-upgrade strong { font-size:12px; }
.tp-upgrade small { font-size:11px; color:var(--muted); margin-top:4px; }
.tp-upgrade b { font-size:11px; }
.tp-upgrade:disabled { opacity:.6; }
.tp-empty { font:italic 13px/1.6 Georgia,serif; color:var(--muted); }
.tp-store { display:flex; flex-direction:column; min-width:0; min-height:0; background:#e9eaeb; box-shadow:0 3px 8px #0004; }
.tp-store-header { display:flex; justify-content:space-between; align-items:baseline; padding:22px 18px 18px; font:700 26px Georgia,serif; }
.tp-store-header small { font:9px Arial; color:var(--muted); letter-spacing:.08em; }
.tp-buy-modes { display:flex; gap:0; margin:0 18px 18px; border:1px solid #b1b6bc; }
.tp-buy-modes button { flex:1; padding:8px; background:none; border:0; color:var(--ink); font-size:11px; }
.tp-buy-modes button + button { border-left:1px solid #b1b6bc; }
.tp-buy-modes button.is-active { background:var(--action); color:#ffffff; }
.tp-store-list { min-height:0; overflow-y:auto; border-top:1px solid var(--rule); }
.tp-building { display:flex; align-items:center; width:100%; gap:10px; padding:12px 14px; border:0; border-bottom:1px solid #c8cace; text-align:left; background:#f5f4ef; color:var(--ink); }
.tp-building:nth-child(even) { background:#eeefef; }
.tp-building.is-affordable { box-shadow:inset 3px 0 var(--action); }
.tp-building.is-affordable:hover { background:#ffffff; }
.tp-building:disabled .tp-building-icon { filter:saturate(.55); }
.tp-building-icon { flex:0 0 56px; height:56px; }
.tp-building-icon img { display:block; width:100%; height:100%; object-fit:cover; border:1px solid #aeb6bf; }
.tp-building-info { flex:1; min-width:0; }
.tp-building-info strong { display:block; font:700 14px/1.2 Georgia,serif; }
.tp-building-info small { display:block; font-size:10px; color:var(--muted); margin-top:5px; }
.tp-building-price { text-align:right; white-space:nowrap; }
.tp-building-price b { font-size:11px; color:#244d70; }
.tp-building-price small { display:block; margin-top:6px; font-size:9px; color:var(--muted); }
.tp-casino-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tp-casino-card { display:flex; flex-direction:column; gap:8px; padding:20px 14px; border:1px solid #c8cace; border-radius:2px; background:#ffffff; text-align:left; color:var(--ink); }
.tp-casino-card span { font-size:26px; }
.tp-casino-card strong { font:700 16px Georgia,serif; }
.tp-casino-card small { font-size:11px; color:var(--muted); }
.tp-casino-card:hover { border-color:var(--action); }
.tp-casino-active { padding:16px; background:#272d35; color:#ffffff; }
.tp-casino-heading { display:flex; justify-content:space-between; gap:8px; margin-bottom:14px; }
.tp-casino-heading button { padding:6px; background:#f5f4ef; border:0; font-size:11px; }
.tp-toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); padding:12px 18px; max-width:90vw; background:#272d35; color:#ffffff; font-size:13px; border:1px solid #9da8b3; box-shadow:0 4px 12px #0004; z-index:20; }
@media(max-width:1000px) {
 .tp-app { height:auto; min-height:100dvh; }
 .tp-layout { grid-template-columns:1fr 1fr; }
 .tp-left { min-height:540px; }
 .tp-center { min-height:540px; }
 .tp-store { grid-column:1/-1; }
 .tp-store-list { display:grid; grid-template-columns:1fr 1fr; }
 .tp-center-scroll,.tp-store-list { overflow:visible; }
 .tp-top-stats { display:none; }
 .tp-back { margin-left:auto; }
}
@media(max-width:600px) {
 .tp-topbar { padding:0 16px; height:62px; flex-basis:62px; }
 .tp-brand { font-size:17px; }
 .tp-layout { display:flex; flex-direction:column; padding:8px; gap:8px; }
 .tp-left { min-height:500px; }
 .tp-click-zone { min-height:260px; }
 .tp-click-target { width:220px; }
 .tp-score { margin-top:18px; padding:12px; }
 .tp-score-number { font-size:34px; }
 .tp-center { min-height:0; }
 .tp-center-scroll { padding:20px; }
 .tp-store-list { display:block; }
 .tp-workshop-title strong { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Both real photographs stay loaded; each click exposes the gag frame for 160ms. */
.tp-face-shell { display:block; position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; }
.tp-click-target .tp-face-gag { position:absolute; inset:0; opacity:0; transform:translateY(12%) scale(1.65); transform-origin:50% 30%; border-radius:0; }
.tp-click-target.is-pressed .tp-face-normal { opacity:0; }
.tp-click-target.is-pressed .tp-face-gag { opacity:1; }

/* Arcade cabinet: playful lettering and tactile controls, not a ledger. */
.tp-brand { font:1000 22px/.95 Impact,'Arial Black',Arial,sans-serif; font-style:italic; letter-spacing:-.02em; }
.tp-brand strong { font:900 11px/1.5 Arial,sans-serif; letter-spacing:.2em; }
.tp-left { background:linear-gradient(#244d70ed,#183d5de3),url('img/materials/green-metal.webp') center/600px; border:3px solid #121c25; border-radius:10px; box-shadow:0 5px #121c25; }
.tp-score { border:2px solid #9dbbd4; border-radius:5px; background:#172e45; transform:rotate(-2deg); width:calc(100% - 38px); box-shadow:4px 4px #112436; }
.tp-score-label { font-weight:900; color:#f5f4ef; letter-spacing:.15em; }
.tp-score-number { font:1000 clamp(42px,4.2vw,68px)/1 Impact,'Arial Black',Arial,sans-serif; }
.tp-cps { color:#d8e6f1; }
.tp-click-target { width:min(84%,330px); border:7px solid #f5f4ef; box-shadow:0 8px #112436,0 13px 14px #0004; }
.tp-click-target::before { content:'TAP!'; position:absolute; right:-15px; top:-19px; z-index:3; transform:rotate(13deg); background:#f5f4ef; border:3px solid #112436; color:#244d70; padding:8px 11px; font:1000 18px Impact,'Arial Black',Arial,sans-serif; box-shadow:3px 3px #112436; pointer-events:none; }
.tp-click-target.is-pressed { transform:scale(.94) rotate(-3deg); box-shadow:0 3px #112436; }
.tp-float { font:1000 30px Impact,'Arial Black',Arial,sans-serif; text-shadow:2px 3px #112436; }
.tp-click-caption { font:1000 24px/1 Impact,'Arial Black',Arial,sans-serif; font-style:italic; letter-spacing:-.02em; transform:rotate(-3deg); }
.tp-click-caption span { font:700 12px Arial,sans-serif; }
.tp-left-footer { font:900 9px Arial,sans-serif; letter-spacing:.08em; }
.tp-center { border:3px solid #202830; border-radius:9px; }
.tp-tabs { gap:10px; padding:12px 14px; border-bottom:2px solid #25282b; }
.tp-tabs button { flex:1; padding:10px; border:2px solid #25282b; border-radius:4px; font:900 13px Arial,sans-serif; }
.tp-tabs button.is-active { color:#fff; background:#244d70; border-color:#25282b; box-shadow:0 3px #25282b; }
.tp-news { font:11px/1.4 Arial,sans-serif; padding:9px 15px; }
.tp-workshop-title { border:0; padding:0 0 8px; margin-bottom:5px; align-items:flex-start; }
.tp-workshop-title strong { font:1000 clamp(24px,2.7vw,39px)/.95 Impact,'Arial Black',Arial,sans-serif; font-style:italic; text-align:left; letter-spacing:-.04em; }
.tp-workshop-title span { display:none; }
.tp-section-head { font:900 14px Arial,sans-serif; }
.tp-production-grid { border:2px solid #25282b; border-radius:4px; background:#e5edf4; box-shadow:3px 3px #25282b; }
.tp-metric { padding:12px; }
.tp-metric strong { font:1000 30px Impact,'Arial Black',Arial,sans-serif; }
.tp-metric + .tp-metric { padding-left:14px; border-color:#abb9c6; }
.tp-room { background:#e9e8e2; border:2px solid #b7bcc2; border-radius:5px; padding:12px; }
.tp-room-head { font-size:11px; }
.tp-room-figure { flex-basis:72px; height:72px; }
.tp-room-foot { font:11px Arial,sans-serif; }
.tp-store { border:3px solid #202830; border-radius:9px; overflow:hidden; }
.tp-store-header { font:1000 30px Impact,'Arial Black',Arial,sans-serif; font-style:italic; }
.tp-building { min-height:84px; border-bottom:2px solid #c8cace; }
.tp-building-icon { flex-basis:62px; height:62px; }
.tp-building-icon img { border:2px solid #25282b; border-radius:5px; }
.tp-building-info strong { font:900 13px/1.2 Arial,sans-serif; }
.tp-building-price b { display:inline-block; padding:6px; border-radius:3px; background:#e0e4e8; }
.tp-building.is-affordable .tp-building-price b { background:#244d70; color:white; }
.tp-building.is-affordable { box-shadow:inset 4px 0 #244d70; }
.tp-upgrade strong { font-weight:900; }
.tp-casino-card strong { font:900 16px Arial,sans-serif; }
.tp-casino-card { border:2px solid #25282b; box-shadow:0 3px #25282b; }
.tp-toast { border:2px solid #a9c8e2; border-radius:4px; font-weight:900; }
@media(max-width:600px) {
 .tp-left { min-height:510px; }
 .tp-click-target { width:230px; }
 .tp-click-zone { min-height:278px; }
 .tp-click-caption { font-size:22px; }
 .tp-workshop-title strong { font-size:32px; }
 .tp-center-scroll { padding:18px; }
 .tp-room-figure { flex-basis:64px; height:64px; }
 .tp-brand { font-size:19px; }
}

/* Clicker's own world: a sunny, copper-and-honey toy factory. Not Pong's palette. */
:root { --ink:#4b291c; --muted:#71503a; --paper:#ffefc9; --action:#a54816; --rule:#c89c5d; --gold:#ffca55; }
body { color:var(--ink); background:#70452a url('img/materials/wood-table.webp') center/700px; background-blend-mode:normal; }
.tp-topbar { background:#6a321d url('img/materials/wood-table.webp') center/600px; border-bottom:4px solid #e4ac53; height:68px; flex-basis:68px; box-shadow:0 3px #42291a; }
.tp-brand { color:#fff0be; text-shadow:2px 2px #3b1d12; font-size:25px; }
.tp-brand strong { color:#ffd164; }
.tp-top-stats { color:#ffe4ac; }
.tp-top-stats b { color:#fff8e0; }
.tp-back { color:#fff2d2; border-color:#d2a05c; }
.tp-layout { gap:12px; padding:14px 12px; }
.tp-left { color:#fff3d2; background:linear-gradient(#57301928,#57301905 65%,#573019a6),url('img/clicker-tom/workshop.webp') center/cover; border:5px solid #bd7c37; outline:2px solid #593420; border-radius:14px; box-shadow:inset 0 0 0 2px #ffe4a8,0 6px #4d2b18; }
.tp-score { position:relative; z-index:1; background:#68311f; border:3px solid #ffcf65; box-shadow:0 5px #492014,inset 0 0 0 2px #9c5c30; border-radius:12px; transform:rotate(-2deg); width:calc(100% - 32px); margin-top:22px; padding:15px 8px; }
.tp-score-label { color:#ffe3a2; }
.tp-score-number { color:#ffdc76; text-shadow:0 3px #3f1b10; }
.tp-cps { color:#fff1cb; }
.tp-click-target { background:#d9923e; border:9px solid #ffd36a; outline:3px solid #78401f; box-shadow:inset 0 0 0 3px #fff0a9,0 10px #8c4826,0 17px 20px #42220c77; width:min(83%,330px); }
.tp-click-target::before { content:'GAG!'; color:#fff3c6; background:#b94720; border:3px solid #ffdb84; box-shadow:3px 4px #713515; border-radius:8px; padding:8px 12px; }
.tp-click-target.is-pressed { box-shadow:0 3px #8c4826; }
.tp-float { color:#fff5bb; text-shadow:2px 3px #793419; font-size:34px; }
.tp-click-caption { color:#fff6db; background:#914222; padding:10px 24px; border:3px solid #ffd475; border-radius:9px; box-shadow:0 4px #602c19; text-shadow:1px 2px #5c2d18; }
.tp-click-caption span { color:#ffe7a4; }
.tp-audio-controls { margin:15px 10px; padding:4px 7px; background:#5b311ee8; border-radius:7px; }
.tp-audio-controls button { color:#fff2cc; border-color:#d7a75b; background:#7c4527; border-radius:5px; }
.tp-left-footer { background:#64341fe8; color:#ffe4a6; border-top:2px solid #bc8042; }
.tp-center { background:#f5dca4; border:5px solid #b97b3e; outline:2px solid #593420; border-radius:12px; box-shadow:0 6px #4d2b18; }
.tp-tabs { background:#8b4e29 url('img/materials/wood-table.webp') center/600px; border-bottom:3px solid #c9944e; padding:12px; gap:12px; }
.tp-tabs button { background:#e2b875; color:#65381c; border:2px solid #71401f; border-radius:9px; box-shadow:0 3px #5a3019,inset 0 2px #ffe3aa; }
.tp-tabs button.is-active { color:#fff7da; background:#a74b1e; border-color:#ffce6d; box-shadow:0 4px #5a3019,inset 0 2px #e5883d; }
.tp-news { background:#ffecc0; border-color:#d5ad70; color:#6e492d; }
.tp-workshop-title { justify-content:center; padding:0 0 12px; }
.tp-workshop-title strong { color:#86421f; font-size:clamp(25px,2.5vw,37px); text-shadow:1px 2px #fff2ca; text-align:center; }
.tp-section-head { color:#6e3a1f; }
.tp-section-head small { color:#785334; }
.tp-production-grid { background:#ffefc6; border:2px solid #c08b42; border-radius:9px; box-shadow:0 3px #d1a665,inset 0 2px #fff7dd; }
.tp-metric span { color:#805330; }
.tp-metric strong { color:#8a451b; }
.tp-metric + .tp-metric { border-color:#d8b373; }
.tp-next-unlock { display:flex; gap:12px; align-items:center; padding:12px; margin:0 0 22px; background:#537341; border:3px solid #e3bf70; border-radius:10px; box-shadow:0 4px #815b2e; color:#fff8df; }
.tp-next-unlock > img { width:64px; height:64px; border:3px solid #f5d580; border-radius:8px; }
.tp-next-unlock > div { flex:1; min-width:0; }
.tp-next-unlock strong { display:block; font-size:14px; margin:3px 0 7px; }
.tp-next-unlock small { font-size:10px; color:#fff3c5; }
.tp-progress { height:10px; overflow:hidden; border:1px solid #263e24; background:#2c4929; border-radius:8px; margin-bottom:4px; }
.tp-progress > span { display:block; height:100%; background:#ffd267; border-top:2px solid #fff0a8; }
.tp-room-list { gap:20px; }
.tp-room { background:#ae7541 url('img/materials/wood-table.webp') center/500px; border:3px solid #a97339; border-radius:9px; padding:0; overflow:hidden; box-shadow:0 4px #9d6b37,inset 0 1px #ffe6b2; }
.tp-room-head { margin:0; padding:10px 12px; background:#7a4226; color:#ffe9b1; border-bottom:2px solid #c48a41; text-shadow:0 1px #4d2819; }
.tp-room-head b { color:#fff4d3; }
.tp-room-scene { min-height:106px; padding:10px 12px 6px; background:linear-gradient(#ffecab55,#74471833),url('img/clicker-tom/workshop.webp') center 70%/cover; }
.tp-room-farm .tp-room-scene { background-position:center 90%; }
.tp-room-figure { flex-basis:78px; height:78px; box-shadow:0 4px 4px #42230b66; }
.tp-room-figure img { border:3px solid #ffd687; border-radius:8px; }
.tp-room.is-idle .tp-room-figure { opacity:.75; filter:saturate(.55); }
.tp-room-foot { margin:0; padding:8px 12px; background:#ffebbc; color:#714321; border-top:2px solid #be8847; }
.tp-store { background:#b77937 url('img/materials/wood-table.webp') center/600px; border:5px solid #b97b3e; outline:2px solid #593420; border-radius:12px; box-shadow:0 6px #4d2b18; }
.tp-store-header { color:#ffe4a2; text-shadow:2px 2px #542b18; padding-top:18px; }
.tp-store-header small { color:#ffe9ba; text-shadow:none; }
.tp-buy-modes { border:2px solid #60351c; border-radius:6px; overflow:hidden; box-shadow:0 3px #512b16; }
.tp-buy-modes button { background:#f6d49a; color:#754320; font-weight:bold; padding:9px; }
.tp-buy-modes button + button { border-color:#b78343; }
.tp-buy-modes button.is-active { background:#a34b20; color:#fff5d3; }
.tp-store-list { border-color:#a16b36; }
.tp-building { padding:10px 12px; background:#ffe8b6; border-bottom:3px solid #c99b58; color:#60371f; min-height:86px; }
.tp-building:nth-child(even) { background:#f3d49c; }
.tp-building-icon { flex-basis:66px; height:66px; }
.tp-building-icon img { border:3px solid #a3652d; box-shadow:inset 0 0 0 1px #ffe4a8,0 2px #bf9459; border-radius:9px; }
.tp-building-info strong { font-size:13px; }
.tp-building-info small,.tp-building-price small { color:#79512e; }
.tp-building-price b { color:#794619; background:#ebc78b; border:1px solid #bd8f4b; border-bottom-width:3px; border-radius:6px; padding:6px; }
.tp-building.is-affordable { box-shadow:inset 4px 0 #567c36; }
.tp-building.is-affordable .tp-building-price b { background:#52732d; border-color:#36551c; color:#fff3ca; }
.tp-building.is-affordable:hover { background:#fff1cc; }
.tp-upgrade { background:#ffe8b6; border:1px solid #c6924a; padding:9px; border-radius:7px; color:#633b22; }
.tp-upgrade b,.tp-upgrade small { color:#79512e; }
.tp-empty { color:#79512e; font:12px/1.6 Arial,sans-serif; }
.tp-casino-card { border-color:#a66b31; background:#ffebbb; color:#713b20; box-shadow:0 4px #b88442; border-radius:9px; }
.tp-casino-card small { color:#79512e; }
.tp-casino-active { background:#633721; }
.tp-toast { border:3px solid #ffe3a2; background:#8d4423; color:#fff4cb; border-radius:9px; box-shadow:0 4px #5a2b19; }
@media(max-width:600px) {
 .tp-layout { padding:10px; gap:14px; }
 .tp-left { min-height:535px; }
 .tp-click-target { width:230px; }
 .tp-click-zone { min-height:270px; }
 .tp-center-scroll { padding:16px; }
 .tp-workshop-title strong { font-size:29px; }
 .tp-next-unlock { padding:10px; }
 .tp-room-figure { flex-basis:69px; height:69px; }
}
/* Keep the whole miniature workshop visible in the tall clicker cabinet. */
.tp-left { background-size:auto,100% 100%; }
.tp-board { margin-left:auto; padding:8px 12px; border:2px solid #e4ac53; border-radius:4px; background:#3a1f12cc; color:#ffe4ac; font:900 11px Arial,sans-serif; letter-spacing:.16em; cursor:pointer; }
.tp-board:hover { background:#e4ac53; color:#3a1f12; }
.tp-top-stats + .tp-board { margin-left:0; }
.tp-board + .tp-back { margin-left:0; }
@media(max-width:1000px) { .tp-top-stats + .tp-board { margin-left:auto; } }
@media(max-width:600px) { .tp-topbar { gap:12px; } .tp-board { padding:7px 9px; font-size:10px; letter-spacing:.1em; } .tp-back { white-space:nowrap; } }

/* Phone held sideways: the whole factory fits on one screen. Tom stays in view on the left, production and the store scroll in their own columns. */
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse) {
  .tp-app { height:100dvh; min-height:0; }
  .tp-topbar { height:44px; flex:0 0 44px; gap:14px; padding:0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
  .tp-brand { font-size:17px; }
  .tp-brand strong { display:none; }
  .tp-board { padding:6px 10px; }
  .tp-layout { display:grid; grid-template-columns:minmax(200px,31%) minmax(0,1fr) minmax(0,1fr); gap:8px; padding:6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .tp-left, .tp-center, .tp-store { min-height:0; height:auto; }
  .tp-left { overflow:hidden; }
  .tp-score { margin-top:6px; padding:5px 4px; }
  .tp-score-label { font-size:9px; }
  .tp-score-number { margin-top:0; font-size:26px; }
  .tp-cps { margin-top:0; font-size:10px; }
  .tp-click-zone { min-height:0; flex:1 1 0; container-type:size; }
  .tp-click-target { width:min(86cqw, calc(100cqh - 22px), 230px); height:auto; }
  .tp-click-target::before { right:-10px; top:-8px; padding:5px 8px; font-size:13px; }
  .tp-click-caption { display:none; }
  .tp-audio-controls { position:absolute; left:6px; bottom:6px; margin:0; z-index:2; }
  .tp-audio-controls button { padding:5px 8px; font-size:10px; }
  .tp-left-footer { display:none; }
  .tp-tabs button { padding:10px 0 8px; }
  .tp-news { padding:6px 14px; }
  .tp-center-scroll { padding:12px; }
  .tp-store { grid-column:auto; overflow:hidden; }
  .tp-store-header { padding:10px 12px 8px; font-size:18px; }
  .tp-buy-modes { margin:0 10px 8px; }
  .tp-buy-modes button { padding:6px 2px; }
  .tp-store-list { flex:1; display:block; }
  .tp-layout { grid-template-rows:minmax(0,1fr); }
  .tp-building { padding:8px 10px; gap:8px; }
  .tp-building-icon { flex-basis:40px; height:40px; }
}