/* style.css — 巨影戦記 金星のメガ UI skin
   - dark metal base
   - copper accent (title/buttons)
   - lightning glow
   - readable mono output panel
*/

:root{
  --bg0:#07060a;
  --bg1:#0d0b12;
  --panel:#13101a;
  --panel2:#1b1624;
  --line:#2d2538;
  --line2:#3a2f47;

  --text:#f2eef6;
  --muted:#cbbfd7;
  --dim:#9a8aad;

  --copper0:#d7a25b;
  --copper1:#b97933;
  --copper2:#8a4b20;

  --steel0:#6c7380;
  --steel1:#454b57;

  --glow:#b78cff;
  --glow2:#7cc5ff;

  --radius:14px;
  --radius2:18px;

  --shadow: 0 16px 40px rgba(0,0,0,.55);
  --shadow2: 0 10px 26px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(183,140,255,.14), transparent 55%),
    radial-gradient(900px 600px at 70% 20%, rgba(124,197,255,.10), transparent 60%),
    radial-gradient(1000px 800px at 50% 100%, rgba(215,162,91,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* chrome frame */
.chrome{
  position:relative;
  min-height:100%;
  padding: 14px;
}
.chrome::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(215,162,91,.08), transparent 28%),
    linear-gradient(0deg, rgba(215,162,91,.06), transparent 35%);
  pointer-events:none;
}

