:root{
  --tx:1;
  --felt:#073c24; --felt2:#0b5d35; --felt3:#052416; --gold:#d5a936; --gold2:#ffdf74; --cream:#fff7e6;
  --red:#c7352d; --blue:#145a96; --purple:#672f88; --ink:#07140d; --panel:rgba(2,24,13,.82);
  --zoom:1; --card-w:calc(clamp(48px,6.2vw,76px)*var(--zoom)); --card-h:calc(var(--card-w)*1.42);
}
*{box-sizing:border-box} html,body,#app{height:100%;margin:0} body{font-family:Inter,system-ui,sans-serif;color:var(--cream);overflow:hidden;background:#052b1b url('assets/felt-bg.png') center/cover no-repeat fixed} button{font:inherit;cursor:pointer} .hidden{display:none!important}.view{position:fixed;inset:0}
.view:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 25%,rgba(23,130,75,.38),rgba(0,0,0,.25) 55%,rgba(0,0,0,.62));pointer-events:none}.home-view{display:grid;place-items:center;overflow:hidden}.home-stack{position:relative;z-index:2;width:min(92vw,1120px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2vh,22px);padding:clamp(8px,2vh,22px)}.hero-logo{width:min(72vw,840px);max-height:64vh;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}.side-badge{position:absolute;z-index:1;width:clamp(240px,30vw,430px);filter:drop-shadow(0 18px 22px rgba(0,0,0,.52));opacity:.98}.hand-badge{left:clamp(0px,2.5vw,64px);top:38%;transform:translateY(-50%)}.foot-badge{right:clamp(0px,2.5vw,64px);top:38%;transform:translateY(-50%)}.home-buttons{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:clamp(10px,1.6vw,18px);width:min(90vw,1180px)}.home-btn{min-height:74px;border-radius:18px;border:3px solid rgba(255,223,116,.8);color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(.9rem,1.6vw,1.22rem);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 9px 0 rgba(0,0,0,.25),0 18px 28px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;gap:12px;text-shadow:0 2px 2px rgba(0,0,0,.65)}.home-btn span{font-size:1.55em}.home-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}.green{background:linear-gradient(#28a334,#056320)}.blue{background:linear-gradient(#277cb9,#064b83)}.purple{background:linear-gradient(#8742b0,#552071)}.gold{background:linear-gradient(#d5a936,#7c5a14)}.home-credit{margin:0;color:rgba(255,247,230,.7);font-size:.9rem}.panel-view{display:grid;place-items:center;padding:24px}.glass-panel{position:relative;z-index:2;background:linear-gradient(155deg,rgba(6,61,36,.94),rgba(2,25,14,.96));border:2px solid rgba(213,169,54,.8);border-radius:28px;padding:28px;box-shadow:0 22px 60px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.16)}.narrow{width:min(92vw,620px)}.back-btn,.modal-close{border:0;background:transparent;color:var(--gold2);font-weight:800}.glass-panel h1{font-family:'Bree Serif',serif;font-size:clamp(2rem,5vw,3.7rem);text-align:center;margin:6px 0 10px}.glass-panel p{text-align:center;color:rgba(255,247,230,.78);line-height:1.6}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.choice{border:2px solid rgba(213,169,54,.4);border-radius:18px;padding:16px;text-align:center;background:rgba(0,0,0,.22)}.choice input{display:none}.choice span{font-size:2.1rem;display:block}.choice b{display:block;color:var(--gold2)}.choice.checked{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(213,169,54,.22)}.option-line{display:block;margin:12px 0;color:rgba(255,247,230,.86)}.primary{width:100%;padding:16px;border-radius:16px;border:2px solid var(--gold2);font-weight:900;text-transform:uppercase;background:linear-gradient(#28a334,#056320);color:#fff;margin-top:16px}
.game-view{display:flex;flex-direction:column;background:rgba(0,0,0,.08)}.game-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:rgba(0,0,0,.52);border-bottom:2px solid rgba(213,169,54,.45)}.mini-logo{border:0;background:transparent;color:#fff;display:flex;align-items:baseline;gap:4px;font-size:clamp(.8rem,1.6vw,1.1rem);text-shadow:0 2px 2px #000}.mini-logo i{font-family:'Playfair Display',serif;color:var(--gold2)}.round-badge{background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold));color:#191000;padding:7px 14px;border-radius:999px;font-weight:900}.score-badges{display:flex;gap:8px}.score-chip{border:1px solid rgba(213,169,54,.55);border-radius:999px;padding:6px 10px;background:rgba(0,0,0,.32);font-weight:800}.score-chip.active{border-color:var(--gold2);box-shadow:0 0 16px rgba(213,169,54,.25)}.table{position:relative;z-index:1;flex:1;min-height:0;display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:10px}.opponents{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mini-player{background:rgba(0,0,0,.28);border:1px solid rgba(213,169,54,.25);border-radius:16px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.mini-player.active{border-color:var(--gold2);box-shadow:0 0 18px rgba(213,169,54,.22)}.mini-card-stack{display:flex;margin-left:auto}.mini-card{width:22px;height:32px;border-radius:4px;background:repeating-linear-gradient(135deg,#073f8a,#073f8a 4px,#1263b8 4px,#1263b8 8px);border:1px solid #7bb7ff;margin-left:-12px;box-shadow:0 2px 4px #000}.team-board{display:grid;grid-template-columns:minmax(230px,1fr) minmax(280px,420px) minmax(230px,1fr);gap:10px;min-height:0}.team-panel,.center-piles,.player-area{background:rgba(0,0,0,.28);border:2px solid rgba(213,169,54,.25);border-radius:22px;padding:12px;box-shadow:inset 0 1px rgba(255,255,255,.08);overflow:hidden}.team-panel h2{margin:0 0 10px;color:var(--gold2);font-size:clamp(.8rem,1.2vw,1rem);text-transform:uppercase;letter-spacing:.08em}.meld-zone{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px;overflow:auto;max-height:100%}.center-piles{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}.turn-box{grid-column:1/-1;background:rgba(0,0,0,.34);border:1px solid rgba(213,169,54,.25);border-radius:18px;padding:14px;text-align:center;min-height:110px}.turn-box strong{color:var(--gold2);font-size:1.2rem}.turn-box p{line-height:1.45;color:rgba(255,247,230,.84)}.pile-wrap{text-align:center;color:rgba(255,247,230,.75);font-weight:800;text-transform:uppercase}.pile{height:150px;width:104px;border-radius:12px;border:2px solid rgba(255,255,255,.45);display:grid;place-items:center;margin:auto;box-shadow:0 9px 18px rgba(0,0,0,.45)}.stock-pile{background:repeating-linear-gradient(135deg,#073f8a,#073f8a 6px,#1263b8 6px,#1263b8 12px);color:#fff}.stock-pile span{font-size:2rem}.discard-pile{background:rgba(255,255,255,.08)}.player-area{min-height:170px}.player-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.player-head strong{font-size:1.1rem;color:var(--gold2)}.player-head span{margin-left:10px;color:rgba(255,247,230,.65)}.cards-left{color:rgba(255,247,230,.65)}.hand-row{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;padding:8px 2px 20px;min-height:calc(var(--card-h) + 34px);max-width:100%;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:auto;overscroll-behavior-x:contain}.card{width:var(--card-w);height:var(--card-h);flex:0 0 auto;border-radius:10px;background:#fff9ed;border:2px solid #ddd;box-shadow:0 6px 10px rgba(0,0,0,.34);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:6px;font-weight:900;color:#151515;position:relative;transition:.12s}.card.red{color:var(--red)}.card.wild{color:#7026a8}.card:hover{transform:translateY(-5px)}.card.selected{transform:translateY(-14px);border-color:var(--gold2);box-shadow:0 0 0 4px rgba(255,223,116,.8),0 12px 18px rgba(0,0,0,.5)}.card .suit{font-size:1.7em;align-self:center;margin:auto}.card .bottom{align-self:flex-end;transform:rotate(180deg)}.card.back{background:repeating-linear-gradient(135deg,#073f8a,#073f8a 5px,#1263b8 5px,#1263b8 10px);border-color:#7bb7ff}.meld{width:72px;height:96px;border-radius:11px;background:#fff9ed;color:#111;border:3px solid rgba(255,255,255,.8);box-shadow:0 8px 12px rgba(0,0,0,.36);position:relative;padding:7px;font-weight:900;text-align:left}.meld.red-book{border-color:#ff514a}.meld.black-book{border-color:#222}.meld.dirty{border-color:#333}.meld .m-suit{font-size:2rem;text-align:center}.meld .m-count{position:absolute;top:-8px;right:-8px;width:25px;height:25px;border-radius:50%;background:var(--gold);color:#111;display:grid;place-items:center;font-size:.8rem}.meld .m-tag{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-size:.58rem;background:#111;color:#fff;border-radius:4px;padding:2px 5px;white-space:nowrap}.meld.selectable{cursor:pointer}.meld.selectable:hover{transform:translateY(-4px)}.game-actions{position:relative;z-index:3;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:10px;background:rgba(0,0,0,.58);border-top:2px solid rgba(213,169,54,.45)}.game-actions button{border-radius:12px;border:2px solid rgba(213,169,54,.65);background:linear-gradient(#105f38,#063a22);color:#fff;font-weight:900;text-transform:uppercase;padding:12px 8px}.game-actions button:disabled{opacity:.38;cursor:not-allowed}.game-actions .danger{background:linear-gradient(#9d2821,#58120f)}.game-actions .gold{background:linear-gradient(#d5a936,#7c5a14);color:#201300}.modal{border:2px solid var(--gold);border-radius:24px;padding:0;background:linear-gradient(150deg,#0c5632,#041d11);color:#fff;width:min(92vw,780px);box-shadow:0 25px 75px rgba(0,0,0,.7)}.modal::backdrop{background:rgba(0,0,0,.72)}.modal-close{position:absolute;right:14px;top:10px;font-size:2rem}.modal #modalBody{padding:32px;max-height:80vh;overflow:auto}.modal h2{color:var(--gold2);font-size:2rem}.modal table{width:100%;border-collapse:collapse}.modal th,.modal td{border-bottom:1px solid rgba(213,169,54,.25);padding:8px;text-align:left}.modal code{color:var(--gold2)}
@media(max-width:900px){body{overflow:auto} .view{min-height:100%;position:absolute}.side-badge{opacity:.72;width:clamp(150px,32vw,240px)}.hand-badge{left:-34px;top:28%}.foot-badge{right:-34px;top:28%}.hero-logo{width:min(92vw,760px)}.home-buttons{grid-template-columns:1fr 1fr}.team-board{grid-template-columns:1fr;grid-template-rows:auto auto auto}.center-piles{order:-1}.opponents{grid-template-columns:1fr}.game-actions{grid-template-columns:repeat(3,1fr)}.score-badges{font-size:.8rem}.game-top{flex-wrap:wrap;justify-content:center}.pile{height:120px;width:84px}} 
@media(max-width:560px){:root{--card-w:54px}.home-buttons{grid-template-columns:1fr}.home-btn{min-height:62px}.choice-grid{grid-template-columns:1fr}.center-piles{grid-template-columns:1fr 1fr}.turn-box{min-height:90px}.game-actions{grid-template-columns:repeat(2,1fr)}.hero-logo{max-height:48vh}.home-credit{font-size:.75rem}}


/* v3.1 menu and invite updates */
.multiplayer-panel{
  margin:18px 0 4px;
  padding:16px;
  border:1px solid rgba(213,169,54,.4);
  border-radius:18px;
  background:rgba(0,0,0,.26);
}
.multiplayer-panel h2{
  margin:0 0 8px;
  color:var(--gold2);
  text-align:center;
  font-size:1.15rem;
}
.invite-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-top:12px;
}
.invite-row input{
  min-width:0;
  border-radius:12px;
  border:1px solid rgba(213,169,54,.55);
  background:rgba(0,0,0,.32);
  color:var(--cream);
  padding:12px;
  font:inherit;
}
.invite-row button{
  border-radius:12px;
  border:2px solid rgba(213,169,54,.75);
  background:linear-gradient(#277cb9,#064b83);
  color:#fff;
  font-weight:900;
  text-transform:uppercase;
  padding:10px 14px;
}
@media(max-width:560px){
  .invite-row{grid-template-columns:1fr}
  .side-badge{opacity:.56;width:150px}
  .hand-badge{left:-60px;top:22%}
  .foot-badge{right:-60px;top:22%}
}


/* v3.2 zoom and card-row fixes */
.zoom-controls{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(213,169,54,.45);
  border-radius:999px;
  padding:4px 6px;
}
.zoom-controls button{
  width:34px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,223,116,.75);
  background:linear-gradient(#105f38,#063a22);
  color:#fff;
  font-weight:900;
  line-height:1;
}
.zoom-controls span{
  min-width:48px;
  text-align:center;
  color:var(--gold2);
  font-weight:900;
  font-size:.86rem;
}
.hand-row::-webkit-scrollbar{height:12px}
.hand-row::-webkit-scrollbar-track{background:rgba(0,0,0,.22);border-radius:999px}
.hand-row::-webkit-scrollbar-thumb{background:rgba(213,169,54,.82);border-radius:999px}
@media(max-width:900px){
  .game-top{position:sticky;top:0}
  .player-area{position:sticky;bottom:58px;z-index:4;background:rgba(0,0,0,.42)}
}


/* v3.3 improved rules, winner splash, audio controls */
.rules-panel{
  display:grid;
  gap:18px;
}
.rules-hero{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  border:1px solid rgba(255,223,116,.28);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,223,116,.12),rgba(0,0,0,.16));
}
.rules-hero-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:2rem;
  background:radial-gradient(circle at 35% 30%,#ffdf74,#8d6517);
  color:#102013;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  flex:0 0 auto;
}
.rules-hero h2{
  margin:0 0 4px;
  color:var(--gold2);
  font-size:clamp(1.8rem,3vw,2.45rem);
  line-height:1.05;
}
.rules-hero p{
  margin:0;
  color:rgba(255,247,230,.88);
  font-size:1.02rem;
  line-height:1.45;
}
.rules-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.rule-card{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(213,169,54,.35);
  background:rgba(0,0,0,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.rule-card.full{
  grid-column:1/-1;
}
.rule-card h3{
  margin:0 0 10px;
  color:var(--gold2);
  font-size:1.18rem;
  display:flex;
  align-items:center;
  gap:8px;
}
.rule-card p,
.rule-card li{
  font-size:1rem;
  line-height:1.5;
  color:rgba(255,247,230,.9);
}
.rule-card ul{
  margin:8px 0 0 20px;
  padding:0;
}
.opening-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
}
.opening-table td,
.opening-table th{
  border:0;
  padding:10px 12px;
  background:rgba(0,0,0,.22);
}
.opening-table th{
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.85rem;
}
.opening-table td:first-child,
.opening-table th:first-child{
  border-radius:10px 0 0 10px;
}
.opening-table td:last-child,
.opening-table th:last-child{
  border-radius:0 10px 10px 0;
  text-align:right;
  font-weight:900;
}
.rules-tip{
  padding:12px 14px;
  border-left:4px solid var(--gold2);
  border-radius:12px;
  background:rgba(255,223,116,.12);
  color:rgba(255,247,230,.95);
  line-height:1.45;
  font-size:1.02rem;
}
.settings-grid{
  display:grid;
  gap:14px;
}
.setting-card{
  padding:16px;
  border:1px solid rgba(213,169,54,.35);
  border-radius:18px;
  background:rgba(0,0,0,.22);
}
.setting-card h3{
  margin:0 0 8px;
  color:var(--gold2);
}
.audio-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:12px 0;
  font-size:1rem;
}
.audio-row input[type="range"]{
  width:min(260px,45vw);
}
.toggle-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.toggle-pill input{
  transform:scale(1.25);
}
.winner-card{
  text-align:center;
  display:grid;
  gap:16px;
}
.winner-badge{
  margin:auto;
  width:96px;
  height:96px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:3rem;
  background:radial-gradient(circle at 35% 25%,#ffef9a,#d5a936 55%,#6c4a0d);
  color:#102013;
  box-shadow:0 16px 30px rgba(0,0,0,.48), inset 0 2px 0 rgba(255,255,255,.45);
}
.winner-card h2{
  margin:0;
  color:var(--gold2);
  font-size:clamp(2rem,4vw,3rem);
}
.winner-card p{
  margin:0;
  font-size:1.08rem;
  color:rgba(255,247,230,.92);
}
.winner-score{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.winner-score div{
  padding:14px;
  border-radius:16px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(213,169,54,.32);
}
.winner-score strong{
  display:block;
  color:var(--gold2);
  font-size:1.4rem;
  margin-top:4px;
}
@media(max-width:720px){
  .rules-grid{grid-template-columns:1fr}
  .rules-hero{align-items:flex-start}
  .winner-score{grid-template-columns:1fr}
}


/* v3.4.5 meld panel scrollbar/row-height fix */
.team-panel,
.team-panel.enemy,
.team-panel.friendly{
  overflow: visible !important;
  min-height: 260px;
}

.meld-zone{
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  max-height: none !important;
  height: auto !important;
  min-height: 128px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 4px 18px;
}

.meld{
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.team-board{
  align-items: stretch;
}

/* Hide any browser scrollbar accidentally attached inside meld areas */
.team-panel::-webkit-scrollbar,
.meld-zone::-webkit-scrollbar{
  display: none;
}
.team-panel,
.meld-zone{
  scrollbar-width: none;
}

/* Tablet-friendly minimum space so labels and card bottoms do not get clipped */
@media(max-width:900px){
  .team-panel{
    min-height: 220px;
  }
  .meld-zone{
    min-height: 118px;
    gap: 12px;
    padding-bottom: 22px;
  }
}


/* v3.4.6 human player stats */
.player-head div:first-child{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
#handMode{
  color:rgba(255,247,230,.78);
  font-weight:700;
}
#cardsLeft{
  display:none;
}


/* v3.4.9 single-player menu restoration */
.top-menu{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 14px);
  left:calc(env(safe-area-inset-left, 0px) + 14px);
  z-index:50;
}
.hamburger{
  width:46px;
  height:46px;
  border-radius:14px;
  border:2px solid rgba(255,223,116,.65);
  background:rgba(0,0,0,.44);
  color:var(--gold2,#ffdf74);
  font-size:1.45rem;
  font-weight:900;
  box-shadow:0 8px 18px rgba(0,0,0,.36);
}
.menu-panel{
  position:absolute;
  top:56px;
  left:0;
  min-width:245px;
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,223,116,.58);
  background:linear-gradient(150deg,rgba(5,64,38,.97),rgba(2,20,12,.98));
  box-shadow:0 18px 45px rgba(0,0,0,.5);
}
.menu-panel button,
.menu-panel a{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,223,116,.28);
  background:rgba(0,0,0,.20);
  color:var(--cream,#fff7e6);
  text-decoration:none;
  font-weight:800;
}
.menu-panel button:hover,
.menu-panel a:hover{
  background:rgba(255,223,116,.14);
}
.single-player-menu{
  grid-template-columns:repeat(3,minmax(150px,1fr)) !important;
  max-width:min(860px,92vw);
}
.developer-card{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  max-width:min(860px,92vw);
  margin-top:4px;
  padding:10px 14px;
  border:1px solid rgba(255,223,116,.26);
  border-radius:16px;
  background:rgba(0,0,0,.22);
  color:rgba(255,247,230,.82);
  font-size:.92rem;
}
.developer-card strong{
  color:var(--gold2,#ffdf74);
}
.developer-card a{
  color:var(--gold2,#ffdf74);
  font-weight:900;
  text-decoration:none;
  border-bottom:1px solid rgba(255,223,116,.45);
}
.modal a{
  color:var(--gold2,#ffdf74);
  font-weight:900;
}
@media(max-width:720px){
  .single-player-menu{
    grid-template-columns:1fr !important;
  }
  .top-menu{
    top:10px;
    left:10px;
  }
}


/* v3.5.0 integrated header/menu cleanup */
.app-header{position:relative;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 18px;background:linear-gradient(180deg,rgba(0,34,19,.84),rgba(0,19,11,.42));border-bottom:1px solid rgba(255,223,116,.22)}
.app-header-left,.app-header-right{display:flex;align-items:center;gap:12px}
.app-wordmark{color:var(--cream,#fff7e6);text-decoration:none;display:flex;align-items:baseline;gap:4px;letter-spacing:.02em;text-shadow:0 2px 2px rgba(0,0,0,.65)}
.app-wordmark i{font-family:'Playfair Display',serif;color:var(--gold2,#ffdf74);font-weight:900}
.hamburger,.fullscreen-btn{width:44px;height:44px;border-radius:12px;border:2px solid rgba(255,223,116,.65);background:rgba(0,0,0,.35);color:var(--gold2,#ffdf74);font-size:1.3rem;font-weight:900;box-shadow:none}
.menu-panel{position:absolute;top:58px;left:18px;min-width:245px;display:grid;gap:8px;padding:12px;border-radius:18px;border:1px solid rgba(255,223,116,.58);background:linear-gradient(150deg,rgba(5,64,38,.98),rgba(2,20,12,.99));box-shadow:0 18px 45px rgba(0,0,0,.5)}
.menu-panel button,.menu-panel a{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,223,116,.28);background:rgba(0,0,0,.20);color:var(--cream,#fff7e6);text-decoration:none;font-weight:800}
.header-score-badges{display:flex;gap:8px}
.home-view,.game-view,.panel-view{inset:64px 0 0 0}
.single-player-menu{grid-template-columns:repeat(3,minmax(150px,1fr)) !important;max-width:min(860px,92vw)}
.developer-card,.home-credit{display:none !important}
@media(max-width:720px){.app-header{flex-wrap:wrap;padding:8px 10px}.header-score-badges{font-size:.82rem}.single-player-menu{grid-template-columns:1fr !important}.menu-panel{left:10px;top:54px}}


/* v3.6.0 stabilization fixes */
.app-header{
  position:relative !important;
  z-index:60;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 18px;
  background:linear-gradient(180deg,rgba(0,34,19,.9),rgba(0,19,11,.58));
  border-bottom:1px solid rgba(255,223,116,.22);
}
.app-header-left,
.app-header-center,
.app-header-right{
  display:flex;
  align-items:center;
  gap:12px;
}
.app-header-center{
  flex:1;
  justify-content:center;
}
.app-header-right{
  justify-content:flex-end;
}
.app-wordmark{
  color:var(--cream,#fff7e6);
  text-decoration:none;
  display:flex;
  align-items:baseline;
  gap:4px;
  letter-spacing:.02em;
  white-space:nowrap;
  text-shadow:0 2px 2px rgba(0,0,0,.65);
}
.app-wordmark i{
  font-family:'Playfair Display',serif;
  color:var(--gold2,#ffdf74);
  font-weight:900;
}
.game-top{
  display:none !important;
}
.home-view,
.game-view,
.panel-view{
  inset:64px 0 0 0;
}
.hamburger,
.fullscreen-btn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:2px solid rgba(255,223,116,.65);
  background:rgba(0,0,0,.35);
  color:var(--gold2,#ffdf74);
  font-size:1.3rem;
  font-weight:900;
  box-shadow:none;
}
.menu-panel{
  position:absolute;
  top:58px;
  left:18px;
  min-width:245px;
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,223,116,.58);
  background:linear-gradient(150deg,rgba(5,64,38,.98),rgba(2,20,12,.99));
  box-shadow:0 18px 45px rgba(0,0,0,.5);
}
.menu-panel button,
.menu-panel a{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,223,116,.28);
  background:rgba(0,0,0,.20);
  color:var(--cream,#fff7e6);
  text-decoration:none;
  font-weight:800;
}
.header-score-badges{
  display:flex;
  gap:8px;
}
.app-fullscreen #app{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background:#052b1b url('assets/felt-bg.png') center/cover no-repeat fixed;
  z-index:9999;
}
.card{
  overflow:hidden !important;
}
.card .bottom{
  line-height:1;
  max-height:1.2em;
}
.card .suit{
  line-height:1;
}
.single-player-menu{
  grid-template-columns:repeat(3,minmax(150px,1fr)) !important;
  max-width:min(860px,92vw);
}
.developer-card,
.home-credit{
  display:none !important;
}
@media(max-width:900px){
  .app-header{
    flex-wrap:wrap;
    padding:8px 10px;
  }
  .app-header-center{
    order:3;
    width:100%;
    justify-content:center;
  }
  .header-score-badges{
    font-size:.82rem;
  }
  .menu-panel{
    left:10px;
    top:54px;
  }
}
@media(max-width:720px){
  .single-player-menu{
    grid-template-columns:1fr !important;
  }
}


/* v3.6.1 home/header cleanup */
body:not(:has(#game:not(.hidden))) .app-header-center,
body:not(:has(#game:not(.hidden))) .header-score-badges{
  display:none !important;
}

/* Keep only hamburger, wordmark, and fullscreen on opening/setup screens */
body:not(:has(#game:not(.hidden))) .app-header{
  justify-content:space-between;
}

/* Remove old CSS-only fullscreen layer behavior; real browser fullscreen is handled in game.js */
.app-fullscreen #app{
  position:static !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  z-index:auto !important;
}


/* v3.6.2 About Developer image */
.about-hero{
  align-items:center;
}
.developer-avatar{
  width:clamp(110px,18vw,190px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));
  flex:0 0 auto;
}
.about-developer-panel .rules-hero-icon{
  display:none;
}
@media(max-width:640px){
  .about-hero{
    flex-direction:column;
    text-align:center;
  }
}


/* v3.6.3 safe home navigation */
.app-wordmark{
  transition:filter .18s ease, text-shadow .18s ease, transform .18s ease;
}
.app-wordmark:hover,
.app-wordmark:focus-visible{
  filter:brightness(1.12);
  text-shadow:0 0 14px rgba(255,223,116,.75), 0 2px 2px rgba(0,0,0,.65);
  transform:translateY(-1px);
}
.modal-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.modal-actions button{
  min-width:150px;
  padding:12px 18px;
  border-radius:14px;
  border:2px solid rgba(255,223,116,.75);
  color:#fff;
  font-weight:900;
  background:linear-gradient(#105f38,#063a22);
}
.modal-actions button.danger{
  background:linear-gradient(#9d2b22,#5d110d);
}
.safe-home-card .winner-badge{
  font-size:2.4rem;
}


/* v3.6.4 learning help */
.learning-coach{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 74px);
  transform:translateX(-50%);
  z-index:70;
  max-width:min(720px,92vw);
  padding:12px 16px;
  border-radius:18px;
  border:2px solid rgba(255,223,116,.72);
  background:linear-gradient(145deg,rgba(8,72,43,.96),rgba(2,24,13,.96));
  color:var(--cream,#fff7e6);
  font-weight:800;
  text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,.44);
}
.learning-coach:before{
  content:"💡";
  margin-right:8px;
}
.game-actions .blue{
  background:linear-gradient(#277cb9,#064b83);
}
.setting-card p{
  color:rgba(255,247,230,.82);
  line-height:1.45;
}


/* v3.6.5 deal button + About Developer image fix */
.about-hero{
  align-items:center !important;
  gap:18px !important;
  overflow:hidden;
}
.developer-avatar{
  width:clamp(96px,16vw,180px) !important;
  max-width:180px !important;
  max-height:180px !important;
  height:auto !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));
}
.about-developer-panel .rules-hero-icon{
  display:none !important;
}
.about-developer-panel .rules-hero{
  min-height:0 !important;
}
@media(max-width:640px){
  .about-hero{
    flex-direction:column;
    text-align:center;
  }
  .developer-avatar{
    max-width:150px !important;
    max-height:150px !important;
  }
}


/* v3.6.6 live fixes */
.about-developer-panel .about-hero{
  align-items:center !important;
  gap:18px !important;
  overflow:hidden !important;
}
.about-developer-panel .developer-avatar{
  display:block !important;
  width:160px !important;
  height:160px !important;
  max-width:160px !important;
  max-height:160px !important;
  object-fit:contain !important;
  flex:0 0 160px !important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));
}
.about-developer-panel .rules-hero-icon{
  display:none !important;
}
#dealBtn{
  pointer-events:auto !important;
  position:relative;
  z-index:5;
}
@media(max-width:640px){
  .about-developer-panel .about-hero{
    flex-direction:column;
    text-align:center;
  }
  .about-developer-panel .developer-avatar{
    width:130px !important;
    height:130px !important;
    max-width:130px !important;
    max-height:130px !important;
    flex-basis:130px !important;
  }
}


/* v3.6.7 final Deal Cards fix */
#dealBtn{
  pointer-events:auto !important;
  position:relative;
  z-index:10;
}
.about-developer-panel .developer-avatar{
  width:150px !important;
  height:150px !important;
  max-width:150px !important;
  max-height:150px !important;
  object-fit:contain !important;
  flex:0 0 150px !important;
}


/* v3.6.9 Learning Tips moved into Your Turn panel */
.turn-box .turn-hint{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,223,116,.42);
  background:rgba(255,223,116,.10);
  color:rgba(255,247,230,.95);
  font-size:.96rem;
  line-height:1.35;
  font-weight:700;
}
.turn-box .turn-hint b{
  color:var(--gold2,#ffdf74);
}

/* If an older learning-coach element exists from cache, do not let it float over buttons. */
.learning-coach{
  position:static !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
  max-width:none !important;
  box-shadow:none !important;
}
.learning-coach:before{
  content:"" !important;
  margin:0 !important;
}


/* v3.8.0 simplified game setup, action flow, rule label, and Hand/Foot status */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.setup-section-title{
  margin:18px 0 8px;
  color:var(--gold2);
  font-size:1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.style-choice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:10px 0 14px;
}
.style-choice{
  display:flex;
  align-items:center;
  min-height:72px;
  padding:13px 15px;
  border:2px solid rgba(213,169,54,.38);
  border-radius:16px;
  background:rgba(0,0,0,.22);
  cursor:pointer;
}
.style-choice input{display:none}
.style-choice b,
.style-choice small{display:block}
.style-choice b{color:var(--gold2);font-size:1.06rem}
.style-choice small{margin-top:3px;color:rgba(255,247,230,.72)}
.style-choice.checked{
  border-color:var(--gold2);
  box-shadow:0 0 0 3px rgba(213,169,54,.20);
}
.style-choice.coming-soon{
  opacity:.52;
  cursor:not-allowed;
}
.house-options{
  margin:12px 0;
  padding:10px 14px;
  border:1px solid rgba(213,169,54,.32);
  border-radius:14px;
  background:rgba(0,0,0,.18);
}
.house-options summary{
  color:var(--gold2);
  font-weight:900;
  cursor:pointer;
}
.rules-indicator{
  border:1px solid rgba(255,223,116,.58);
  border-radius:999px;
  padding:7px 11px;
  background:rgba(0,0,0,.28);
  color:var(--gold2);
  font-weight:900;
  white-space:nowrap;
}
.pile-journey{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.journey-step{
  display:grid;
  grid-template-columns:auto auto auto;
  align-items:center;
  gap:5px;
  min-width:104px;
  padding:6px 9px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.22);
  font-size:.78rem;
}
.journey-step b{letter-spacing:.06em}
.journey-step small{
  min-width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-weight:900;
}
.journey-step.active{
  border-color:var(--gold2);
  background:rgba(255,223,116,.13);
  box-shadow:0 0 14px rgba(213,169,54,.20);
}
.journey-step.complete{
  border-color:#58d58a;
  background:rgba(43,176,99,.14);
}
.journey-step.waiting{opacity:.48}
.journey-arrow{color:var(--gold2);font-weight:900}
.journey-icon{font-size:1.15rem}
.opponent-journey{flex:1}
.meld-count{
  color:rgba(255,247,230,.72);
  font-weight:800;
  white-space:nowrap;
}
.opening-progress{
  margin-top:9px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(213,169,54,.22);
  color:rgba(255,247,230,.9);
  font-size:.9rem;
}
.opening-progress b{color:var(--gold2)}
.opening-progress small{
  display:block;
  margin-top:3px;
  color:rgba(255,247,230,.68);
}
.opening-progress.complete{
  border-color:rgba(88,213,138,.55);
  background:rgba(43,176,99,.13);
}
.selection-locked .card{
  opacity:.52;
  filter:saturate(.55);
  transform:none!important;
  cursor:not-allowed;
}
.game-actions{
  grid-template-columns:repeat(9,minmax(72px,1fr));
}
.game-actions .draw-action{
  background:linear-gradient(#277cb9,#064b83);
  border-color:#7bb7ff;
}
.game-actions .take-action{
  background:linear-gradient(#7041a8,#3d1e6a);
  border-color:#bc91ef;
}
.compact-rules .rule-card ul{margin:0 0 0 20px}
.modal-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.modal-actions button{
  min-width:140px;
  padding:12px 16px;
  border-radius:12px;
  border:2px solid rgba(213,169,54,.65);
  background:linear-gradient(#105f38,#063a22);
  color:#fff;
  font-weight:900;
}
@media(max-width:1100px){
  .game-actions{grid-template-columns:repeat(5,1fr)}
  .app-header-center{flex-wrap:wrap}
}
@media(max-width:720px){
  .style-choice-grid{grid-template-columns:1fr}
  .game-actions{grid-template-columns:repeat(3,1fr)}
  .journey-step{min-width:92px}
  .rules-indicator{font-size:.78rem}
}


/* v3.9.0 Kentucky Rules */
.style-choice:not(.coming-soon){
  cursor:pointer;
}
.option-line.fixed-option{
  opacity:.62;
}
.option-line.fixed-option input{
  accent-color:var(--gold2);
}
.rules-adaptation{
  margin:12px 0 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,223,116,.36);
  background:rgba(255,223,116,.08);
  color:rgba(255,247,230,.84);
}
.pile-choice-card p{
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.journey-step small{
  min-width:30px;
}


/* v3.9.1 Compact Hand/Foot status + more room for center hints */
.opponents{
  min-height:0 !important;
  padding:8px 10px !important;
}
.mini-player{
  min-height:0 !important;
  padding:7px 10px !important;
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:10px !important;
}
.opponent-journey{
  width:100%;
  min-width:0;
}
.opponent-journey .pile-journey{
  display:grid !important;
  grid-template-columns:minmax(90px,1fr) auto minmax(90px,1fr) !important;
  align-items:center !important;
  gap:6px !important;
}
.opponent-journey .journey-step{
  min-width:0 !important;
  padding:5px 8px !important;
}

.player-head{
  align-items:center !important;
  min-height:0 !important;
  padding-top:6px !important;
  padding-bottom:6px !important;
}
.player-head > div:first-child{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  align-items:center !important;
  gap:10px !important;
  width:100%;
}
#playerJourney{
  width:100%;
  max-width:420px;
  display:grid !important;
  grid-template-columns:minmax(90px,1fr) auto minmax(90px,1fr) !important;
  align-items:center !important;
  gap:6px !important;
}
#playerJourney .journey-step{
  min-width:0 !important;
  padding:5px 8px !important;
}

.journey-step{
  min-height:34px !important;
  grid-template-columns:auto 1fr auto !important;
}
.journey-icon{
  font-size:.95rem !important;
}
.journey-step b{
  font-size:.74rem !important;
}
.journey-step small{
  min-width:25px !important;
  height:21px !important;
  font-size:.72rem !important;
}

.turn-box{
  min-height:0 !important;
  padding:12px 14px !important;
  overflow:visible !important;
}
.turn-box #message{
  margin:6px 0 !important;
}
.opening-progress{
  margin-top:6px !important;
  padding:6px 9px !important;
}
.turn-box .turn-hint{
  margin-top:6px !important;
  padding:8px 10px !important;
  max-height:none !important;
  overflow:visible !important;
  white-space:normal !important;
}
.center-piles{
  align-items:start !important;
  overflow:visible !important;
}

@media (min-width:700px) and (max-width:1400px){
  .mini-player{
    grid-template-columns:auto minmax(260px,1fr) auto !important;
  }
  .opponents{
    padding:6px 8px !important;
  }
  .journey-step{
    padding:4px 7px !important;
  }
}


/* v3.9.2 ARTEZIQ branding */
.arteziq-about-logo{
  width:min(520px,72vw);
  max-height:110px;
  object-fit:contain;
  display:block;
}
.about-hero{
  align-items:center;
  gap:18px;
}
.arteziq-about-card{
  text-align:left;
}
.arteziq-site{
  margin-top:10px;
  font-size:1.08rem;
  font-weight:900;
}
.arteziq-site a{
  color:var(--gold2);
  text-decoration:none;
}
.arteziq-site a:hover{
  text-decoration:underline;
}
.developer-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.developer-links a{
  display:inline-block;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid rgba(213,169,54,.48);
  color:var(--gold2);
  text-decoration:none;
  font-weight:800;
}
@media(max-width:700px){
  .about-hero{
    grid-template-columns:1fr !important;
  }
  .arteziq-about-logo{
    width:min(420px,88vw);
  }
}


/* v3.9.3 About ARTEZIQ layout refinement */
.arteziq-modal-panel{
  gap:16px;
}
.arteziq-modal-panel .rule-card.black-card{
  background:#050505 !important;
  color:#fff !important;
  border:1px solid rgba(213,169,54,.5);
}
.arteziq-brand-card{
  text-align:left;
}
.arteziq-about-logo{
  width:min(540px,100%);
  max-width:100%;
  max-height:96px;
  margin:0 auto 18px;
  object-fit:contain;
  display:block;
}
.arteziq-about-copy{
  max-width:100%;
}
.arteziq-about-copy p,
.developer-links-card p,
.developer-links-card h3{
  color:#fff !important;
}
.arteziq-about-copy p{
  margin:0 0 12px;
  line-height:1.55;
}
.arteziq-site{
  margin-top:10px;
  margin-bottom:0;
  font-size:1.06rem;
  font-weight:900;
}
.arteziq-site a,
.developer-links a{
  color:var(--gold2) !important;
}
.developer-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.developer-links a{
  display:inline-block;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid rgba(213,169,54,.48);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  font-weight:800;
}
.developer-links a:hover,
.arteziq-site a:hover{
  text-decoration:underline;
}


/* v3.9.4 global app credit footer */
.app-credit-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:80;
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:5px 12px calc(5px + env(safe-area-inset-bottom,0px));
  background:rgba(0,10,18,.9);
  border-top:1px solid rgba(213,169,54,.28);
  color:rgba(255,255,255,.72);
  font-size:.76rem;
  letter-spacing:.01em;
  text-align:center;
  white-space:nowrap;
  backdrop-filter:blur(8px);
}
.app-credit-footer .credit-brand{
  color:#fff;
  font-weight:900;
  letter-spacing:.08em;
}
.app-credit-footer .credit-dot{
  color:var(--gold2);
  opacity:.9;
}
.view{
  padding-bottom:34px;
}
.game-view{
  padding-bottom:34px !important;
}
@media(max-width:560px){
  .app-credit-footer{
    font-size:.68rem;
    gap:5px;
    min-height:26px;
  }
  .view,
  .game-view{
    padding-bottom:32px !important;
  }
}


/* v3.9.5 navigation cleanup + compact AI status */
.app-header-left{
  min-width:max-content;
}
.app-header-left .app-wordmark{
  margin-left:0;
}

/* AI Opponent now mirrors the compact You status row: name | Hand -> Foot | meld count */
.opponents{
  padding:6px 10px !important;
}
.mini-player.ai-status-row{
  display:grid !important;
  grid-template-columns:max-content minmax(190px,1fr) max-content !important;
  align-items:center !important;
  gap:9px !important;
  min-height:44px !important;
  padding:5px 8px !important;
}
.ai-player-name{
  white-space:nowrap;
}
.ai-pile-journey{
  display:grid !important;
  grid-template-columns:minmax(74px,1fr) auto minmax(74px,1fr) !important;
  align-items:center !important;
  gap:5px !important;
  min-width:0;
}
.ai-pile-journey .journey-step{
  min-width:0 !important;
  min-height:31px !important;
  padding:4px 6px !important;
}
.ai-pile-journey .journey-arrow{
  margin:0 !important;
}
.ai-pile-journey .journey-icon{
  font-size:.85rem !important;
}
.ai-pile-journey .journey-step b{
  font-size:.68rem !important;
}
.ai-pile-journey .journey-step small{
  min-width:22px !important;
  height:19px !important;
  font-size:.68rem !important;
}

/* More bottom controls: keep one clean row on wide screens and wrap gracefully on tablets. */
.game-actions{
  grid-template-columns:repeat(11,minmax(68px,1fr)) !important;
}
#settingsGameBtn,
#scoresGameBtn{
  background:linear-gradient(#155e46,#0b3f30);
  border-color:rgba(213,169,54,.58);
}
#scoresGameBtn{
  background:linear-gradient(#6a5416,#443508);
}

@media(max-width:1250px){
  .game-actions{
    grid-template-columns:repeat(6,minmax(72px,1fr)) !important;
  }
  .mini-player.ai-status-row{
    grid-template-columns:max-content minmax(175px,1fr) max-content !important;
  }
}
@media(max-width:760px){
  .game-actions{
    grid-template-columns:repeat(3,minmax(76px,1fr)) !important;
  }
  .mini-player.ai-status-row{
    grid-template-columns:max-content 1fr !important;
  }
  .mini-player.ai-status-row .meld-count{
    grid-column:2;
  }
  .ai-pile-journey{
    grid-template-columns:minmax(70px,1fr) auto minmax(70px,1fr) !important;
  }
}


/* v3.9.6 How to Play rules comparison */
.rules-compare-bar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:12px 0 8px;
}
.rules-compare-btn{
  min-height:44px;
  border:2px solid rgba(213,169,54,.42);
  border-radius:12px;
  background:rgba(0,0,0,.28);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.rules-compare-btn.active{
  border-color:var(--gold2);
  color:var(--gold2);
  background:rgba(213,169,54,.13);
  box-shadow:0 0 0 2px rgba(213,169,54,.12);
}
.rules-view-note{
  margin:0 0 12px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(0,0,0,.2);
  color:rgba(255,247,230,.78);
  font-size:.88rem;
}
.rules-view-note b{
  color:var(--gold2);
}
@media(max-width:560px){
  .rules-compare-bar{
    grid-template-columns:1fr;
  }
}


/* v3.10.0 — ARTEZIQ Ladybug Feedback integration */
html.has-ladybug .app-credit-footer{
  padding-left:88px;
  padding-right:88px;
}
@media(max-width:560px){
  html.has-ladybug .app-credit-footer{
    padding-left:72px;
    padding-right:72px;
  }
}


/* v3.10.1 — responsive viewport fit + scroll safety
   Safari/iPad browser chrome can shorten the usable viewport. Never clip setup/game
   content just because the device is wider than the old 900px mobile breakpoint. */
html,
body,
#app{
  min-height:100%;
  min-height:100dvh;
}
body{
  min-height:100dvh;
}

/* Setup / secondary screens must always be able to scroll vertically. */
.panel-view{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  align-items:start !important;
  justify-items:center !important;
  padding-top:clamp(14px,2.5vh,24px) !important;
  padding-bottom:calc(54px + env(safe-area-inset-bottom,0px)) !important;
}
.panel-view > .glass-panel{
  margin:auto 0;
  max-width:calc(100vw - 24px);
}

/* The game remains compact when it fits, but becomes a normal vertical scroller
   when Safari chrome or a short landscape viewport leaves too little height. */
.game-view{
  min-height:0;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}

/* Reserve room for the fixed ARTEZIQ footer without covering buttons/content. */
.view,
.game-view{
  padding-bottom:calc(40px + env(safe-area-inset-bottom,0px)) !important;
}

/* iPad / tablet browser windows: slightly tighten setup spacing so the full panel
   generally fits, while preserving scrolling when it cannot. */
@media (min-width:761px) and (max-height:920px){
  .panel-view{
    padding-top:12px !important;
  }
  .glass-panel.narrow{
    padding:18px 24px !important;
  }
  .glass-panel h1{
    font-size:clamp(2rem,4vw,3rem) !important;
    margin:2px 0 6px !important;
  }
  .glass-panel p{
    margin:5px 0 10px !important;
    line-height:1.4 !important;
  }
  .setup-section-title{
    margin:11px 0 6px !important;
  }
  .choice-grid{
    margin:10px 0 !important;
    gap:10px !important;
  }
  .choice{
    padding:10px 12px !important;
  }
  .choice span{
    font-size:1.65rem !important;
  }
  .style-choice-grid{
    margin:7px 0 9px !important;
    gap:10px !important;
  }
  .style-choice{
    min-height:60px !important;
    padding:9px 12px !important;
  }
  .house-options{
    margin:8px 0 !important;
    padding:8px 12px !important;
  }
  .option-line{
    margin:8px 0 !important;
  }
  .primary{
    margin-top:10px !important;
    padding:13px !important;
  }
}

/* Short landscape game view: do not squeeze or clip the table. Let the board and
   action bar flow vertically and scroll as a unit. */
@media (min-width:761px) and (max-height:760px){
  .game-view{
    display:block !important;
  }
  .table{
    display:grid !important;
    grid-template-rows:auto auto auto !important;
    min-height:auto !important;
    padding:8px !important;
  }
  .team-board{
    min-height:320px !important;
  }
  .player-area{
    min-height:155px !important;
  }
  .game-actions{
    position:relative !important;
    bottom:auto !important;
  }
}

/* Keep the Ladybug reachable without covering the footer or game controls. */
html.has-ladybug .game-view{
  padding-right:0 !important;
}