/* ==========================================================
   UNITED MOVEMENT — SHOGUN PANEL
   Single Source of Truth — CLEAN VERSION
   ========================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --um-bg: #050606;
  --um-bg-2: #07090a;
  --um-panel: rgba(0,0,0,0.65);

  --um-border: rgba(0,255,102,0.35);
  --um-border-strong: rgba(0,255,102,0.55);

  --um-green: #00ff66;
  --um-green-dim: rgba(0,255,102,0.75);
  --um-text: rgba(0,255,102,0.92);
  --um-text-dim: rgba(0,255,102,0.75);

  --um-font: "Share Tech Mono", monospace;

  --um-radius: 12px;
  --um-radius-sm: 8px;
  --um-shadow: 0 10px 30px rgba(0,0,0,0.55);
  --um-glow: 0 0 10px rgba(0,255,102,0.18);

  --um-maxw: 980px;
  --um-pad: 18px;
  --um-gap: 10px;

  --um-title: clamp(18px, 2vw, 22px);
  --um-body: 13px;
  --um-line: 1.55;
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }

body{
  font-family: var(--um-font);
  font-size: var(--um-body);
  line-height: var(--um-line);
  color: var(--um-text);
  background:
    radial-gradient(1200px 700px at 50% 10%, rgba(0,255,102,0.08), transparent 55%),
    linear-gradient(180deg, var(--um-bg), var(--um-bg-2));
  overflow-x:hidden;
}

/* ---------- Typography ---------- */
h1,h2,h3{
  margin:0 0 12px 0;
  letter-spacing:.08em;
  text-transform:uppercase;
}
h1{ font-size:calc(var(--um-title) + 1px); }
h2{ font-size:var(--um-title); }
h3{ font-size:13px; }

p{ margin:8px 0; color:var(--um-text-dim); }
a{ color:var(--um-green); text-decoration:none; }

/* ---------- Main Panel ---------- */
.um-container{
  width:min(var(--um-maxw), calc(100% - 24px));
  margin:32px auto;
  padding:var(--um-pad);
  background:var(--um-panel);
  border:1px solid var(--um-border);
  border-radius:var(--um-radius);
  box-shadow:var(--um-shadow), var(--um-glow);
}

/* ---------- Header Navigation ---------- */
.um-header-nav{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px,1fr));
  gap:8px;

  width:min(var(--um-maxw), calc(100% - 24px));
  margin:16px auto;
  padding:12px;

  background:rgba(0,0,0,0.55);
  border:1px solid var(--um-border);
  border-radius:var(--um-radius);
}
.um-header-nav a{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:8px 12px;
  min-height:36px;

  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--um-text);
  background:rgba(0,0,0,0.45);

  border:1px solid var(--um-border);
  border-radius:var(--um-radius-sm);

  box-shadow:
    inset 0 0 0 rgba(0,0,0,0),
    0 0 0 rgba(0,0,0,0);

  transition:
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    transform .08s ease;
}
.um-header-nav a:hover{
  background:rgba(0,0,0,0.70);
  border-color:var(--um-border-strong);
  box-shadow:0 0 14px rgba(0,255,102,0.15);
  transform:translateY(-1px);
}

.um-header-nav a:active{
  transform:translateY(0);
  box-shadow:0 0 6px rgba(0,255,102,0.12);
}
grid-template-columns: repeat(auto-fit, minmax(110px,1fr));

/* ---------- Buttons ---------- */
.um-button,
button,
input[type="submit"]{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;

  font-family:var(--um-font);
  letter-spacing:.10em;
  text-transform:uppercase;

  border:1px solid var(--um-border-strong);
  border-radius:var(--um-radius-sm);
  background:rgba(0,0,0,0.55);
  color:var(--um-text);

  cursor:pointer;
  transition:.12s ease;
}

.um-button:hover{
  background:rgba(0,0,0,0.75);
  box-shadow:0 0 16px rgba(0,255,102,0.15);
}

/* ---------- Play Hub ---------- */
.playhub-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:20px;
}

/* ---------- Forms ---------- */
.um-form{
  display:grid;
  gap:12px;
}

label{
  font-size:13px;
  letter-spacing:.10em;
  text-transform:uppercase;
}

input,select,textarea{
  width:100%;
  min-height:42px;
  padding:10px 12px;

  background:rgba(0,0,0,0.65);
  border:1px solid var(--um-border);
  border-radius:var(--um-radius-sm);

  font-family:var(--um-font);
  color:var(--um-text);
}

input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--um-border-strong);
  box-shadow:0 0 0 2px rgba(0,255,102,0.15);
}
.form-wide {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}


/* ---------- Grid Helper ---------- */
.um-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--um-gap);
}

@media (min-width:960px){
  .um-grid{ grid-template-columns:repeat(7,1fr); }
}