/* header */
.header{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding: 18px 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(183,140,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(24,18,31,.92), rgba(16,12,22,.92));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.header::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(450px 120px at 35% 0%, rgba(215,162,91,.20), transparent 60%),
    radial-gradient(400px 140px at 80% 10%, rgba(124,197,255,.12), transparent 60%);
  filter: blur(0px);
  opacity:.9;
  pointer-events:none;
}
.brand{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.brand .title{
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(22px, 3.2vw, 34px);
  color: #f7e3c3;
  text-shadow: 0 3px 14px rgba(0,0,0,.65);
}
.brand .subtitle{
  font-weight: 700;
  color: var(--muted);
  opacity:.92;
}
.header-actions{
  position:relative;
  z-index:1;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* layout grid */
.main{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 12px;
}
@media (max-width: 900px){
  .main{grid-template-columns: 1fr;}
}

/* panels */
.panel{
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  background:
    linear-gradient(180deg, rgba(25,20,33,.92), rgba(14,11,20,.92));
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.panel .panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(600px 80px at 30% 0%, rgba(215,162,91,.12), transparent 60%),
    linear-gradient(180deg, rgba(33,26,44,.75), rgba(22,17,30,.75));
}
.panel .panel-title{
  font-weight: 900;
  letter-spacing:.02em;
}
.panel .panel-body{
  padding: 12px 14px 14px;
}

/* accordion */
.accordion{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(10,8,14,.55);
}
.acc-item + .acc-item{border-top:1px solid var(--line)}
.acc-button{
  width:100%;
  text-align:left;
  padding: 12px 12px;
  background:
    linear-gradient(180deg, rgba(215,162,91,.14), rgba(20,16,26,.0));
  color: var(--text);
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.acc-button .acc-label{font-weight: 900}
.acc-button .acc-chevron{
  opacity:.85;
  transform: rotate(0deg);
  transition: transform .18s ease;
}
.acc-item[data-open="true"] .acc-chevron{transform: rotate(180deg);}
.acc-content{
  padding: 12px;
  border-top: 1px solid var(--line);
  display:none;
}
.acc-item[data-open="true"] .acc-content{display:block;}

/* form fields */
.field{display:grid; gap:6px; margin: 10px 0;}
.field label{font-weight:800; color: #f3e6d2;}
.input, select, textarea{
  width:100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: rgba(10,8,14,.55);
  color: var(--text);
  outline: none;
}
textarea.input{min-height:84px; resize:vertical;}
.input:focus, select:focus, textarea:focus{
  border-color: rgba(183,140,255,.75);
  box-shadow: 0 0 0 3px rgba(183,140,255,.18);
}

/* segmented race buttons */
.segmented{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 8px;
}
.seg-btn{
  flex: 1 1 120px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: rgba(13,10,18,.55);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
}
.seg-btn[data-active="true"]{
  border-color: rgba(215,162,91,.85);
  box-shadow: 0 0 0 3px rgba(215,162,91,.18);
  background: linear-gradient(180deg, rgba(215,162,91,.22), rgba(13,10,18,.35));
}
.small-info{
  margin-top: 10px;
  display:grid;
  gap:6px;
  color: var(--muted);
  font-weight:700;
}
.small-info .row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  border: 1px dashed rgba(203,191,215,.25);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(0,0,0,.12);
}
.small-info .row span:first-child{color: var(--dim); font-weight:800;}

/* ability grid */
.ability-grid{
  margin-top: 8px;
  display:grid;
  gap: 10px;
}
.ability-row{
  display:grid;
  grid-template-columns: 140px 1fr 110px;
  gap:10px;
  align-items:center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(58,47,71,.75);
  background:
    radial-gradient(600px 80px at 30% 0%, rgba(124,197,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(10,8,14,.55), rgba(0,0,0,.10));
}
@media (max-width: 900px){
  .ability-row{grid-template-columns: 1fr;}
}
.ability-name{font-weight: 900; color: #f3e6d2;}
.rolls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.roll-chip{
  min-width: 44px;
  text-align:center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(203,191,215,.25);
  background: rgba(0,0,0,.20);
  cursor:pointer;
  user-select:none;
  font-weight: 900;
}
.roll-chip[data-picked="true"]{
  border-color: rgba(183,140,255,.85);
  box-shadow: 0 0 0 3px rgba(183,140,255,.16);
  background: linear-gradient(180deg, rgba(183,140,255,.22), rgba(0,0,0,.18));
}
.final-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(215,162,91,.35);
  background: rgba(0,0,0,.18);
  font-weight: 900;
}
.final-box .final{color:#f7e3c3}

/* checklist */
.checklist{
  display:grid;
  gap: 8px;
}
.checklist-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
@media (max-width: 900px){
  .checklist-grid{grid-template-columns: 1fr;}
}
.check{
  display:flex;
  gap:8px;
  align-items:flex-start;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(58,47,71,.65);
  background: rgba(0,0,0,.14);
}
.check input{margin-top: 3px;}
.check .meta{display:flex; flex-direction:column; gap:2px;}
.check .meta .name{font-weight: 900;}
.check .meta .sub{font-size: 12px; color: var(--muted); opacity:.9;}

/* buttons */
.btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(58,47,71,.9);
  background: rgba(14,11,20,.55);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
  letter-spacing:.02em;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform: translateY(1px)}
.btn.primary{
  border-color: rgba(215,162,91,.85);
  background: linear-gradient(180deg, rgba(215,162,91,.35), rgba(138,75,32,.25));
  color: #fff3dc;
  box-shadow: 0 0 0 3px rgba(215,162,91,.14);
}
.btn.ghost{
  border-color: rgba(203,191,215,.30);
  background: transparent;
  color: var(--muted);
}
.btn.steel{
  border-color: rgba(108,115,128,.85);
  background: linear-gradient(180deg, rgba(108,115,128,.35), rgba(69,75,87,.25));
}
.btnbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* right output */
.sheet{
  padding: 14px;
  border: 1px solid rgba(215,162,91,.30);
  border-radius: var(--radius2);
  background:
    radial-gradient(700px 280px at 35% 0%, rgba(215,162,91,.10), transparent 60%),
    linear-gradient(180deg, rgba(10,8,14,.55), rgba(0,0,0,.16));
}
.sheet pre{
  margin:0;
  white-space:pre-wrap;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #f0ebf6;
}
.output-area{
  margin-top: 12px;
}
#output{
  width:100%;
  min-height: 380px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(58,47,71,.85);
  background: rgba(0,0,0,.20);
  color: #f4f0f8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  outline:none;
}
#output:focus{
  border-color: rgba(124,197,255,.70);
  box-shadow: 0 0 0 3px rgba(124,197,255,.16);
}
.hint{
  margin-top: 10px;
  color: var(--muted);
  opacity: .92;
  font-weight: 700;
}

.footer-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* tiny toast */
.toast{
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.72);
  color: var(--text);
  border: 1px solid rgba(215,162,91,.35);
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  z-index: 9999;
}