:root{
  --bg-deep:#0b1520;
  --bg:#10202e;
  --panel:#152a3b;
  --panel-edge:#2b4457;
  --ink:#e8eef2;
  --muted:#8fa6b5;
  --brass:#e0a43a;
  --brass-dim:#a97c25;
  --card-face:#faf7ef;
  --card-ink:#26201a;
  --card-red:#b23a34;
  --good:#57c4bb;
  --bad:#e8764a;
  font-family:'Avenir Next','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;min-height:100vh;color:var(--ink);
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, #1a3348 0%, var(--bg) 45%, var(--bg-deep) 100%);
  padding:14px;display:flex;justify-content:center;
}
.app{width:100%;max-width:900px;}
.masthead h1{
  font-family:'Copperplate','Trajan Pro',Georgia,serif;letter-spacing:5px;text-align:center;
  font-size:28px;margin:2px 0 0;color:var(--brass);text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.subtitle{text-align:center;color:var(--muted);font-size:12.5px;letter-spacing:1.5px;margin:2px 0 16px;}

.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
  border:1px solid var(--panel-edge);border-radius:14px;padding:16px;margin-bottom:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
label{font-size:12.5px;color:var(--muted);display:block;margin:0 0 6px;letter-spacing:.5px;}
input[type=text]{
  width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--panel-edge);
  background:#0d1a26;color:var(--ink);font-size:16px;font-family:inherit;outline:none;
}
input[type=text]:focus{border-color:var(--brass-dim);}
input.codeInput{letter-spacing:6px;text-transform:uppercase;font-family:'Courier New',monospace;font-weight:bold;}
button{
  font-family:inherit;font-size:14px;letter-spacing:.3px;
  background:linear-gradient(180deg,#efc056,var(--brass));color:#2b2205;
  border:1px solid #8a6d16;border-radius:9px;padding:10px 16px;cursor:pointer;font-weight:700;
  box-shadow:0 2px 0 #6b5310, 0 4px 10px rgba(0,0,0,.3);
}
button:hover{filter:brightness(1.07);}
button:active{transform:translateY(1px);}
button.ghost{background:transparent;color:var(--brass);border:1px solid var(--brass-dim);box-shadow:none;font-weight:600;}
button.subtle{background:transparent;color:var(--muted);border:1px solid var(--panel-edge);box-shadow:none;font-weight:500;font-size:12.5px;padding:6px 10px;}
button:disabled{opacity:.4;cursor:not-allowed;}
.row{display:flex;gap:10px;flex-wrap:wrap;}
.row>*{flex:1;min-width:110px;}
.centerText{text-align:center;}
.smallmuted{color:var(--muted);font-size:12.5px;}
hr.rule{border:none;border-top:1px solid var(--panel-edge);margin:14px 0;}

/* room code display */
.code{
  font-family:'Courier New',monospace;font-size:34px;letter-spacing:10px;text-align:center;
  color:var(--brass);font-weight:bold;margin:6px 0;text-shadow:0 2px 5px rgba(0,0,0,.5);
}

/* theme picker */
.themeGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:560px){.themeGrid{grid-template-columns:1fr;}}
.themeTile{
  border:2px solid var(--panel-edge);border-radius:12px;padding:8px;cursor:pointer;
  background:rgba(0,0,0,.18);transition:border-color .15s;
}
.themeTile:hover{border-color:var(--brass-dim);}
.themeTile.selected{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass);}
.themeTile .tname{font-size:12.5px;color:var(--ink);margin-top:6px;text-align:center;font-weight:600;}
.themeTile svg{display:block;width:100%;height:auto;border-radius:8px;}

/* board */
.boardWrap{overflow-x:auto;margin-bottom:14px;border-radius:16px;}
.boardWrap > svg{display:block;width:100%;min-width:680px;height:auto;}

