/* Interactive tools (random tools, dice games, converters). Loaded only on pages that use them. */
.tool .btn.ghost{color:var(--ink)}
.tool button{font:inherit;cursor:pointer}
.tool .btn:not(.ghost){border:0}
.tool .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.tool .seg{display:flex;flex-wrap:wrap;gap:6px}
.tool .seg button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:6px 12px;font-weight:650;min-width:52px}
.tool .seg button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#1a1206}
.tool textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);min-height:120px}
.tool .check{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:500}
.tool .check input{width:auto}
.big-result{font-size:clamp(2.2rem,8vw,3.6rem);font-weight:800;line-height:1.1;text-align:center;margin:14px 0 4px;font-variant-numeric:tabular-nums;word-break:break-word}
.big-sub{text-align:center;color:var(--muted);margin:0 0 8px;font-size:.92rem}
.result-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0;padding:0;list-style:none}
.result-list li{background:var(--surface-2);border-radius:8px;padding:4px 10px;font-weight:700;font-variant-numeric:tabular-nums}
.dice-faces{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0;padding:0;list-style:none}
.dice-faces li{width:54px;height:54px;border-radius:12px;background:var(--surface-2);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums}
.dice-faces li.drop{opacity:.4;text-decoration:line-through}
.dice-faces li.sel{border-color:var(--brand);background:var(--quick)}
.dice-faces button{width:54px;height:54px;border-radius:12px;background:var(--surface-2);border:2px solid var(--line);font-size:1.3rem;font-weight:800;color:var(--ink)}
.dice-faces button.held{border-color:var(--brand);background:var(--quick)}
.rolling{animation:shake .45s ease}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.rolling,.coin.flip{animation:none!important}}
.coin{width:150px;height:150px;margin:10px auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem;color:#1a1206;background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b 60%,#b45309);box-shadow:inset 0 0 0 6px rgba(255,255,255,.25),0 6px 18px rgba(0,0,0,.18);text-align:center;padding:10px}
.coin.flip{animation:flip .6s ease}
@keyframes flip{0%{transform:rotateY(0)}100%{transform:rotateY(1080deg)}}
.wheel-wrap{position:relative;max-width:420px;margin:8px auto}
.wheel-wrap canvas{width:100%;height:auto;display:block}
.wheel-pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid var(--ink);filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.tiles{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin:10px 0}
.tiles button{aspect-ratio:1/1.3;border-radius:8px;border:2px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:1.15rem;font-weight:800}
.tiles button.down{background:transparent;opacity:.35}
.tiles button.pick{border-color:var(--brand);background:var(--quick)}
.tiles button:disabled{cursor:default}
.conv-rate{font-size:.9rem;color:var(--muted);margin:6px 0 0}
.mini-bars{display:grid;gap:3px;margin:10px 0;font-size:.82rem}
.mini-bars div{display:grid;grid-template-columns:44px 1fr 64px;gap:8px;align-items:center}
.mini-bars i{display:block;height:12px;border-radius:3px;background:var(--b1)}
.mini-bars div.hit i{background:var(--brand-2)}
.mini-bars b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.hist{font-size:.85rem;color:var(--muted);margin:6px 0 0;text-align:center}
@media (max-width:560px){.tiles{gap:4px}.tiles button{font-size:1rem}.dice-faces li,.dice-faces button{width:46px;height:46px}}