:root{
  --bg:#181225;
  --bg-2:#20172f;
  --panel:#241a38;
  --panel-2:#2c2044;
  --ink:#f7f3ff;
  --ink-dim:#b4a4d6;
  --azul:#3fd0ff;
  --ochre:#ffb23f;
  --pink:#ff6fb0;
  --line:#3c2c58;
  --good:#5be89a;
  --bad:#ff5e79;

  --tile-blue:#33c0ee;
  --tile-yellow:#ffd23f;
  --tile-red:#ff6b8a;
  --tile-black:#9b7bff;
  --tile-teal:#3ddc97;
  --tile-empty:#2a2140;
  --tile-marker:#ff9f4a;

  --ink-on-blue:#052733;
  --ink-on-yellow:#3a2705;
  --ink-on-red:#3a0518;
  --ink-on-black:#1c0a3a;
  --ink-on-teal:#04331f;
  --ink-on-marker:#3a1c02;

  --font-fun:"Comic Sans MS","Comic Sans","Baloo 2","Comic Neue",cursive,sans-serif;
  --font-head:"Baloo 2","Comic Sans MS","Comic Neue",cursive,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-fun);height:100%;}
body{
  background:
    radial-gradient(circle at 8% 4%, rgba(255,111,176,.10), transparent 40%),
    radial-gradient(circle at 92% 12%, rgba(63,208,255,.10), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(255,178,63,.08), transparent 45%),
    var(--bg);
}
h1,h2,h3{font-family:var(--font-head);font-weight:700;margin:0;}
#app{max-width:960px;margin:0 auto;padding:10px 12px 30px;display:flex;flex-direction:column;min-height:100dvh;}

.topbar{display:flex;align-items:baseline;justify-content:space-between;padding:4px 4px 10px;margin-bottom:8px;flex:0 0 auto;}
.topbar h1{font-size:1.7rem;letter-spacing:.5px;background:linear-gradient(95deg,var(--azul),var(--pink) 55%,var(--ochre));-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(-1.5deg);display:inline-block;}
.topbar .sub{font-size:.72rem;color:var(--ink-dim);font-family:var(--font-fun);}