/* compact board (narrow viewports) */
.cboard{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
  border:1px solid var(--panel-edge);border-radius:14px;padding:12px 14px 6px;
  display:flex;flex-direction:column;gap:2px;
}
.crow{padding:4px 0 0;}
.chead{display:flex;align-items:baseline;gap:8px;}
.cswatch{width:12px;height:12px;border-radius:50%;flex:none;align-self:center;box-shadow:0 0 6px rgba(0,0,0,.4);}
.cname{flex:1;font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cscore{font-family:'Courier New',monospace;font-size:26px;font-weight:bold;color:var(--ink);line-height:1;}
.cof{font-family:'Courier New',monospace;font-size:12px;color:var(--muted);}
.ctrack{display:block;width:100%;height:auto;}

/* cards */
.hand{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0;}
.playmat{
  display:flex;gap:7px;flex-wrap:wrap;justify-content:center;align-items:center;margin:10px 0;min-height:74px;
  background:rgba(0,0,0,.2);border-radius:10px;padding:10px;border:1px dashed var(--panel-edge);
}
.pcard{
  width:56px;height:80px;background:var(--card-face);border-radius:7px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:5px 6px;font-weight:bold;font-size:15px;color:var(--card-ink);
  box-shadow:0 3px 7px rgba(0,0,0,.45);cursor:default;user-select:none;
  border:1px solid rgba(0,0,0,.15);transition:transform .12s;position:relative;
}
.pcard.clickable{cursor:pointer;}
.pcard.clickable:hover{transform:translateY(-4px);}
.pcard.red{color:var(--card-red);}
.pcard.selected{outline:3px solid var(--brass);transform:translateY(-6px);}
.pcard.disabled{opacity:.35;}
.pcard .rank{line-height:1;}
.pcard .suit{font-size:19px;text-align:center;}
.pcard .rank.bottom{align-self:flex-end;transform:rotate(180deg);}
.pcard.small{width:44px;height:62px;font-size:12px;}
.pcard.small .suit{font-size:15px;}
.pcard .who{
  position:absolute;bottom:-16px;left:0;right:0;text-align:center;
  font-size:9.5px;color:var(--muted);font-weight:600;
}
.playmat .pcard{margin-bottom:14px;}

.turnBanner{text-align:center;font-size:16px;font-weight:700;color:var(--brass);margin:2px 0 8px;letter-spacing:.4px;}
.waitBanner{
  text-align:center;font-size:14.5px;color:var(--muted);padding:14px 8px;
  border:1px dashed var(--panel-edge);border-radius:10px;margin:8px 0;
}
.count31{font-family:'Courier New',monospace;font-size:30px;font-weight:bold;color:var(--brass);text-align:center;margin:4px 0;}
.starterChip{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
  background:rgba(0,0,0,.2);border-radius:20px;padding:4px 12px;
}

.log{
  max-height:150px;overflow-y:auto;font-size:12.5px;color:var(--muted);
  background:rgba(0,0,0,.22);border-radius:9px;padding:8px 11px;margin-top:12px;line-height:1.55;
}
.scoreBreak{font-size:13px;color:var(--muted);line-height:1.7;margin:8px 0;}
.scoreBreak b{color:var(--brass);}
.showBlock{border:1px solid var(--panel-edge);border-radius:11px;padding:10px 12px;margin:10px 0;}
.showBlock .pts{font-size:21px;font-weight:800;color:var(--brass);}

.gameItem{
  display:flex;align-items:center;gap:12px;padding:11px 6px;border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer;border-radius:8px;
}
.gameItem:hover{background:rgba(255,255,255,.04);}
.gameItem .gcode{font-family:'Courier New',monospace;font-weight:bold;color:var(--brass);font-size:16px;letter-spacing:2px;}
.gameItem .gstatus{flex:1;font-size:13px;color:var(--muted);}
.gameItem .yourTurn{color:var(--good);font-weight:700;}
.badge{
  display:inline-block;background:rgba(224,164,58,.15);border:1px solid var(--brass-dim);
  color:var(--brass);border-radius:20px;padding:2px 9px;font-size:11px;margin-left:6px;
}
.winnerScreen{text-align:center;padding:26px 10px;}
.winnerScreen h2{color:var(--brass);font-size:28px;margin:0 0 6px;}
.playersWait{display:flex;flex-direction:column;gap:6px;margin:10px 0;}
.playersWait .seatRow{display:flex;gap:10px;align-items:center;font-size:14.5px;}
.dot{width:11px;height:11px;border-radius:50%;flex:none;}

#toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:#2b1214;color:#ffd9d2;border:1px solid var(--bad);border-radius:10px;
  padding:10px 18px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:50;
  max-width:90vw;text-align:center;
}
#toast.on{opacity:1;}
#toast.ok{background:#0f2a24;color:#c8f2ec;border-color:var(--good);}

/* ---------- animation & feel ---------- */

