/* ============================================================
   Skill Simulator styles — site dark-gold theme wearing RAIN NIAR's
   in-game icon-grid LAYOUT (columns = class tiers, rows = skill tiers,
   icon tiles + level numerals + prerequisite connector lines).
   ============================================================ */

/* ---------- index (character grid) ---------- */
.ss-intro{color:#cdbb95; font-family:"Noto Serif Thai"; margin:0 0 16px;}
.ss-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px;}   /* 12 characters = 2 rows of 6 */
@media(max-width:680px){ .ss-grid{grid-template-columns:repeat(3,1fr);} }   /* mobile: 4 rows of 3 */
.ss-tile{display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 7px; border-radius:11px; text-align:center;
  background:linear-gradient(180deg,var(--paper),var(--paper-deep)); border:1.5px solid var(--paper-edge);
  box-shadow:0 5px 14px rgba(0,0,0,.45); color:var(--ink); transition:transform .08s ease-out,box-shadow .08s ease-out; text-decoration:none; will-change:transform;}
.ss-tile:hover{transform:translateY(-3px) scale(1.04); box-shadow:0 12px 24px rgba(0,0,0,.6); color:var(--ink);}
.ss-tile .ss-ico{font-size:32px; color:var(--gold);}
img.ss-ico{width:100%; max-width:100px; aspect-ratio:1/1; height:auto; object-fit:cover; border-radius:9px;
  border:2px solid var(--wood-line); box-shadow:0 3px 9px rgba(0,0,0,.4); display:block;}   /* character bust portrait card */