.card{background:var(--panel);border:2.5px solid var(--line);border-radius:22px;padding:18px;margin-bottom:14px;box-shadow:0 5px 0 var(--line);}
.card h2{font-size:1.15rem;margin-bottom:4px;color:var(--ink);}
.card p.desc{font-size:.85rem;color:var(--ink-dim);margin:2px 0 12px;line-height:1.45;}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;}
button{font:inherit;cursor:pointer;font-family:var(--font-fun);}
.btn{background:var(--azul);color:#04222e;border:none;border-radius:999px;padding:11px 20px;font-size:.92rem;font-weight:700;letter-spacing:.2px;box-shadow:0 4px 0 #1c8fb3;transition:transform .08s, box-shadow .08s;}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #1c8fb3;}
.btn.ochre{background:var(--ochre);color:#3a2205;box-shadow:0 4px 0 #b0721c;}
.btn.ochre:active{box-shadow:0 1px 0 #b0721c;}
.btn.pink{background:var(--pink);color:#3a0a24;box-shadow:0 4px 0 #b23d75;}
.btn.pink:active{box-shadow:0 1px 0 #b23d75;}
.btn.outline{background:transparent;color:var(--azul);border:2px solid var(--azul);box-shadow:none;}
.btn.outline:hover{background:rgba(63,208,255,.12);}
.btn.outline:active{transform:translateY(1px);}
.btn:disabled{opacity:.35;cursor:not-allowed;filter:none;}
.btn.small{padding:7px 13px;font-size:.8rem;}

.diffgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.diffcard{border:2.5px solid var(--line);border-radius:16px;padding:10px 8px;text-align:center;background:var(--panel-2);cursor:pointer;transition:border-color .12s, transform .12s;}
.diffcard:hover{border-color:var(--pink);transform:translateY(-2px);}
.diffcard b{display:block;font-size:.88rem;margin-bottom:2px;}
.diffcard span{font-size:.7rem;color:var(--ink-dim);}

.togglegroup{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.toggle{border:2.5px solid var(--line);border-radius:14px;padding:8px 12px;background:var(--panel-2);cursor:pointer;font-size:.78rem;text-align:left;flex:1;min-width:120px;}
.toggle b{display:block;font-size:.82rem;}
.toggle span{font-size:.68rem;color:var(--ink-dim);}
.toggle.on{border-color:var(--ochre);background:rgba(255,178,63,.14);}
.settinglbl{font-size:.74rem;color:var(--ink-dim);margin:10px 0 6px;font-weight:700;}

label.fieldlbl{display:block;font-size:.74rem;color:var(--ink-dim);margin:8px 0 4px;font-weight:700;}
input[type=text]{font:inherit;padding:10px 12px;border:2.5px solid var(--line);border-radius:14px;background:#150f22;color:var(--ink);width:100%;}
input.code{letter-spacing:5px;text-transform:uppercase;text-align:center;font-family:var(--font-head);}
input[type=text]::placeholder{color:var(--ink-dim);}
.roomcode{font-family:var(--font-head);font-size:1.8rem;letter-spacing:6px;color:var(--pink);text-align:center;padding:12px;background:var(--panel-2);border-radius:16px;border:3px dashed var(--pink);margin:10px 0;}
.hint{font-size:.75rem;color:var(--ink-dim);margin-top:8px;line-height:1.5;}
.hint a{color:var(--azul);}

.statusbar{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;margin-bottom:8px;padding:8px 14px;background:var(--panel);border-radius:999px;border:2px solid var(--line);gap:8px;flex:0 0 auto;}
.turnmsg{font-weight:700;font-family:var(--font-head);}
.turnmsg.mine{color:var(--good);}
.turnmsg.theirs{color:var(--ink-dim);}
.timerpill{font-family:var(--font-head);font-size:.85rem;padding:3px 12px;border-radius:20px;background:var(--panel-2);border:2px solid var(--line);}
.timerpill.low{color:var(--bad);border-color:var(--bad);}

.game-shell{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.draft-half{flex:1 1 52%;min-height:0;display:flex;flex-direction:column;}
.my-half{flex:1 1 48%;min-height:0;display:flex;flex-direction:column;margin-top:6px;}
.opponent-half{flex:0 0 auto;margin-top:16px;}

.factories{flex:1 1 auto;min-height:0;display:flex;flex-wrap:wrap;gap:clamp(6px,2vw,18px);align-items:center;justify-content:center;padding:8px 4px;margin-bottom:6px;background:radial-gradient(ellipse at center, #2a1f42 0%, transparent 72%);border-radius:24px;}
.factory{flex:0 0 30%;max-width:150px;aspect-ratio:1;border-radius:50%;background:var(--panel);border:4px solid var(--panel-2);box-shadow:inset 0 0 0 2px var(--line), 0 3px 0 var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;padding:6%;position:relative;}
.factory.empty{opacity:.22;}
.center{width:100%;min-height:44px;flex:0 0 auto;border-radius:18px;background:var(--panel);border:2.5px solid var(--line);display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:center;padding:7px;}
.center .lbl{width:100%;text-align:center;font-size:.65rem;color:var(--ink-dim);margin-bottom:2px;font-weight:700;}

.tile{width:clamp(24px,min(7vh,7.4vw),46px);height:clamp(24px,min(7vh,7.4vw),46px);border-radius:0;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2), 0 2px 0 rgba(0,0,0,.25);cursor:pointer;transition:transform .1s;position:relative;display:flex;align-items:center;justify-content:center;}
.tile:hover{transform:translateY(-3px) scale(1.08) rotate(-3deg);}
.tile.big{width:clamp(26px,min(8vh,8vw),52px);height:clamp(26px,min(8vh,8vw),52px);border-radius:0;}
.tile svg{width:66%;height:66%;fill:currentColor;}
.tile.sel{outline:3px solid var(--ochre);outline-offset:2px;}
.tile.static{cursor:default;}
.tile.static:hover{transform:none;}
.tile.marker{background:var(--tile-marker) !important;color:var(--ink-on-marker) !important;}
.tile.preview{opacity:.55;outline:2px dashed var(--ochre);outline-offset:1px;}
.tile.blue{background:var(--tile-blue);color:var(--ink-on-blue);}
.tile.yellow{background:var(--tile-yellow);color:var(--ink-on-yellow);}
.tile.red{background:var(--tile-red);color:var(--ink-on-red);}
.tile.black{background:var(--tile-black);color:var(--ink-on-black);}
.tile.teal{background:var(--tile-teal);color:var(--ink-on-teal);}

.boards{display:flex;flex-direction:column;gap:10px;}
.board{background:var(--panel);border:2.5px solid var(--line);border-radius:20px;padding:10px 12px;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.board.active{border-color:var(--ochre);box-shadow:0 0 0 2px var(--ochre);}
.board .bhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;flex:0 0 auto;}
.board .bhead b{font-size:.92rem;font-family:var(--font-head);}
.board .score{font-family:var(--font-head);font-size:1.25rem;color:var(--azul);min-width:2ch;text-align:right;display:inline-block;}
.boardgrid{display:flex;gap:12px;flex-wrap:nowrap;flex:1 1 auto;min-height:0;}
.lines{display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:0;}
.line{display:flex;gap:4px;justify-content:flex-end;padding:2px;border-radius:10px;}
.line.selectable:hover{background:rgba(255,178,63,.14);}
.line.eligible{cursor:pointer;}
.line.target{background:rgba(255,178,63,.15);border-radius:10px;}

.cell{width:clamp(20px,min(6.4vh,6.6vw),42px);height:clamp(20px,min(6.4vh,6.6vw),42px);border-radius:0;background:var(--tile-empty);border:2px solid var(--line);transition:all .2s;}
.cell.lit{border-color:var(--ochre);background:rgba(255,178,63,.15);box-shadow:inset 0 0 6px rgba(255,178,63,.6);animation:cellGlow 1.2s ease-in-out infinite;}

@keyframes cellGlow{
  0%,100%{box-shadow:inset 0 0 4px rgba(255,178,63,.4);}
  50%{box-shadow:inset 0 0 10px rgba(255,178,63,.8), 0 0 4px rgba(255,178,63,.3);}
}

.wall{display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:0;}
.wallrow{display:flex;gap:4px;}
.wallcell{width:clamp(20px,min(6.4vh,6.6vw),42px);height:clamp(20px,min(6.4vh,6.6vw),42px);border-radius:0;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;}
.wall-icon{width:56%;height:56%;opacity:.4;}
.wall-icon svg{width:100%;height:100%;fill:currentColor;}
.floorwrap{margin-top:8px;flex:0 0 auto;}
.floorwrap .flbl{font-size:.7rem;color:var(--ink-dim);margin-bottom:4px;font-weight:700;}
.floor{display:flex;gap:4px;padding:2px;border-radius:10px;flex-wrap:wrap;}
.floor.selectable{cursor:pointer;}
.floor.selectable:hover{background:rgba(255,178,63,.1);}
.floor.target{background:rgba(255,178,63,.2);}
.fcell{width:clamp(18px,min(5.2vh,5.4vw),36px);height:clamp(18px,min(5.2vh,5.4vw),36px);border-radius:0;background:var(--tile-empty);border:2px solid var(--line);font-size:.65rem;display:flex;align-items:center;justify-content:center;color:var(--ink-dim);font-family:var(--font-head);}

.actionbar{display:flex;justify-content:center;gap:8px;margin:4px 0;min-height:32px;flex:0 0 auto;}
.log{font-size:.72rem;color:var(--ink-dim);text-align:center;min-height:16px;margin-top:6px;flex:0 0 auto;}

.overlay{position:fixed;inset:0;background:rgba(10,6,18,.72);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal{background:var(--panel);border:3px solid var(--pink);border-radius:24px;padding:28px 22px;max-width:380px;width:100%;text-align:center;box-shadow:0 8px 0 var(--line);}
.modal h2{color:var(--azul);margin-bottom:6px;}
.modal .winner{font-size:1.4rem;color:var(--ochre);margin:10px 0;font-family:var(--font-head);}
.finalscores{display:flex;justify-content:space-around;margin:14px 0;}
.finalscores div b{display:block;font-size:1.5rem;font-family:var(--font-head);color:var(--azul);}
.finalscores div span{font-size:.72rem;color:var(--ink-dim);}


/* --- Fixed game layout --- */

.factories{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-template-rows:auto auto;
  gap:8px 4px;
  align-items:center;
  justify-items:center;
  width:100%;
  max-width:520px;
  margin:0 auto 6px;
  padding:8px 0;
}

/* Every factory is exactly the same size */
.factory{
  width:min(28vw, 150px);
  height:min(28vw, 150px);
  max-width:150px;
  max-height:150px;
  min-width:0;
  flex:none;

  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:repeat(2, 1fr);

  gap:0;
  padding:0;
  aspect-ratio:1 / 1;

  border-radius:50%;
  overflow:hidden;

  background:var(--panel);
  border:4px solid var(--panel-2);
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 3px 0 var(--line);

  position:relative;
}

/* First three factories */
.factory:nth-child(1){
  grid-column:1;
  grid-row:1;
}

.factory:nth-child(2){
  grid-column:2;
  grid-row:1;
}

.factory:nth-child(3){
  grid-column:3;
  grid-row:1;
}

/* Bottom two factories, centred */
.factory:nth-child(4){
  grid-column:1;
  grid-row:2;
}

.factory:nth-child(5){
  grid-column:3;
  grid-row:2;
}

/* The four tiles inside each factory are a true 2x2 */
.factory .tile{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  border-radius:0;
  aspect-ratio:1 / 1;
}

/* Keep board horizontal on phones */
.my-half .boards,
.opponent-half .boards{
  flex-direction:row;
  gap:10px;
}

.boardgrid{
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
}

/* Everything that represents a square stays square */
.tile,
.tile.big,
.cell,
.wallcell,
.fcell{
  aspect-ratio:1 / 1;
  border-radius:0;
}

/* No gaps between the four tiles inside a factory. */
.factory .tile{
  margin:0;
  flex:0 0 auto;
}

/* Keep the 2x2 factory tile cluster compact and centred. */
.factory .tile:nth-child(1),
.factory .tile:nth-child(2),
.factory .tile:nth-child(3),
.factory .tile:nth-child(4){
  margin:0;
}

/* Keep the wall and drafting ladder side-by-side even on phones. */
.boardgrid .lines,
.boardgrid .wall{
  flex:0 0 auto;
}

/* Remove the old breakpoint that made the board layout change on phones. */
@media (min-width:900px){
  .my-half .boards, .opponent-half .boards{flex-direction:row;}
}