/* soft phase entrance instead of a hard swap */
@keyframes phaseIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.phase-in{animation:phaseIn .45s cubic-bezier(.2,.7,.3,1) backwards;}

/* staggered deal: cards drop in from the deck */
@keyframes dealIn{
  from{opacity:0;transform:translateY(-64px) translateX(26px) rotate(9deg) scale(1.06);}
  to{opacity:1;transform:none;}
}
.pcard.deal-in{animation:dealIn .5s cubic-bezier(.2,.75,.3,1.05) backwards;animation-delay:calc(var(--i,0)*95ms);}

/* card tossed onto the play mat */
@keyframes tossIn{
  from{opacity:0;transform:translateY(-38px) rotate(-7deg) scale(1.18);}
  60%{opacity:1;transform:translateY(3px) rotate(1.5deg) scale(.98);}
  to{opacity:1;transform:none;}
}
.pcard.toss-in{animation:tossIn .42s cubic-bezier(.2,.8,.3,1);}

/* count pulse + floating score reason */
.countWrap{position:relative;}
@keyframes countPulse{0%{transform:scale(1);}30%{transform:scale(1.22);color:#fff;text-shadow:0 0 14px rgba(224,164,58,.8);}100%{transform:scale(1);}}
.count31.pulse{animation:countPulse .75s ease;}
@keyframes popRise{
  0%{opacity:0;transform:translate(-50%,6px) scale(.85);}
  18%{opacity:1;transform:translate(-50%,-4px) scale(1.05);}
  75%{opacity:1;transform:translate(-50%,-16px) scale(1);}
  100%{opacity:0;transform:translate(-50%,-28px) scale(.96);}
}
.scorePop{
  position:absolute;left:50%;top:-8px;transform:translateX(-50%);
  background:rgba(224,164,58,.16);border:1px solid var(--brass);color:var(--brass);
  border-radius:18px;padding:4px 14px;font-size:13.5px;font-weight:700;white-space:nowrap;
  animation:popRise 2.3s ease forwards;pointer-events:none;z-index:5;max-width:92vw;
  overflow:hidden;text-overflow:ellipsis;
}

/* synchronized cut-for-starter flip */
.flipWrap{display:flex;justify-content:center;margin:22px 0 14px;perspective:900px;}
.flipCard{width:92px;height:130px;position:relative;}
.flipInner{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.3,.65,.25,1);
}
.flipInner.flipped{transform:rotateY(180deg);}
.flipFace{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  width:92px;height:130px;border-radius:9px;
}
.flipBack{
  background:
    radial-gradient(circle at 50% 50%, rgba(224,164,58,.12) 0 26%, transparent 27%),
    repeating-linear-gradient(45deg,#274a63,#274a63 6px,#1c374a 6px,#1c374a 12px);
  border:2px solid #142838;
  box-shadow:0 4px 10px rgba(0,0,0,.5), inset 0 0 0 3px rgba(247,241,227,.14);
  display:flex;align-items:center;justify-content:center;
}
.flipBack::after{content:'⚓';font-size:36px;color:rgba(224,164,58,.6);text-shadow:0 1px 3px rgba(0,0,0,.6);}
.flipFace.pcard{font-size:24px;padding:8px 9px;}
.flipFace .suit{font-size:32px;}
.flipFront{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:space-between;}
@keyframes shuffleWiggle{
  0%,100%{transform:translateX(0) rotate(0deg);}
  20%{transform:translateX(-7px) rotate(-3.5deg);}
  45%{transform:translateX(6px) rotate(3deg);}
  70%{transform:translateX(-4px) rotate(-2deg);}
}
.flipCard.shuffling{animation:shuffleWiggle 1.1s ease-in-out infinite;}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .phase-in,.pcard.deal-in,.pcard.toss-in,.count31.pulse,.flipCard.shuffling{animation:none;}
  .flipInner{transition:none;}
}

/* mobile: bigger tap targets, roomier spacing */
@media(max-width:520px){
  body{padding:10px;}
  button{min-height:44px;padding:12px 18px;font-size:15px;}
  button.subtle{min-height:38px;}
  .hand{gap:11px;}
  .pcard{width:64px;height:92px;font-size:17px;border-radius:8px;}
  .pcard .suit{font-size:23px;}
  .pcard.small{width:48px;height:68px;font-size:13px;}
  .pcard.small .suit{font-size:16px;}
  .playmat{gap:9px;}
  input[type=text]{padding:12px 13px;}
}