/* =========================================================================
   SJAKKMESTER – stilark
   ========================================================================= */

/* ---------------- Grunnvariabler ---------------- */
:root{
  --bg:            #060912;
  --bg-2:          #0c1322;
  --panel:         rgba(18,26,46,.74);
  --panel-solid:   #121a2e;
  --panel-brd:     rgba(126,158,224,.14);
  --panel-brd-hi:  rgba(126,158,224,.30);
  --text:          #e8eefc;
  --text-dim:      #93a3c6;
  --text-faint:    #6a7899;
  --gold:          #e3b661;
  --gold-2:        #f5d89a;
  --accent:        #5b8def;
  --accent-2:      #7aa5ff;
  --good:          #4ade80;
  --warn:          #fbbf24;
  --bad:           #f87171;
  --radius:        16px;
  --radius-sm:     10px;
  --shadow-lg:     0 24px 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4);
  --shadow-md:     0 10px 28px rgba(0,0,0,.42);
  --ease:          cubic-bezier(.22,.85,.25,1);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Brettfarger (overstyres av data-theme) */
  --sq-light: #f0d9b5;
  --sq-dark:  #b58863;
  --frame-1:  #4a3524;
  --frame-2:  #2a1d13;
}

*,*::before,*::after{ box-sizing:border-box; }

/* Må stå her: flere elementer under har eksplisitt display:flex, som ellers
   ville overstyrt nettleserens innebygde [hidden]-regel. */
[hidden]{ display:none !important; }

