/* ====================================================================
   taming.css  -  Dragon's-Prophet-style taming minigame for Zoids.
   Themeable via --t-primary / --t-secondary (set from variant colours).
   ==================================================================== */
.taming{
  --t-primary:#2f6fb0; --t-secondary:#cfe4ff;
  --t-bg:#0b1016; --t-panel:#141c24; --t-line:#27333d; --t-ink:#c9d4dc;
  --t-good:#e8c14a; --t-grip:#d7503f;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--t-ink);
  background:radial-gradient(120% 90% at 50% -10%,
      color-mix(in srgb,var(--t-primary) 26%,#0a0f14),#080c11 70%);
  border:1px solid var(--t-line);border-radius:10px;padding:18px;position:relative;
  user-select:none;
}
.taming__head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.taming__name{font-weight:700;font-size:18px;letter-spacing:.02em}
.taming__sub{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  color:#7d8b97;letter-spacing:.08em;text-transform:uppercase}

.taming__bars{display:grid;gap:8px;margin-bottom:14px}
.tbar{height:14px;border:1px solid var(--t-line);border-radius:999px;background:#0a0f14;
  overflow:hidden;position:relative}
.tbar__fill{height:100%;width:0;transition:width .08s linear}
.tbar--good .tbar__fill{background:linear-gradient(90deg,#b8902a,var(--t-good))}
.tbar--grip .tbar__fill{background:linear-gradient(90deg,#8f2f23,var(--t-grip))}
.tbar__label{position:absolute;left:8px;top:-1px;font-size:9px;line-height:16px;
  letter-spacing:.14em;text-transform:uppercase;color:#06090c;font-weight:700;mix-blend-mode:overlay}

.taming__arena{position:relative;height:320px;display:flex;align-items:center;
  justify-content:center;cursor:none;touch-action:none}
.ring{position:absolute;border-radius:50%;border:2px solid;transform:translate(-50%,-50%);
  left:50%;top:50%;pointer-events:none}
.ring--outer{border-color:color-mix(in srgb,var(--t-primary) 60%,#33414c)}
.ring--sweet{border-color:var(--t-secondary);box-shadow:0 0 24px -6px var(--t-secondary) inset}
.ring--mid{border-color:#2b3742;border-style:dashed;opacity:.6}
.crosshair{position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);
  pointer-events:none;opacity:.5}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:var(--t-secondary)}
.crosshair::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.crosshair::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.dot{position:absolute;width:20px;height:20px;border-radius:50%;left:50%;top:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff,var(--t-primary));
  box-shadow:0 0 16px -2px var(--t-primary),0 0 0 2px rgba(255,255,255,.25);
  transition:box-shadow .1s}
.dot.is-centered{box-shadow:0 0 26px 2px var(--t-good),0 0 0 2px var(--t-good)}

.taming__yank{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(8,12,17,.55);backdrop-filter:blur(1px);border-radius:8px}
.taming__yank.is-on{display:flex;animation:shake .35s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.yank__msg{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-grip);
  font-weight:700;margin-bottom:8px}
.yank__key{font-size:64px;font-weight:800;line-height:1;color:#fff;
  text-shadow:0 4px 30px var(--t-grip);font-family:ui-monospace,Menlo,Consolas,monospace}
.yank__count{margin-top:10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  color:var(--t-ink)}
.yank__pips{display:flex;gap:6px;margin-top:8px}
.yank__pip{width:12px;height:12px;border-radius:50%;border:1px solid var(--t-line);background:#0a0f14}
.yank__pip.on{background:var(--t-good);border-color:var(--t-good)}

.taming__result{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(6,9,13,.86);border-radius:9px;text-align:center;padding:24px}
.taming__result.is-on{display:flex;animation:fadein .3s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.result__title{font-size:30px;font-weight:800;letter-spacing:.02em}
.result__title.win{color:var(--t-good)}
.result__title.lose{color:var(--t-grip)}
.result__sub{color:#9fb0bc;margin-top:6px;max-width:42ch}
.result__cooldown{margin-top:10px;font-family:ui-monospace,monospace;font-size:12px;color:#7d8b97}

.taming__hint{margin-top:10px;font-size:12px;color:#7d8b97;text-align:center}
.taming.is-disabled .taming__arena{filter:grayscale(.6) brightness(.7)}

/* ---- playtest harness ---- */
.harness{max-width:980px;margin:24px auto;padding:0 16px;
  font-family:"Segoe UI",Roboto,Arial,sans-serif;color:#c9d4dc}
.harness h1{font-family:"Arial Narrow","Roboto Condensed",sans-serif;letter-spacing:.06em;
  font-weight:700;font-size:26px}
.harness__grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.panel{background:#10171f;border:1px solid #27333d;border-radius:8px;padding:14px}
.panel h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7d8b97;margin:0 0 12px}
.ctl{margin-bottom:12px}
.ctl label{display:flex;justify-content:space-between;font-size:12px;color:#9fb0bc;margin-bottom:4px}
.ctl input[type=range]{width:100%}
.ctl select,.ctl input[type=text]{width:100%;background:#0a0f14;border:1px solid #27333d;
  color:#c9d4dc;border-radius:4px;padding:7px}
.readout{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:#7d8b97;
  line-height:1.7;background:#0a0f14;border:1px solid #1c2731;border-radius:4px;padding:10px}
.readout b{color:#c9d4dc}
.btnrow{display:flex;gap:8px;margin-top:8px}
.btn{background:#16212c;border:1px solid #27333d;border-radius:5px;padding:9px 16px;cursor:pointer;
  color:#c9d4dc;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.btn--go{background:var(--go,#2f6fb0);border-color:var(--go,#2f6fb0);color:#06090c;font-weight:700}
.tuning summary{cursor:pointer;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7d8b97}
.tuning .ctl label{font-size:11px}
.log{font-family:ui-monospace,monospace;font-size:12px;max-height:140px;overflow:auto;margin-top:12px}
.log div{padding:2px 0;color:#9fb0bc}
.log .win{color:var(--t-good,#e8c14a)}
.log .lose{color:#d7503f}
@media(max-width:760px){.harness__grid{grid-template-columns:1fr}}

/* on-screen d-pad (touch / click fallback; desktop uses WASD keys) */
.tame-dpad{position:absolute;right:12px;bottom:12px;width:104px;height:104px;z-index:5;
  touch-action:none;user-select:none;opacity:.82}
.tame-dpad__b{position:absolute;width:33px;height:33px;border-radius:8px;border:1px solid #2c3a45;
  background:#16212c;color:#9fb0bc;font:700 13px/1 system-ui,sans-serif;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.tame-dpad__b:active{background:var(--t-primary,#2f6fb0);color:#06090c;border-color:var(--t-primary,#2f6fb0)}
.tame-dpad__u{left:35px;top:0}
.tame-dpad__l{left:0;top:35px}
.tame-dpad__r{right:0;top:35px}
.tame-dpad__d{left:35px;bottom:0}