/* Room 6 · sword builder. Viewer left, settings right (stacked on phones). Royal palette of the test rooms. */
:root{--bg:#0d0a12;--panel:#1a1220;--panel-hi:#251a2d;--line:rgba(214,173,112,.28);--gold:#d6ad70;--gold-hi:#f0cf93;--ivory:#fff1da;--muted:#cbb7c4;--dim:#9a8796}
html,body{margin:0;background:var(--bg);color:var(--ivory);font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif}
*{box-sizing:border-box}
.builder{display:grid;grid-template-columns:minmax(0,1fr) 420px;height:calc(100vh - var(--tm-h,0px));min-height:520px}
.viewer{position:relative;min-width:0;background:radial-gradient(ellipse at 50% 40%,#231a2b,#0d0a12 70%)}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#stage:active{cursor:grabbing}
.viewer-top{position:absolute;top:12px;left:14px;right:14px;pointer-events:none}
#status{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(13,10,18,.7);border:1px solid var(--line);font-size:13px;color:var(--muted)}
.viewer-buttons{position:absolute;left:14px;bottom:14px;display:flex;gap:8px;flex-wrap:wrap}
.viewer-hint{position:absolute;right:14px;bottom:14px;margin:0;font-size:12px;color:var(--dim)}
button{font:inherit;color:inherit}
.viewer-buttons button,.plain{font-size:14px;padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:rgba(26,18,32,.85);color:var(--ivory);cursor:pointer}
.viewer-buttons button:hover,.plain:hover{border-color:var(--gold)}
.viewer-buttons button[aria-pressed=true]{background:rgba(214,173,112,.18);border-color:var(--gold)}
.side{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);background:var(--panel)}
.side-head{padding:16px 18px 10px;border-bottom:1px solid var(--line)}
.side-head h1{margin:0 0 4px;font-size:22px;color:var(--gold-hi)}
.side-head p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.panel{display:flex;flex-direction:column;min-height:0;flex:1}
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px 0;border-bottom:1px solid var(--line)}
.tabs button{padding:8px 11px;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font-size:14px;cursor:pointer}
.tabs button[aria-selected=true]{color:var(--ivory);border-bottom-color:var(--gold);font-weight:600}
.tab-body{flex:1;overflow:auto;padding:14px 16px 24px;display:flex;flex-direction:column;gap:14px}
.group{display:flex;flex-direction:column;gap:8px}
.group h3{margin:0;font-size:15px;color:var(--gold-hi)}
.num-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.num-row button,.seg button,.mat-grid button{position:relative;padding:7px 0;border-radius:8px;border:1px solid var(--line);background:var(--panel-hi);cursor:pointer;font-size:14px}
.num-row button[aria-pressed=true],.seg button[aria-pressed=true],.mat-grid button[aria-pressed=true]{background:var(--gold);border-color:var(--gold-hi);color:#24142c;font-weight:700}
.num-row .mark{position:absolute;top:1px;right:3px;font-style:normal;font-size:9px;color:var(--gold-hi)}
.num-row button[aria-pressed=true] .mark{color:#24142c}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.seg-small{grid-template-columns:repeat(3,minmax(0,1fr))}
.mat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.mat-grid button{padding:8px 4px;font-size:13.5px}
.ctl{display:grid;grid-template-columns:1fr 150px 48px;align-items:center;gap:10px;font-size:14px}
.ctl-name{color:var(--muted)}
.ctl input[type=range]{width:100%;accent-color:var(--gold)}
.ctl output{text-align:right;font-variant-numeric:tabular-nums;color:var(--ivory);font-size:13px}
.ctl-colour{grid-template-columns:1fr 150px 48px}
.ctl-colour input{width:100%;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.check input{accent-color:var(--gold);width:18px;height:18px}
.hint{margin:0;font-size:13px;line-height:1.5;color:var(--dim)}
.preset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.preset-grid button{position:relative;padding:0;border-radius:10px;border:1px solid var(--line);background:#120d17;overflow:hidden;cursor:pointer;aspect-ratio:96/160}
.preset-grid button:hover{border-color:var(--gold)}
.preset-grid img{display:block;width:100%;height:100%;object-fit:cover}
.preset-grid span{position:absolute;left:5px;top:4px;font-size:11px;color:var(--gold-hi);text-shadow:0 1px 3px #000}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
@media (max-width:900px){
  .builder{grid-template-columns:1fr;grid-template-rows:56vh auto;height:auto}
  .viewer{min-height:56vh}
  .side{border-left:0;border-top:1px solid var(--line)}
  .viewer-hint{display:none}
  .ctl,.ctl-colour{grid-template-columns:1fr 130px 44px}
}