html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 12% -8%,  rgba(91,141,239,.16), transparent 60%),
    radial-gradient(1000px 620px at 92% 8%,   rgba(227,182,97,.11),  transparent 62%),
    radial-gradient(900px 900px  at 50% 120%, rgba(120,80,220,.14),  transparent 60%),
    linear-gradient(170deg, #080d1a 0%, var(--bg) 45%, #04060d 100%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Fin kornstruktur i bakgrunnen */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

#app{ position:relative; z-index:1; display:flex; flex-direction:column; min-height:100vh; }

button{ font-family:inherit; }

/* ---------------- Topplinje ---------------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px clamp(14px,2.5vw,30px);
  border-bottom:1px solid var(--panel-brd);
  background:linear-gradient(180deg, rgba(12,19,34,.86), rgba(12,19,34,.44));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  position:sticky; top:0; z-index:60;
}
.brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.logo{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  font-size:28px; line-height:1; color:#221803;
  border-radius:13px;
  background:linear-gradient(150deg, var(--gold-2), var(--gold) 55%, #a97c2c);
  box-shadow:0 6px 18px rgba(227,182,97,.34), inset 0 1px 0 rgba(255,255,255,.55);
}
.brand-text h1{
  margin:0; font-size:19px; letter-spacing:.4px; font-weight:700;
  background:linear-gradient(95deg,#fff,#cfe0ff 40%,var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-text p{ margin:1px 0 0; font-size:11.5px; color:var(--text-faint); letter-spacing:.3px; }
.topbar-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ---------------- Knapper ---------------- */
.btn{
  border:1px solid var(--panel-brd-hi); border-radius:11px;
  padding:9px 15px; font-size:13.5px; font-weight:600; letter-spacing:.2px;
  color:var(--text); background:rgba(255,255,255,.045);
  cursor:pointer; transition:all .18s var(--ease); display:inline-flex;
  align-items:center; gap:7px; white-space:nowrap;
}
.btn:hover{ background:rgba(255,255,255,.1); border-color:var(--panel-brd-hi); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; }
.btn-primary{
  background:linear-gradient(140deg,var(--accent-2),var(--accent) 60%,#3f6cd0);
  border-color:transparent; color:#fff;
  box-shadow:0 6px 18px rgba(91,141,239,.36), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{ box-shadow:0 10px 26px rgba(91,141,239,.5); background:linear-gradient(140deg,#8fb4ff,#5b8def 60%,#4a76d8); }
.btn-primary.big{ padding:13px 28px; font-size:15px; border-radius:13px; }
.icon-btn{ padding:9px; width:38px; height:38px; justify-content:center; font-size:15px; }
.btn.on{ background:linear-gradient(140deg,rgba(227,182,97,.32),rgba(227,182,97,.16)); border-color:rgba(227,182,97,.5); color:var(--gold-2); }

/* ---------------- Oppsett ---------------- */
.layout{
  flex:1; display:grid;
  grid-template-columns:300px minmax(0,1fr) 340px;
  gap:clamp(12px,1.6vw,22px);
  padding:clamp(12px,1.8vw,24px);
  align-items:start;
}
.panel{ display:flex; flex-direction:column; gap:14px; position:sticky; top:88px; }
.side-right{ max-height:calc(100vh - 108px); }

/* ---------------- Kort ---------------- */
.card{
  background:var(--panel); border:1px solid var(--panel-brd); border-radius:var(--radius);
  padding:15px 16px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-md);
}
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; }
.card-head h2{ margin:0; font-size:12px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--text-faint); }
.pill{
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px;
  background:rgba(91,141,239,.16); color:var(--accent-2); border:1px solid rgba(91,141,239,.28);
  white-space:nowrap;
}

/* Tur-indikator */
.turn-indicator{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; }
.turn-dot{
  width:14px; height:14px; border-radius:50%; flex:none;
  background:linear-gradient(150deg,#fff,#cfc6b4); border:1px solid rgba(0,0,0,.35);
  box-shadow:0 0 0 3px rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.4);
  transition:all .3s var(--ease);
}
.turn-indicator.black .turn-dot{ background:linear-gradient(150deg,#4b5162,#14161c); box-shadow:0 0 0 3px rgba(120,140,190,.16), 0 2px 6px rgba(0,0,0,.5); }
.opening-name{ margin-top:8px; font-size:12.5px; color:var(--gold); font-style:italic; min-height:16px; }

.thinking{ display:flex; align-items:center; gap:11px; margin-top:12px; padding-top:12px; border-top:1px solid var(--panel-brd); }
.thinking-title{ font-size:13px; font-weight:600; }
.thinking-sub{ font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.spinner{
  width:22px; height:22px; flex:none; border-radius:50%;
  border:2.5px solid rgba(91,141,239,.2); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---------------- Evalueringsstolpe ---------------- */
.evalbar{
  position:relative; display:block; height:16px; border-radius:9px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6);
  background:#12151d;
}
.evalbar-black{ position:absolute; inset:0; background:linear-gradient(180deg,#2b3040,#101319); }
/* Hvit del vokser fra venstre; bredden settes fra JS */
.evalbar-white{
  position:absolute; left:0; top:0; bottom:0; width:50%;
  background:linear-gradient(180deg,#f6f2e8,#d8cfbc);
  transition:width .55s var(--ease);
}
.evalbar-mid{ position:absolute; left:50%; top:0; bottom:0; width:1.5px; background:rgba(227,182,97,.6); }
.eval-text{ margin:9px 0 0; font-size:12.5px; color:var(--text-dim); }

/* ---------------- Verktøy ---------------- */
.tool-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.tool{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:11px 12px; border-radius:var(--radius-sm); cursor:pointer; text-align:left;
  background:rgba(255,255,255,.04); border:1px solid var(--panel-brd);
  transition:all .18s var(--ease); color:var(--text);
}
.tool:hover:not(:disabled){ background:rgba(91,141,239,.14); border-color:rgba(91,141,239,.38); transform:translateY(-2px); }
.tool:disabled{ opacity:.35; cursor:not-allowed; }
.tool.active{ background:rgba(227,182,97,.16); border-color:rgba(227,182,97,.45); }
.tool-icon{ font-size:18px; line-height:1.2; }
.tool-label{ font-size:13px; font-weight:650; }
.tool-sub{ font-size:10.5px; color:var(--text-faint); }

/* ---------------- Brytere ---------------- */
.settings-list{ display:flex; flex-direction:column; gap:2px; }
.switch-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 2px; font-size:13px; cursor:pointer; color:var(--text-dim);
  transition:color .15s;
}
.switch-row:hover{ color:var(--text); }
.switch-row input{ position:absolute; opacity:0; width:0; height:0; }
.switch{
  width:38px; height:21px; border-radius:99px; flex:none; position:relative;
  background:rgba(255,255,255,.11); border:1px solid var(--panel-brd);
  transition:all .22s var(--ease);
}
.switch::after{
  content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:linear-gradient(150deg,#fff,#c6ceda); transition:all .22s var(--ease);
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.switch-row input:checked + .switch{ background:linear-gradient(120deg,var(--accent),var(--accent-2)); border-color:transparent; }
.switch-row input:checked + .switch::after{ left:20px; }
.switch-row input:focus-visible + .switch{ box-shadow:0 0 0 3px rgba(91,141,239,.4); }

/* Temavelger */
.theme-row{ margin-top:14px; padding-top:13px; border-top:1px solid var(--panel-brd); }
.theme-label{ font-size:11px; letter-spacing:1.1px; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
.themes{ display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
.theme-dot{
  width:30px; height:30px; border-radius:9px; cursor:pointer; padding:0;
  border:2px solid transparent; overflow:hidden; position:relative;
  background:linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%);
  transition:all .18s var(--ease);
}
.theme-dot:hover{ transform:scale(1.12) rotate(-4deg); }
.theme-dot.active{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(227,182,97,.22); }

/* =========================================================================
   BRETTET
   ========================================================================= */
.board-area{ display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; }

.player-card{
  width:min(76vh,100%); max-width:100%;
  display:flex; align-items:center; gap:12px;
  padding:9px 14px; border-radius:13px;
  background:var(--panel); border:1px solid var(--panel-brd);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:all .3s var(--ease);
}
.player-card.active{
  border-color:rgba(227,182,97,.5);
  box-shadow:0 0 0 1px rgba(227,182,97,.22), 0 8px 26px rgba(227,182,97,.14);
  background:linear-gradient(100deg, rgba(227,182,97,.10), var(--panel) 55%);
}
.pc-avatar{
  width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
  font-size:21px; background:rgba(255,255,255,.07); border:1px solid var(--panel-brd);
}
.pc-info{ flex:1; min-width:0; }
.pc-name{ font-size:14px; font-weight:650; display:flex; align-items:center; gap:7px; }
.pc-badge{ font-size:10px; padding:2px 7px; border-radius:99px; background:rgba(91,141,239,.18); color:var(--accent-2); font-weight:700; }
.captured{ display:flex; align-items:center; gap:1px; margin-top:2px; min-height:19px; flex-wrap:wrap; }
.captured svg{ width:19px; height:19px; opacity:.82; margin-right:-6px; }
.cap-score{ font-size:11.5px; color:var(--good); font-weight:700; margin-left:11px; }
.pc-clock{
  font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.5px;
  padding:5px 13px; border-radius:10px; background:rgba(0,0,0,.34);
  border:1px solid var(--panel-brd); transition:all .3s var(--ease);
}
.player-card.active .pc-clock{ background:linear-gradient(140deg,#f4efe4,#d6ccb6); color:#161a24; border-color:transparent; }
.pc-clock.low{ color:var(--bad) !important; background:rgba(248,113,113,.16) !important; animation:pulseLow 1s infinite; }
@keyframes pulseLow{ 50%{ opacity:.55 } }

.board-outer{ position:relative; width:min(76vh,100%); }
.board-glow{
  position:absolute; inset:-8%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 60%, rgba(91,141,239,.20), transparent 62%);
  filter:blur(28px);
}
/* Sentrerer brettet: i 3D er den projiserte høyden lavere enn boksen,
   så flex-sentrering holder brettet midt i den avsatte plassen. */
.board-scene{
  width:100%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  perspective:1600px; perspective-origin:50% 42%;
  transition:aspect-ratio .5s var(--ease);
}
.board-scene > .board{ flex:none; }
.board-scene.is3d{ aspect-ratio:1/.78; }

.board{
  position:relative; width:100%; aspect-ratio:1/1;
  border-radius:6px;
  transform-style:preserve-3d;
  transition:transform .6s var(--ease);
  box-shadow:
    0 0 0 10px var(--frame-1),
    0 0 0 12px var(--frame-2),
    0 0 0 13px rgba(255,255,255,.08),
    0 30px 70px rgba(0,0,0,.62),
    0 10px 22px rgba(0,0,0,.5);
  user-select:none; -webkit-user-select:none; touch-action:none;
}
.board.is3d{ transform:rotateX(46deg) translateY(-4%) scale(.92); }

/* Brettemaer */
.board[data-theme="wood"]    { --sq-light:#f2dbb8; --sq-dark:#b1794c; --frame-1:#5a3d26; --frame-2:#2f2013; }
.board[data-theme="emerald"] { --sq-light:#eeeed2; --sq-dark:#769656; --frame-1:#3e5136; --frame-2:#1d2819; }
.board[data-theme="ocean"]   { --sq-light:#e2e9f2; --sq-dark:#5c7fa3; --frame-1:#2f4762; --frame-2:#16232f; }
.board[data-theme="midnight"]{ --sq-light:#b9c1d9; --sq-dark:#3c4870; --frame-1:#232a45; --frame-2:#11142a; }
.board[data-theme="rose"]    { --sq-light:#f6e0cd; --sq-dark:#a4634a; --frame-1:#563228; --frame-2:#2b1913; }
.board[data-theme="marble"]  { --sq-light:#f4f4f2; --sq-dark:#98a0a9; --frame-1:#414850; --frame-2:#22262b; }

.squares{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); border-radius:4px; overflow:hidden; }

.sq{ position:relative; }
.sq.light{ background:var(--sq-light); }
.sq.dark { background:var(--sq-dark); }
/* Subtil tekstur og lysfall over brettet */
.squares::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:4px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.16), transparent 34%, rgba(0,0,0,.14) 78%),
    radial-gradient(ellipse at 50% 12%, rgba(255,255,255,.14), transparent 58%);
  mix-blend-mode:soft-light;
}
.squares::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:4px;
  box-shadow:inset 0 0 34px rgba(0,0,0,.30), inset 0 2px 3px rgba(0,0,0,.28);
}

/* Koordinater */
.sq .cf,.sq .cr{
  position:absolute; font-size:clamp(8px,1.05vw,11px); font-weight:800; opacity:.62;
  letter-spacing:.4px; pointer-events:none; z-index:3;
}
.sq .cr{ top:2px; left:3px; }
.sq .cf{ bottom:1px; right:4px; }
.sq.light .cf,.sq.light .cr{ color:var(--sq-dark); }
.sq.dark  .cf,.sq.dark  .cr{ color:var(--sq-light); }
.board.no-coords .cf,.board.no-coords .cr{ display:none; }

/* Markeringer */
.sq.last::before{
  content:''; position:absolute; inset:0; background:rgba(255,214,84,.42); z-index:1;
  animation:fadeIn .25s var(--ease);
}
.sq.sel::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:rgba(120,190,255,.46);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.6);
}
.sq.check::before{
  content:''; position:absolute; inset:0; z-index:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,60,60,.92) 8%, rgba(255,40,40,.55) 42%, transparent 72%);
  animation:checkPulse 1.1s ease-in-out infinite;
}
@keyframes checkPulse{ 0%,100%{ opacity:.85; transform:scale(1) } 50%{ opacity:1; transform:scale(1.07) } }

.sq.danger::after{
  content:''; position:absolute; inset:9%; z-index:4; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 0 3px rgba(251,146,60,.95), 0 0 12px rgba(251,146,60,.6);
  animation:dangerPulse 1.4s ease-in-out infinite;
}
@keyframes dangerPulse{ 0%,100%{ opacity:.5; transform:scale(.94) } 50%{ opacity:1; transform:scale(1.02) } }

/* Lovlige trekk */
.sq.target::after{
  content:''; position:absolute; left:50%; top:50%; width:30%; height:30%; z-index:4;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(30,40,60,.42), rgba(30,40,60,.30));
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  animation:popIn .18s var(--ease);
}
.sq.target.cap::after{
  width:94%; height:94%; background:none; border-radius:50%;
  box-shadow:inset 0 0 0 6px rgba(30,40,60,.38);
}
.sq.target:hover::after{ background:radial-gradient(circle, rgba(91,141,239,.75), rgba(91,141,239,.55)); }
.sq.target.cap:hover::after{ background:none; box-shadow:inset 0 0 0 6px rgba(91,141,239,.8); }
@keyframes popIn{ from{ transform:translate(-50%,-50%) scale(.3); opacity:0 } }
@keyframes fadeIn{ from{ opacity:0 } }

/* Feltet under pekeren mens man drar */
.sq.hover-t::before{
  content:''; position:absolute; inset:0; z-index:2;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.85);
}

.sq.hintsq::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:rgba(74,222,128,.45);
  animation:hintFlash 1.1s ease-in-out 3;
}
@keyframes hintFlash{ 0%,100%{ opacity:.35 } 50%{ opacity:.95 } }

/* Piler (hint / siste trekk) */
.arrows{ position:absolute; inset:0; z-index:6; pointer-events:none; overflow:visible; }

/* ---------------- Brikker ---------------- */
.pieces{ position:absolute; inset:0; z-index:5; transform-style:preserve-3d; pointer-events:none; }
.piece{
  position:absolute; top:0; left:0; width:12.5%; height:12.5%;
  transform-style:preserve-3d; will-change:transform;
  pointer-events:auto; cursor:pointer;
}
.board.anim .piece{ transition:transform .26s var(--ease); }
.piece.own{ cursor:grab; }
.piece.dragging{ cursor:grabbing; opacity:.28; transition:none !important; }
.piece .stand{
  width:100%; height:100%; transform-origin:50% 86%;
  transition:transform .6s var(--ease); display:block;
}
.board.is3d .piece .stand{ transform:rotateX(-46deg) translateY(-13%) scale(1.14); }
.piece svg.pc{ width:100%; height:100%; display:block; overflow:visible; }

/* Skygge under brikken (kun i 3D) */
.piece::after{
  content:''; position:absolute; left:16%; bottom:6%; width:68%; height:15%;
  border-radius:50%; opacity:0; transition:opacity .5s var(--ease); pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.18) 55%, transparent 74%);
  transform:translateZ(.5px);
}
.board.is3d .piece::after{ opacity:1; }

/* Brikkefarger */
svg.pc .body{ stroke-width:1.05; stroke-linejoin:round; stroke-linecap:round; }
svg.pc.w .body{ fill:url(#gpW); stroke:#6d5b40; }
svg.pc.b .body{ fill:url(#gpB); stroke:#05060a; }
svg.pc.w .gloss{ fill:#ffffff; opacity:.62; }
svg.pc.b .gloss{ fill:#aab6d2; opacity:.28; }
svg.pc.w .detail{ fill:#4b3d29; }
svg.pc.b .detail{ fill:#d5dcee; }
/* Variant uten slagskygge – brukes i lister, minibrett og slåtte brikker */
svg.pc.flat{ filter:none; }
svg.pc .line{ fill:none; stroke-width:1.25; stroke-linecap:round; }
svg.pc.w .line{ stroke:#8a7452; opacity:.85; }
svg.pc.b .line{ stroke:#6e7791; opacity:.75; }

/* Løftet brikke som følger musa */
#dragGhost{
  position:fixed; z-index:9999; pointer-events:none;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.65));
  transform:translate(-50%,-56%) scale(1.14);
  transition:none;
}
#dragGhost svg{ width:100%; height:100%; display:block; }

/* Slag-effekt */
.capture-burst{
  position:absolute; z-index:7; pointer-events:none; width:12.5%; height:12.5%;
}
.capture-burst span{
  position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%;
  background:var(--gold-2); transform:translate(-50%,-50%);
  animation:burst .55s ease-out forwards;
}
@keyframes burst{ to{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity:0 } }

/* =========================================================================
   HØYRE PANEL
   ========================================================================= */
.side-right{
  background:var(--panel); border:1px solid var(--panel-brd); border-radius:var(--radius);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  overflow:hidden; box-shadow:var(--shadow-md); gap:0;
}
.tabs{ display:flex; border-bottom:1px solid var(--panel-brd); flex:none; }
.tab{
  flex:1; padding:13px 8px; background:none; border:none; cursor:pointer;
  color:var(--text-faint); font-size:12.5px; font-weight:650; letter-spacing:.3px;
  transition:all .18s var(--ease); position:relative;
}
.tab:hover{ color:var(--text-dim); background:rgba(255,255,255,.03); }
.tab.active{ color:var(--gold-2); background:rgba(227,182,97,.07); }
.tab.active::after{
  content:''; position:absolute; left:16%; right:16%; bottom:-1px; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.tabpanel{ display:none; flex-direction:column; min-height:0; flex:1; }
.tabpanel.active{ display:flex; }

/* Trekkliste */
.movelist-head{
  display:grid; grid-template-columns:44px 1fr 1fr; gap:6px; padding:9px 14px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:1.1px; font-weight:700;
  color:var(--text-faint); border-bottom:1px solid var(--panel-brd); flex:none;
}
.movelist{ flex:1; overflow-y:auto; padding:6px 8px; min-height:150px; max-height:min(50vh,520px); }
.move-row{ display:grid; grid-template-columns:44px 1fr 1fr; gap:6px; align-items:center; }
.move-num{ font-size:11.5px; color:var(--text-faint); text-align:center; font-variant-numeric:tabular-nums; }
.move-cell{
  display:flex; align-items:center; gap:6px; padding:5px 9px; border-radius:8px;
  font-size:13.5px; font-weight:600; cursor:pointer; transition:all .13s var(--ease);
  font-variant-numeric:tabular-nums; color:var(--text); min-height:29px;
}
.move-cell:hover{ background:rgba(255,255,255,.07); }
.move-cell.current{ background:rgba(91,141,239,.24); box-shadow:inset 0 0 0 1px rgba(91,141,239,.45); }
.move-cell.empty{ cursor:default; }
.move-cell.empty:hover{ background:none; }
.mv-badge{ font-size:12px; line-height:1; }
.empty-hint{ padding:22px 16px; font-size:12.5px; color:var(--text-faint); text-align:center; line-height:1.6; margin:0; }

.review-bar{
  display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--panel-brd);
  align-items:center; flex:none;
}
.review-bar .btn{ padding:7px 10px; font-size:12px; }
#btnCopyPgn{ margin-left:auto; }

/* Trener */
.coach-warnings{ padding:12px 14px 0; display:flex; flex-direction:column; gap:8px; flex:none; }
.warn-box{
  display:flex; gap:9px; padding:10px 12px; border-radius:11px; font-size:12.5px; line-height:1.5;
  border:1px solid; animation:slideIn .3s var(--ease);
}
.warn-box.warn{ background:rgba(251,191,36,.11); border-color:rgba(251,191,36,.32); color:#fde68a; }
.warn-box.danger{ background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.34); color:#fecaca; }
.warn-icon{ font-size:15px; line-height:1.2; flex:none; }
@keyframes slideIn{ from{ opacity:0; transform:translateY(-8px) } }

.coach-feed{ flex:1; overflow-y:auto; padding:12px 14px 16px; display:flex; flex-direction:column; gap:10px; }
.coach-welcome{ text-align:center; padding:22px 10px; color:var(--text-dim); }
.coach-face{ font-size:44px; margin-bottom:8px; }
.coach-welcome h3{ margin:0 0 9px; font-size:16px; color:var(--text); }
.coach-welcome p{ margin:0 0 10px; font-size:12.5px; line-height:1.65; }

.coach-msg{
  border:1px solid var(--panel-brd); border-radius:12px; padding:11px 13px;
  background:rgba(255,255,255,.035); animation:slideIn .3s var(--ease);
  border-left:3px solid var(--cc,var(--accent));
}
.coach-msg-head{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.coach-msg-icon{ font-size:16px; }
.coach-msg-label{ font-size:12.5px; font-weight:750; color:var(--cc,var(--accent)); }
.coach-msg-move{ margin-left:auto; font-size:12px; font-weight:700; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.coach-msg-body{ font-size:12.5px; line-height:1.6; color:var(--text-dim); }
.coach-msg-better{
  margin-top:7px; padding-top:7px; border-top:1px dashed var(--panel-brd);
  font-size:12px; color:var(--text-dim);
}
.coach-msg-better b{ color:var(--good); }

/* Leksjoner */
.lesson-list{ flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:7px; }
.lesson-item{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px;
  background:rgba(255,255,255,.035); border:1px solid var(--panel-brd);
  cursor:pointer; transition:all .18s var(--ease); text-align:left; width:100%; color:var(--text);
}
.lesson-item:hover{ background:rgba(91,141,239,.13); border-color:rgba(91,141,239,.34); transform:translateX(3px); }
.lesson-ico{ font-size:20px; flex:none; width:34px; height:34px; display:grid; place-items:center;
  border-radius:9px; background:rgba(255,255,255,.05); }
.lesson-t{ flex:1; min-width:0; }
.lesson-t b{ display:block; font-size:13.5px; font-weight:650; }
.lesson-t small{ font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.8px; }
.lesson-arrow{ color:var(--text-faint); font-size:14px; }

.lesson-detail{ flex:1; overflow-y:auto; padding:12px 14px 20px; }
.back-btn{ margin-bottom:12px; font-size:12px; padding:6px 12px; }
.lesson-detail h2{ font-size:17px; margin:0 0 4px; display:flex; align-items:center; gap:9px; }
.lesson-detail .lesson-tag{ font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:var(--gold); font-weight:700; margin-bottom:14px; }
.lesson-detail p{ font-size:13px; line-height:1.72; color:var(--text-dim); margin:0 0 11px; }
.lesson-detail ul,.lesson-detail ol{ font-size:13px; line-height:1.75; color:var(--text-dim); padding-left:20px; margin:0 0 12px; }
.lesson-detail li{ margin-bottom:5px; }
.lesson-detail b{ color:var(--text); }
.lesson-detail .tip{
  background:rgba(227,182,97,.1); border-left:3px solid var(--gold);
  padding:10px 12px; border-radius:0 9px 9px 0; font-size:12.5px; color:#f0dcb4;
}
.value-table{ width:100%; border-collapse:collapse; font-size:12.5px; margin:0 0 12px; }
.value-table td{ padding:7px 8px; border-bottom:1px solid var(--panel-brd); color:var(--text-dim); }
.value-table td:nth-child(2){ text-align:center; color:var(--gold-2); font-size:15px; width:44px; }
.value-table td:nth-child(3){ font-size:11.5px; color:var(--text-faint); }

/* Minibrett i leksjoner */
.mini-wrap{ margin:6px 0 16px; }
.mini-board{
  position:relative; width:100%; max-width:250px; aspect-ratio:1; margin:0 auto;
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
  border-radius:5px; overflow:hidden; box-shadow:0 0 0 5px var(--frame-1),0 10px 26px rgba(0,0,0,.5);
  --sq-light:#f2dbb8; --sq-dark:#b1794c; --frame-1:#5a3d26;
  cursor:default;
}
.mini-board .msq{ position:relative; }
.mini-board .msq.light{ background:var(--sq-light) }
.mini-board .msq.dark{ background:var(--sq-dark) }
.mini-board .msq.hl::before{ content:''; position:absolute; inset:0; background:rgba(255,214,84,.5); }
.mini-board .msq.mv::after{
  content:''; position:absolute; left:50%; top:50%; width:30%; height:30%; border-radius:50%;
  transform:translate(-50%,-50%); background:rgba(40,60,90,.5);
}
.mini-board .msq svg{ position:absolute; inset:6%; width:88%; height:88%; }
.mini-board .marrow{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.mini-cap{ font-size:11.5px; color:var(--text-faint); text-align:center; margin:9px auto 0; max-width:290px; line-height:1.55; }

/* =========================================================================
   MODALER
   ========================================================================= */
.modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(3,6,14,.78); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); animation:fadeIn .2s; }
.modal-card{
  position:relative; background:linear-gradient(165deg,#182238,#0e1526);
  border:1px solid var(--panel-brd-hi); border-radius:22px; padding:30px;
  box-shadow:var(--shadow-lg); width:100%; max-height:calc(100vh - 40px); overflow-y:auto;
  animation:modalIn .35s var(--ease);
}
.modal-card.wide{ max-width:660px; }
.modal-card.narrow{ max-width:420px; }
.modal-card.center{ text-align:center; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(24px) scale(.96) } }
.modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:9px;
  background:rgba(255,255,255,.06); border:1px solid var(--panel-brd); color:var(--text-dim);
  cursor:pointer; font-size:14px; transition:all .16s var(--ease);
}
.modal-close:hover{ background:rgba(255,255,255,.13); color:var(--text); }
.modal-title{
  margin:0 0 6px; font-size:24px; font-weight:700;
  background:linear-gradient(95deg,#fff,var(--gold-2)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.modal-sub{ margin:0 0 18px; font-size:13.5px; color:var(--text-dim); }

.setup-section{ margin-bottom:20px; }
.setup-section h3{
  margin:0 0 10px; font-size:11px; text-transform:uppercase; letter-spacing:1.3px;
  color:var(--text-faint); font-weight:700;
}
.choice-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice-row.small{ grid-template-columns:repeat(3,1fr); }
.choice-row.wrap{ grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); }
.choice{
  padding:14px 12px; border-radius:14px; cursor:pointer; text-align:center;
  background:rgba(255,255,255,.04); border:1.5px solid var(--panel-brd); color:var(--text);
  transition:all .18s var(--ease); display:flex; flex-direction:column; align-items:center; gap:3px;
}
.choice:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); }
.choice.active{
  border-color:var(--accent); background:linear-gradient(150deg,rgba(91,141,239,.24),rgba(91,141,239,.09));
  box-shadow:0 0 0 3px rgba(91,141,239,.16);
}
.choice-icon{ font-size:26px; line-height:1.15; }
.choice b{ font-size:13.5px; }
.choice small{ font-size:10.5px; color:var(--text-faint); line-height:1.35; }

.level-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:9px; }
.level-card{
  padding:13px 14px; border-radius:14px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.04); border:1.5px solid var(--panel-brd); color:var(--text);
  transition:all .18s var(--ease); position:relative; overflow:hidden;
}
.level-card:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); }
.level-card.active{
  border-color:var(--gold); background:linear-gradient(150deg,rgba(227,182,97,.2),rgba(227,182,97,.05));
  box-shadow:0 0 0 3px rgba(227,182,97,.15);
}
.level-top{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.level-ico{ font-size:19px; }
.level-name{ font-size:14px; font-weight:700; }
.level-elo{ margin-left:auto; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:99px;
  background:rgba(255,255,255,.08); color:var(--text-dim); }
.level-desc{ font-size:11.5px; line-height:1.5; color:var(--text-faint); }

.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:26px; }
.modal-actions.center{ justify-content:center; }

/* Forvandling */
.promo-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0 6px; }
.promo-btn{
  aspect-ratio:1; border-radius:14px; cursor:pointer; padding:8px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1.5px solid var(--panel-brd); transition:all .18s var(--ease);
  display:grid; place-items:center;
}
.promo-btn:hover{ border-color:var(--gold); background:rgba(227,182,97,.16); transform:translateY(-3px) scale(1.04); }
.promo-btn svg{ width:100%; height:100%; }
.promo-tip{ font-size:11.5px; color:var(--text-faint); margin:14px 0 0; line-height:1.55; }

.over-icon{ font-size:60px; margin-bottom:6px; animation:pop .5s var(--ease); }
@keyframes pop{ from{ transform:scale(.3); opacity:0 } }
.over-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:18px 0 4px;
  padding:14px 0; border-top:1px solid var(--panel-brd); border-bottom:1px solid var(--panel-brd);
}
.over-stat b{ display:block; font-size:19px; color:var(--gold-2); }
.over-stat span{ font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.8px; }

/* Toast */
.toast-wrap{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:400;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{
  padding:11px 20px; border-radius:12px; font-size:13.5px; font-weight:600;
  background:linear-gradient(150deg,#1c2740,#131b2e); border:1px solid var(--panel-brd-hi);
  box-shadow:var(--shadow-md); animation:toastIn .3s var(--ease);
  display:flex; align-items:center; gap:9px; max-width:min(90vw,460px);
}
.toast.good{ border-color:rgba(74,222,128,.4); }
.toast.bad{ border-color:rgba(248,113,113,.4); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(16px) } }
.toast.out{ animation:toastOut .3s var(--ease) forwards; }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-10px) } }

/* Scrollbar */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(126,158,224,.22); border-radius:9px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(126,158,224,.4); background-clip:padding-box; }

/* =========================================================================
   RESPONSIVT
   ========================================================================= */
@media (max-width:1280px){
  .layout{ grid-template-columns:270px minmax(0,1fr) 300px; }
}
@media (max-width:1080px){
  .layout{ grid-template-columns:minmax(0,1fr) 320px; }
  .side-left{ grid-column:1/-1; position:static; flex-direction:row; flex-wrap:wrap; }
  .side-left .card{ flex:1 1 260px; }
  .board-area{ order:-1; }
}
@media (max-width:860px){
  .layout{ grid-template-columns:minmax(0,1fr); }
  .panel{ position:static; }
  .side-right{ max-height:none; }
  .board-outer,.player-card{ width:min(92vw,560px); }
  .movelist{ max-height:280px; }
  .brand-text p{ display:none; }
}
@media (max-width:520px){
  .topbar{ padding:11px 13px; }
  .brand-text h1{ font-size:16px; }
  .btn{ padding:8px 12px; font-size:12.5px; }
  .icon-btn{ width:34px; height:34px; padding:7px; }
  .modal-card{ padding:22px 18px; border-radius:18px; }
  .choice-row,.choice-row.small{ grid-template-columns:1fr 1fr; }
  .level-grid{ grid-template-columns:1fr; }
  .tool-grid{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}