@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --felt-dark:#0B3B2E;
  --felt:#0E4536;
  --felt-light:#155A46;
  --cream:#F6F1E2;
  --gold:#C9A24B;
  --gold-bright:#E4C170;
  --ink:#16211C;
  --red:#B23A2E;
  --line:rgba(246,241,226,0.14);
  --radius:14px;
  --shadow:0 12px 30px rgba(0,0,0,0.35);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Manrope',sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(228,193,112,0.06), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(228,193,112,0.05), transparent 45%),
    var(--felt-dark);
  color:var(--cream);
  min-height:100%;
}

h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:600;
  letter-spacing:0.2px;
}

.wrap{max-width:960px;margin:0 auto;padding:32px 20px 80px;}

.brand{
  display:flex;align-items:center;gap:10px;margin-bottom:28px;
}
.brand .dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--gold-bright);
  box-shadow:0 0 0 4px rgba(228,193,112,0.15);
}
.brand span{font-family:'Fraunces',serif;font-size:20px;font-weight:600;color:var(--gold-bright);}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}

.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;color:var(--gold-bright);margin-bottom:6px;letter-spacing:0.3px;}
.field input{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.2);
  color:var(--cream);font-size:15px;font-family:'Manrope',sans-serif;
}
.field input:focus{outline:2px solid var(--gold-bright);outline-offset:1px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:10px;border:none;cursor:pointer;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:14.5px;
  background:var(--gold-bright);color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(228,193,112,0.25);}
.btn:active{transform:translateY(0);}
.btn.ghost{
  background:transparent;color:var(--cream);border:1px solid var(--line);
}
.btn.danger{background:var(--red);color:var(--cream);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;}

.error{color:#F0A29B;font-size:13.5px;margin-top:10px;min-height:1em;}
.msg{color:var(--gold-bright);font-size:13.5px;margin-top:10px;min-height:1em;}

.row{display:flex;gap:14px;flex-wrap:wrap;}
.spacer{flex:1;}

.hidden{display:none !important;}

/* Dashboard game grid */
.game-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:24px;
}
.game-tile{
  cursor:pointer;text-align:left;padding:22px;border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  transition:transform .15s ease, border-color .15s ease;
  position:relative;overflow:hidden;
}
.game-tile:hover{transform:translateY(-3px);border-color:var(--gold-bright);}
.game-tile .icon{font-size:34px;display:block;margin-bottom:10px;}
.game-tile h3{margin:0 0 4px;font-size:19px;color:var(--gold-bright);}
.game-tile p{margin:0;font-size:13px;color:rgba(246,241,226,0.65);}

/* Room code "tiles" — the signature element */
.code-row{display:flex;gap:6px;margin:16px 0;}
.code-tile{
  width:38px;height:46px;border-radius:6px;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:var(--ink);font-family:'Fraunces',serif;font-weight:700;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 rgba(0,0,0,0.3), 0 6px 12px rgba(0,0,0,0.3);
  transform:rotate(calc(var(--r,0) * 1deg));
}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.userchip{font-size:13px;color:rgba(246,241,226,0.7);}

.board-wrap{display:flex;gap:24px;flex-wrap:wrap;}
.side-panel{flex:1;min-width:220px;}
.turn-banner{
  padding:10px 14px;border-radius:10px;background:rgba(228,193,112,0.12);
  border:1px solid var(--line);font-size:14px;margin-bottom:14px;
}
.dice{
  width:56px;height:56px;border-radius:12px;background:var(--cream);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;
  cursor:pointer;user-select:none;border:2px solid var(--gold-bright);
}
.dice:active{transform:scale(0.96);}

.player-list{list-style:none;padding:0;margin:0;}
.player-list li{
  padding:8px 10px;border-radius:8px;margin-bottom:6px;font-size:14px;
  background:rgba(255,255,255,0.03);
  display:flex;justify-content:space-between;
}
.player-list li.active{outline:1px solid var(--gold-bright);}

footer.hint{margin-top:40px;font-size:12.5px;color:rgba(246,241,226,0.45);text-align:center;}

/* Board picker (Snakes & Ladders) */
.board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0;}
.board-pick{
  border-radius:10px;padding:12px;text-align:left;cursor:pointer;border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.board-pick.selected{border-color:var(--gold-bright);background:rgba(228,193,112,.12);}
.board-pick .bicon{font-size:22px;}
.board-pick .bname{display:block;font-size:12.5px;margin-top:4px;color:var(--cream);}

/* Chat / call dock */
#comms-dock{
  position:fixed;right:16px;bottom:16px;width:300px;max-height:70vh;
  background:var(--felt);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;z-index:80;
}
.comms-tabs{display:flex;border-bottom:1px solid var(--line);}
.comms-tab{flex:1;background:none;border:none;color:rgba(246,241,226,.6);padding:10px;font-size:13px;cursor:pointer;font-family:'Manrope',sans-serif;font-weight:700;}
.comms-tab.active{color:var(--gold-bright);border-bottom:2px solid var(--gold-bright);}
.comms-panel{padding:10px;display:flex;flex-direction:column;gap:8px;}
.comms-log{height:180px;overflow-y:auto;font-size:12.5px;display:flex;flex-direction:column;gap:4px;}
.comms-msg{padding:4px 6px;border-radius:6px;background:rgba(255,255,255,.03);}
.comms-emojis{display:flex;gap:4px;}
.emoji-btn{background:none;border:1px solid var(--line);border-radius:8px;padding:4px 8px;cursor:pointer;font-size:15px;}
.comms-input-row{display:flex;gap:6px;}
.comms-input-row input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--cream);}
.comms-videos{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:220px;overflow-y:auto;}
.video-tile{position:relative;background:#000;border-radius:8px;overflow:hidden;aspect-ratio:4/3;}
.video-tile video{width:100%;height:100%;object-fit:cover;}
.video-tile span{position:absolute;bottom:2px;left:4px;font-size:10px;background:rgba(0,0,0,.5);padding:1px 5px;border-radius:6px;}
#comms-toggle-audio.active,#comms-toggle-video.active{background:var(--gold-bright);color:var(--ink);}

@keyframes floatUp{
  0%{transform:translateY(0);opacity:1;}
  100%{transform:translateY(-140px);opacity:0;}
}

@media (max-width:640px){
  #comms-dock{left:10px;right:10px;width:auto;bottom:10px;max-height:50vh;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}