.ss-tile:hover img.ss-ico{border-color:var(--gold);}
.ss-tile .ss-nm{display:flex; flex-direction:column; align-items:center; line-height:1.1; color:#42301a;}
.ss-tile .ss-nm .nm-th{font-family:"Noto Serif Thai"; font-weight:700; font-size:.82rem;}   /* Thai on top */
.ss-tile .ss-nm .nm-en{font-family:"Cinzel"; font-weight:700; font-size:.66rem; letter-spacing:.04em; color:#7d5a27; margin-top:1px;}   /* English below */
.ss-tile .ss-go{font-family:"Cinzel"; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:#7d281d;}
.ss-tile.off{cursor:not-allowed; background:linear-gradient(180deg,#2c2014,#1d140c); border-color:var(--wood-line);}
.ss-tile.off .ss-nm{color:#cbb78f;} .ss-tile.off .ss-ico{color:#7d7264;}
.ss-tile .ss-soon{font-family:"Cinzel"; font-size:.52rem; letter-spacing:.08em; text-transform:uppercase; color:#9a886a;}

/* ---------- planner: intro / how-to ---------- */
.ss-howto{background:linear-gradient(180deg,rgba(30,21,12,.92),rgba(15,10,5,.94)); border:1px solid var(--wood-line);
  border-radius:12px; padding:4px 16px; margin:0 0 14px; color:var(--tx);}
.ss-howto summary{font-family:"Cinzel"; font-weight:700; letter-spacing:.08em; color:var(--gold-bright); cursor:pointer; padding:9px 0;}
.ss-howto ul{margin:2px 0 12px; padding-left:1.2em; font-family:"Noto Serif Thai"; font-size:.9rem; color:#d8cdb4;}
.ss-howto li{margin:4px 0;}
.ss-back{display:inline-block; margin:0 0 14px; color:var(--gold-bright); font-family:"Noto Serif Thai"; font-weight:600;}
.sim-err{color:#f6c454; font-family:"Noto Serif Thai"; padding:20px; text-align:center;}

/* ---------- planner: header + global bar ---------- */
.sim-ph{background:rgba(168,57,43,.16); border:1px solid #8a5e15; color:#f0d6a4; border-radius:10px; padding:10px 14px;
  font-family:"Noto Serif Thai"; font-size:.82rem; margin:0 0 14px;}
.sim-note{font-family:"Noto Serif Thai"; font-size:.76rem; color:#cdbb95; margin:0 0 14px; padding:8px 13px;
  background:rgba(255,255,255,.03); border:1px solid var(--wood-line); border-radius:9px;}
.sim-head{margin:0 0 12px;}
.sim-title{font-family:"Cinzel","Noto Serif Thai"; font-weight:900; font-size:1.4rem; color:var(--gold-bright);}
.sim-title .sim-sub{font-family:"Noto Serif Thai"; font-weight:400; font-size:.85rem; color:#cdbb95; margin-left:8px;}
.sim-classes{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; color:#d8cdb4; font-family:"Noto Serif Thai"; font-size:.85rem;}
.sim-cls{font-family:"Cinzel","Noto Serif Thai",serif;}   /* breadcrumb class names on the site heading font (Thai falls back to Noto Serif Thai) */
.sim-cls b{font-family:"Cinzel"; color:var(--gold); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; margin-right:4px;}
.sim-arrow{color:#7d7264;}
.sim-bar{display:flex; flex-wrap:nowrap; align-items:center; gap:12px; padding:12px 14px; margin:0 0 16px;
  background:linear-gradient(180deg,#2c2014,#1d140c); border:1px solid var(--wood-line); border-radius:12px;}
.sim-charsel, .sim-lvl, .sim-actions{flex:none;}   /* fixed items never shrink — the auto margin on .sim-pts absorbs slack */
.sim-lvl{display:flex; align-items:center; gap:6px; font-family:"Cinzel"; font-size:.72rem; letter-spacing:.06em; color:var(--tx); margin-left:-5px;}
.sim-lvl input{width:58px; text-align:center; font-family:"Cinzel"; font-weight:700; font-size:1rem; background:#160f09;
  color:var(--gold-bright); border:1px solid var(--wood-line); border-radius:8px; padding:6px;
  -moz-appearance:textfield; appearance:textfield;}   /* hide native spinner (we have − / + buttons); value stays typeable */
/* (level nudge is on .sim-lvl below) */
.sim-lvl input::-webkit-outer-spin-button,
.sim-lvl input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.lvbtn{width:28px; height:28px; border-radius:8px; border:1px solid var(--wood-line); background:#3a2a1c; color:var(--gold-bright); cursor:pointer; font-size:1rem; line-height:1;}
.lvbtn:hover{border-color:var(--gold);}
.sim-pts{display:flex; gap:13px; flex-wrap:nowrap; flex:none; margin-left:auto; margin-right:28px;}
.stat{display:flex; flex-direction:column; align-items:center;}
.stat .stat-l{font-family:"Noto Serif Thai"; font-size:.6rem; color:#b39e7d;}
.stat b{font-family:"Cinzel"; font-size:1.15rem; color:var(--gold-bright); font-variant-numeric:tabular-nums;}
.stat b.neg{color:#ff8a6a;}
.sim-actions{display:flex; gap:8px;}
.sim-actions button{display:inline-flex; align-items:center; gap:7px; font-family:"Cinzel"; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; padding:7px 12px;
  border-radius:9px; cursor:pointer; border:1.5px solid var(--gold); background:rgba(24,15,7,.5); color:var(--gold-bright);}
.sim-actions button:hover{background:rgba(246,196,84,.12);}
.reset-ico{width:22px; height:22px; object-fit:contain; display:block; flex:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));}   /* in-game reset-skill item icon */

/* ---------- THE ICON GRID (RAIN NIAR layout) ---------- */
.simgrid-wrap{position:relative; overflow-x:auto; padding-bottom:6px;}
.simlinks{position:absolute; left:0; top:0; pointer-events:none; z-index:1; overflow:visible;}
.simlinks path{fill:none; stroke:#b06a3a; stroke-width:2.5; opacity:.85;}
.simlinks path.met{stroke:var(--gold-bright); stroke-width:3; opacity:1; filter:drop-shadow(0 0 3px rgba(246,196,84,.55));}
.simlinks circle{fill:#b06a3a; stroke:#160f09; stroke-width:1;}
.simlinks circle.met{fill:var(--gold-bright);}
.simgrid{display:grid; grid-template-columns:repeat(4,minmax(198px,1fr)); gap:14px; position:relative; z-index:2; min-width:820px;}
.col{display:flex; flex-direction:column; background:linear-gradient(180deg,rgba(30,21,12,.94),rgba(15,10,5,.95));
  border:1px solid var(--wood-line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden;}
.col-h{display:flex; align-items:center; gap:8px; padding:9px 12px; flex-wrap:wrap;
  background:linear-gradient(180deg,#3a2a1c,#241a12); border-bottom:2px solid var(--gold);}
.col-tag{font-family:"Cinzel"; font-weight:700; font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; color:#2a1d08;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); padding:2px 7px; border-radius:999px;}
.col-name{font-family:"Cinzel","Noto Serif Thai",serif; font-weight:700; color:var(--paper); font-size:.8rem; flex:1; min-width:60px;}
/* per-tier class icon after the class name in EVERY column header (let the name shrink so the icon sits right after it) */
.col-name{flex:0 1 auto;}
.col-charico{width:24px; height:24px; object-fit:contain; flex:none; margin-left:6px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
.col-meta{display:flex; align-items:center; gap:7px; width:100%; margin-top:2px;}
.col-count{font-family:"Cinzel"; font-size:.62rem; color:#cdbb95;}
.col-count b{font-size:.85rem; color:var(--gold-bright); font-variant-numeric:tabular-nums;}
.col-clear{margin-left:auto; font-family:"Cinzel"; font-size:.48rem; letter-spacing:.06em; text-transform:uppercase; color:#cbb78f;
  background:rgba(255,255,255,.05); border:1px solid var(--wood-line); border-radius:7px; padding:3px 7px; cursor:pointer;}
.col-clear:hover{border-color:var(--gold); color:var(--gold-bright);}
.col-cpool{font-family:"Cinzel"; font-size:.5rem; color:#f0d6a4; border:1px solid #8a5e15; border-radius:999px; padding:1px 6px;}
.col-rows{display:flex; flex-direction:column; gap:9px; padding:12px 10px; align-items:flex-start; flex:1;}
.row{display:flex; gap:10px; justify-content:flex-start; flex-wrap:wrap; width:100%;}
.row-empty{height:2px;}

/* skill = a strip of PER-LEVEL icon cells (each cell shows that level's own art, numeral baked in) */
.skill{position:relative; display:flex; align-items:center; gap:6px;}
.cells{display:flex; align-items:center; gap:3px;}
/* GAME frame by skill type (orange wooden = Active, gray iron = Passive); icon centered inside */
.cell{width:30px; height:30px; min-width:30px; display:grid; place-items:center; cursor:pointer; position:relative;}
.cell::before{content:""; position:absolute; inset:0; background:center/100% 100% no-repeat; filter:brightness(.85); z-index:0;}  /* frame plate, dimmed a little */
.skill.active .cell::before{background-image:url('frames/active.png');}
.skill.passive .cell::before{background-image:url('frames/passive.png');}
.cell img{width:81%; height:81%; object-fit:contain; display:block; position:relative; z-index:1; filter:grayscale(.85) brightness(.62);}  /* 81% = measured inner window (~52/64) so the icon sits inside the frame border with even margin */
.cell .cell-ph{color:#cdbb95; font-size:.85rem;}
.cell.on img{filter:none;}                                  /* learned = full colour */
.cell.on{filter:drop-shadow(0 0 4px rgba(246,196,84,.75));} /* learned = gold glow on the frame */
.skill.locked .cell{cursor:not-allowed; opacity:.72;}
.skill.locked .cell img{filter:grayscale(1) brightness(.45);}
/* green hover overlay (game asset) — removed on mouse-out, never blocks clicks or shifts the cell */
.cell:hover::after{content:""; position:absolute; inset:0; background:url('frames/hover.png') center/100% 100% no-repeat; opacity:.45; pointer-events:none; z-index:2;}
/* "available to level up" cue (RAIN NIAR-style) — red "+" badge on the exact next-learnable cell of a raisable skill */
.skill.raisable .cell.next{filter:drop-shadow(0 0 5px rgba(255,128,60,.85));}
.skill.raisable .cell.next img{filter:grayscale(.35) brightness(.92);}   /* available = noticeably less greyed than a locked skill */
.skill.raisable .cell.next::after{content:""; position:absolute; top:-3px; right:-6px; left:auto; bottom:auto; z-index:5; width:18px; height:18px;
  box-sizing:border-box; border:1.5px solid #ffe0bf; border-radius:50%; box-shadow:0 0 6px rgba(255,80,45,.9); pointer-events:none;
  /* crisp straight "+" = two IDENTICAL white bars (both 8px long × 2px thick), centered over the red circle */
  background:
    linear-gradient(#fff,#fff) center center/8px 2px no-repeat,
    linear-gradient(#fff,#fff) center center/2px 8px no-repeat,
    radial-gradient(circle at 32% 30%, #ff6552, #c5281a);}
.cell-add{width:20px; height:30px; margin-left:3px; border-radius:5px; cursor:pointer; font-weight:900; font-size:.9rem; line-height:1;
  display:grid; place-items:center; color:#2a1d08; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border:1px solid #8a5e15;}
.cell-add:hover{filter:brightness(1.08);}
.skill.locked .cell-add{background:#5e5648; color:#9a8f7c; border-color:#5e5648; cursor:not-allowed;}
.skill.maxed .cell-add{display:none;}

/* ---------- floating tooltip ---------- */
.sim-tip{position:fixed; z-index:200; max-width:266px; pointer-events:none; opacity:0; transform:translateY(4px);
  transition:opacity .1s, transform .1s; background:linear-gradient(180deg,var(--paper),var(--paper-deep)); color:var(--ink);
  border:1.5px solid var(--gold); border-radius:10px; box-shadow:var(--shadow); padding:11px 13px;}
.sim-tip.show{opacity:1; transform:none;}
.tip-head{display:flex; gap:9px; align-items:center; margin-bottom:8px;}
.tip-ico{width:36px; height:36px; min-width:36px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(135deg,#caa85f,#7d5a27); border:1px solid var(--wood-line); color:#2a1d10; font-size:1rem;}
.tip-ico img{width:100%;height:100%;object-fit:contain;border-radius:7px;}
.tip-nm{font-family:"Cinzel","Noto Serif Thai"; font-weight:700; color:#42301a; font-size:.92rem; line-height:1.1;}
.tip-cur{font-family:"Cinzel"; font-size:.7rem; color:#7d281d;}
.tip-row{display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-top:1px dashed #cdbd92; font-family:"Noto Serif Thai"; font-size:.82rem;}
.tip-l{color:#6b4f2a;} .tip-v{color:#3a2716; font-weight:600; text-align:right;}
.tip-eff{margin-top:7px; padding-top:6px; border-top:1px dashed #cdbd92; font-family:"Noto Serif Thai"; font-size:.8rem; color:#4d3d28;}
.tip-block{margin-top:7px; padding-top:6px; border-top:1px dashed #cdbd92; font-family:"Noto Serif Thai"; font-size:.74rem; color:#a8392b;}
.tip-hint{margin-top:8px; font-family:"Noto Serif Thai"; font-size:.7rem; color:#8a7c5c; text-align:center;}

@media(max-width:560px){ .simgrid{min-width:680px;} }

/* ============================================================
   Skill Simulator PAGES ONLY (body.ss-page): full-width (hide the
   left site rail) + a bigger RAIN-NIAR-scale grid. Scoped so the
   shared shell and every other page keep their sidebar untouched.
   ============================================================ */
/* SIDEBAR RESTORED — the page now uses the site's normal interior 2-col shell
   (rail | content) from the inline <style> (.layout{272px minmax(0,1fr); max-width:1440}).
   Only the skill-sim grid styling below stays ss-page-scoped. */
/* PART 1 — 4 class columns fill the (narrower) content area evenly; fit-to-4, no overflow/scroll. */
body.ss-page .simgrid{grid-template-columns:repeat(4,1fr); gap:12px; min-width:0;}
body.ss-page{--ssf:52px; --ssg:8px;}               /* fit-to-4 in the 1106px content area: 4×52 + 3×8 = 232 ≤ 234 col-rows inner */
body.ss-page .col-rows{gap:8px; padding:16px; align-items:center;}   /* PART 3 — center the grid BLOCK horizontally in each column */
/* every row is the FULL 4-cell width so level I/II/III/IV line up vertically across rows; cells stay left-aligned inside, the block centers as a unit */
body.ss-page .row{width:calc(var(--ssf)*4 + var(--ssg)*3); gap:var(--ssg); flex-wrap:wrap; justify-content:flex-start; margin-inline:auto;}
body.ss-page .skill{gap:var(--ssg);}
body.ss-page .cells{gap:var(--ssg); flex-wrap:nowrap;}    /* a skill's I–IV cells ALWAYS stay together on one row */
body.ss-page .cell{width:var(--ssf); height:var(--ssf); min-width:var(--ssf);}   /* frame 52×52, recomputed for the narrower (sidebar-restored) content area */
body.ss-page .cell img{width:calc(var(--ssf) - 2px); height:calc(var(--ssf) - 2px);}   /* icon = frame − 2px (≈50 at the 52 default; tracks --ssf as fitCells refits) */
body.ss-page .cell .cell-ph{font-size:1.4rem;}
body.ss-page .cell-add{display:none;}
body.ss-page .col-h{min-height:60px;}
/* PART 2 — faint class-art watermark behind each column's cells (Basic/A/B set --colbg; C = none) */
body.ss-page .col{position:relative;}
body.ss-page .col-rows{position:relative;}
body.ss-page .col-rows::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--colbg) center top / cover no-repeat; opacity:.5;
  filter:sepia(.5) brightness(.6) saturate(.85) contrast(.95);          /* RAIN NIAR muted warm/sepia toning, same on all 4 columns */
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);}      /* fade the bottom so there's no light seam where the bg ends */
body.ss-page .row{position:relative; z-index:1;}
body.ss-page .col-h{padding:11px 14px;}
body.ss-page .col-tag{font-size:.58rem;}
body.ss-page .col-name{font-size:.95rem;}
body.ss-page .col-name.long{font-size:.79rem;}   /* long class names (e.g. Thunder Dragon) shrink to fit the header (−1px) */
body.ss-page .col-count{font-size:.68rem;}
body.ss-page .col-count b{font-size:1rem;}
/* How-to-use sits at the bottom now */
body.ss-page .ss-howto-bottom{margin:18px 0 0;}

/* ============================================================
   Header redesign + character switcher + right CONTENTS panel
   (sim page becomes 3-col: rail | sim | contents, contents collapsible).
   ============================================================ */
/* widen the whole sim-page shell (header + body together, so they stay aligned) to make
   room for the contents panel WITHOUT shrinking the grid — caps at the viewport on smaller screens */
body.ss-page .brandrow, body.ss-page .menurow, body.ss-page .layout{max-width:1700px;}
body.ss-page .layout{grid-template-columns:272px minmax(0,1fr) 240px;}
body.ss-page.toc-collapsed .layout{grid-template-columns:272px minmax(0,1fr) 38px;}

/* character DROPDOWN now lives on the control bar, at the LEFT before LEVEL */
.sim-charsel{font-family:"Cinzel","Noto Serif Thai",serif; font-weight:700; font-size:.95rem; color:var(--gold-bright);
  background:#160f09; border:1px solid var(--wood-line); border-radius:8px; padding:8px 32px 8px 12px; cursor:pointer;
  appearance:none; -webkit-appearance:none; max-width:230px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 16px) 54%,calc(100% - 11px) 54%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  margin-right:4px;}
.sim-charsel:hover{border-color:var(--gold);}

/* right CONTENTS panel (reuses nav.toc parchment styling from the inline shell CSS) */
.ss-toc{position:sticky; top:18px; align-self:start; max-height:calc(100vh - 36px); overflow:auto;}
.ss-toc .toc-h{display:flex; align-items:center; gap:8px;}
.ss-toc .toc-h span{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ss-toc .toc-collapse{background:none; border:0; color:var(--gold-bright); cursor:pointer; font-size:.8rem; padding:0 2px; line-height:1;}
.ss-toc li.toc-loading{padding:10px 16px; color:#8a7c5c; font-family:"Noto Serif Thai"; font-size:.82rem;}
/* index title link (Skill Simulator / Planner → all-characters) sits above the character list */
.ss-toc li.toc-title{border-bottom:1px solid var(--paper-edge); margin-bottom:4px;}
.ss-toc li.toc-title a{font-family:"Cinzel"; font-weight:700; font-size:.74rem; letter-spacing:.04em; color:var(--red-d);}
.ss-toc li.toc-title a:hover{color:var(--red-d); background:var(--paper-deep);}
.ss-toc li a{font-family:"Cinzel","Noto Serif Thai",serif; justify-content:flex-start; gap:8px;}   /* character names on the site heading font, icon-then-name packed left */
.toc-charico{width:20px; height:20px; object-fit:contain; flex:none; image-rendering:auto;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));}   /* per-character weapon/class icon in front of the name */
/* collapsed: thin rail, only the toggle shows; grid widens + re-fits bigger */
body.ss-page.toc-collapsed .ss-toc{overflow:visible;}
body.ss-page.toc-collapsed .ss-toc ul{display:none;}
body.ss-page.toc-collapsed .ss-toc .toc-h span{display:none;}
body.ss-page.toc-collapsed .ss-toc .toc-h{justify-content:center; padding:13px 4px;}
body.ss-page.toc-collapsed .ss-toc .toc-collapse{transform:rotate(180deg);}
/* stack to one column on narrow screens (matches the shell's 1080 breakpoint) */
@media(max-width:1080px){
  body.ss-page .layout, body.ss-page.toc-collapsed .layout{grid-template-columns:1fr;}
  .ss-toc{position:static; max-height:none; overflow:visible;}
}