.practice-panel{margin-bottom:20px}.practice-panel h2{font-size:20px;margin:0 0 8px}.practice-panel p{margin:0 0 14px;color:#c4d8d1}
/* Explicit corner geometry: never inherit the full-card center alignment. */
.card .corner{inset:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;width:auto;height:auto;min-width:0;line-height:1;font-family:Arial,sans-serif;font-weight:700}
.card .corner.top{top:5px;left:5px;right:auto;bottom:auto}
.card .corner.bottom{right:5px;bottom:5px;left:auto;top:auto;transform:rotate(180deg)}
.card .corner small{position:static;display:block;width:auto;height:auto;margin:1px 0 0;font-size:.8em;line-height:1;transform:none}
.card .suit-mark{pointer-events:none}
.poker-outcome{position:absolute;inset:0;z-index:30;display:grid;place-content:center;text-align:center;padding:20px;background:#00140de6;backdrop-filter:blur(3px);border-radius:inherit;animation:poker-result .25s ease-out}
.poker-outcome h2{color:#ffcf62;font-size:clamp(26px,6vw,40px);margin:0 0 16px}.poker-outcome.loss h2{color:#ff9287}.poker-outcome button{margin:10px auto 0}
@keyframes poker-result{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@media(max-width:640px){
 .card .corner{font-size:12px!important}.card .corner.top{top:4px;left:4px}
 .card .corner.bottom{bottom:4px;right:4px}
 .seat .mini-cards .card .corner.top{top:3px;left:3px;font-size:11px!important}
 .seat .mini-cards .card{width:46px;flex:0 0 46px;aspect-ratio:0.72;border-radius:6px}
 .card .suit-mark{font-size:22px}.practice-panel button{width:100%}
}
@media(prefers-reduced-motion:reduce){.poker-outcome{animation:none}}
.playing-card-art{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
.card{flex-shrink:0;background:linear-gradient(135deg,#fffefa,#f4efe3);color:#192329}
.card.red{color:#b72136}

/* Keep the poker header controls on one clean line. The hidden back button
   must not steal the first grid column and squeeze the title into a sliver. */
.topbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.topbar > div {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar > .icon-btn {
  flex: 0 0 44px;
}

.topbar h1,
.topbar p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-link {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
  }

  .topbar > div {
    order: 1;
    flex: 1 1 calc(100% - 98px);
  }

  .topbar > .icon-btn {
    order: 2;
  }

  .topbar .home-link {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
  }
}