@media (max-width:520px){
  .um-grid{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- Calendar ---------- */
.regnum-cycle{
  display:grid;
  grid-template-columns:repeat(14,1fr);
  gap:6px;
}

@media (max-width:768px){
  .regnum-cycle{ grid-template-columns:repeat(7,1fr); }
}

.regnum-day{
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--um-green);
  background:#000;
  font-size:13px;
}

/* ---------- Footer ---------- */
.um-footer-left{
  position:fixed;
  left:14px;
  bottom:12px;
  font-size:13px;
  letter-spacing:.10em;
  color:rgba(0,255,102,0.55);
  pointer-events:none;
}
/* FORCE FORM CENTERING */
.um-container > form,
.um-container .um-form {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.um-container > form,
.um-container .um-form {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
/* ===============================
   HEADER NAV — BUTTON STYLE
   =============================== */

.um-nav-container{
  width: min(var(--um-maxw), calc(100% - 24px));
  margin: 16px auto;
  padding: 12px;

  background: rgba(0,0,0,0.55);
  border: 1px solid var(--um-border);
  border-radius: var(--um-radius);
}

.um-nav-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.um-nav-grid .um-btn{
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  padding: 8px 12px;

  font-family: var(--um-font);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: var(--um-text);
  background: rgba(0,0,0,0.55);

  border: 1px solid var(--um-border);
  border-radius: var(--um-radius-sm);

  text-decoration: none;

  transition:
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    transform .08s ease;
}

.um-nav-grid .um-btn:hover{
  background: rgba(0,0,0,0.75);
  border-color: var(--um-border-strong);
  box-shadow: 0 0 16px rgba(0,255,102,0.18);
  transform: translateY(-1px);
}
/* ===============================
   CENTERED CONTENT BLOCK
   =============================== */

.um-block {
  width: 100%;
  max-width: 640px;          /* clean midden, zelfde als forms */
  margin: 32px auto;
  padding: 20px;

  background: rgba(0,0,0,0.55);
  border-radius: var(--um-radius);
}
.um-block.outlined {
  border: 1px solid var(--um-border);
  box-shadow: var(--um-shadow), var(--um-glow);
}
/* ===============================
   CENTERED SELECT / INPUT STRIP
   =============================== */

.um-form select,
.um-form input[type="text"],
.um-form input[type="password"],
.um-form input[type="number"] {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
/* =========================================================
   UM AUTH / REGISTER / FORM – SINGLE SOURCE OF TRUTH
   ========================================================= */

/* Container alignment (zoals MY.CARD / PLAY.HUB) */
.um-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px;
}

/* Form wrapper */
.um-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

/* Panels (incognito game name block etc.) */
.um-panel {
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(0, 255, 102, 0.35);
    border-radius: 12px;
    padding: 14px 16px;
}

/* Card-style panel (MY.CARD consistency) */
.um-card-panel {
    background: rgba(0, 0, 0, 0.90);
}

/* Labels */
.um-label {
    font-size: 12px;
    letter-spacing: 0.12em;
    opacity: 0.85;
}

/* Text blocks */
.um-text {
    opacity: 0.8;
    line-height: 1.4;
}

/* Inputs & selects – BLACK, not grey */
.um-form select,
.um-form input[type="password"],
.um-form input[type="text"] {
    width: 100%;
    background: #000;
    color: #00ff66;
    border: 1px solid rgba(0, 255, 102, 0.35);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.um-form select:focus,
.um-form input:focus {
    border-color: #00ff66;
    box-shadow: 0 0 0 1px rgba(0,255,102,0.4);
}

/* Prevent browser grey dropdowns */
.um-form select option {
    background: #000;
    color: #00ff66;
}

/* Monospace values (game name preview) */
.um-mono,
.um-value.um-mono {
    font-family: "Share Tech Mono", monospace;
    letter-spacing: 0.04em;
}

/* Inline button – replaces white bar */
.um-btn,
.um-btn-inline {
    align-self: center;
    background: #000;
    color: #00ff66;
    border: 1px solid rgba(0, 255, 102, 0.5);
    border-radius: 10px;
    padding: 10px 22px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.12em;
    transition: all 0.15s ease;
    width: auto;
    max-width: 100%;
}

.um-btn:hover,
.um-btn-inline:hover {
    background: rgba(0,255,102,0.08);
    box-shadow: 0 0 12px rgba(0,255,102,0.35);
}

/* Remove any full-width button overrides */
.um-btn {
    width: auto !important;
}

/* Error panel */
.um-error {
    border-color: rgba(255, 80, 80, 0.6);
    color: #ff6b6b;
}

/* Titles */
.um-title {
    text-align: left;
    margin-bottom: 16px;
}

/* Small screens */
@media (max-width: 640px) {
    .um-container {
        padding: 20px 12px;
    }

    .um-btn,
    .um-btn-inline {
        padding: 12px 18px;
    }
}