*{box-sizing:border-box}html,body{margin:0;background:#07090f;color:#f8f3e8;font-family:Inter,system-ui,sans-serif}.hbs-app{max-width:1180px;margin:0 auto;padding:clamp(6px,2vw,18px)}.hbs-topbar{display:flex;justify-content:space-between;gap:18px;background:radial-gradient(circle at top left,#3d2c12,#15161b 55%,#080a10);padding:clamp(14px,3vw,24px);border-radius:24px}.hbs-topbar h1{font-size:clamp(28px,8vw,60px);margin:.1em 0;line-height:.96}.hbs-topbar p,.hbs-topbar small{color:#cfc7b8}.hbs-eyebrow{color:#d7a93f;font-weight:1000;letter-spacing:.13em}.hbs-server-pill{padding:10px 14px;border-radius:999px;background:#ffffff14;white-space:nowrap}.hbs-hidden{display:none!important}.hbs-stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}.hbs-step{background:#22252d;padding:9px;border-radius:12px;text-align:center;font-weight:900;color:#bbb}.hbs-step.is-active{background:#d7a93f;color:#111}.hbs-card-panel,.hbs-game{background:#171b24;border-radius:22px;padding:clamp(10px,2vw,20px)}.hbs-form-grid,.hbs-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.hbs-form-grid label,.hbs-choice label{display:flex;flex-direction:column;gap:6px}.hbs-form-grid input,.hbs-choice input,.hbs-choice select{padding:13px;border-radius:12px;border:0}.hbs-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}.hbs-primary,.hbs-secondary,.hbs-ghost{border:0;border-radius:13px;padding:13px 17px;font-weight:1000}.hbs-primary{background:#d7a93f;color:#111}.hbs-secondary{background:#526dff;color:#fff}.hbs-ghost{background:#ffffff17;color:#fff}.hbs-message:empty{display:none}.hbs-room-badge{background:#fff;color:#111;border-radius:14px;padding:10px}.hbs-room-badge strong{font-size:28px}.hbs-lobby-head{display:flex;justify-content:space-between}.hbs-lobby-players,.hbs-scoreboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.hbs-lobby-player,.hbs-score,.hbs-opponent{background:#ffffff14;border-radius:13px;padding:9px}.hbs-scoreboard-wrap{background:#0d0f14;border-radius:18px;padding:10px;margin-bottom:8px}.hbs-scoreboard-title,.hbs-side-title{color:#d7a93f;font-weight:1000}.hbs-play-layout{display:grid;grid-template-columns:210px 1fr;gap:10px}.hbs-side-panel{background:#0d0f14;border-radius:18px;padding:10px}.hbs-opponents{display:flex;flex-direction:column;gap:8px}.hbs-table{min-height:clamp(290px,47vh,440px);background:radial-gradient(circle,#2c9953,#0f4926 65%,#062915);border-radius:24px;position:relative;overflow:hidden}.hbs-table-center{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);background:#080a0ccc;border-radius:18px;padding:13px 16px;text-align:center;min-width:min(280px,88vw);max-width:92%}.hbs-trick{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);display:flex;gap:6px}.hbs-bid-dock{margin-top:9px;background:#271d12;border-radius:18px;padding:10px}.hbs-bid-context{display:flex;gap:7px;overflow-x:auto;margin:8px 0}.hbs-bid-chip{background:#ffffff18;border-radius:999px;padding:7px 10px;white-space:nowrap}.hbs-bid-buttons{display:flex;gap:8px;overflow-x:auto}.hbs-bid-buttons button{min-width:48px;padding:13px;border-radius:12px;border:0;background:#fff;color:#111!important;font-weight:1000}.hbs-hand-dock{margin-top:9px;background:#090b10;border-radius:18px;padding:9px;position:sticky;bottom:6px;z-index:30}.hbs-hand-head{display:flex;justify-content:space-between;margin-bottom:7px}.hbs-hand{display:flex;gap:8px;overflow-x:auto;padding:4px 4px 12px}.hbs-playing-card{flex:0 0 auto;width:clamp(68px,12vw,88px);height:clamp(106px,18vw,132px);border-radius:14px;background:linear-gradient(145deg,#fff7e7,#efd7a6);color:#1e1710;padding:8px;display:flex;flex-direction:column;justify-content:space-between;position:relative;border:2px solid #7a5a2d;box-shadow:0 10px 22px #0008}.hbs-card-rank{font-weight:1000;font-size:18px;z-index:1}.hbs-card-suit{text-align:center;z-index:1}.hbs-card-suit svg{width:clamp(30px,6vw,42px);height:clamp(30px,6vw,42px)}.hbs-card-name{position:absolute;left:8px;bottom:24px;font-size:8px;opacity:.65;font-weight:1000}.hbs-card-copy{font-size:10px;text-align:right;opacity:.55;z-index:1}.hbs-card-eichel svg{fill:#6f4d29}.hbs-card-laub svg{fill:#23733b}.hbs-card-herz svg{fill:#b8202b}.hbs-card-schell svg{fill:#d49b1f}.hbs-mobile-status{display:none}.hbs-round-summary{background:#fff;color:#111;border-radius:16px;padding:12px;margin-bottom:8px;overflow:auto}.hbs-settings-row{display:flex;gap:8px;justify-content:flex-end}.hbs-mini-toggle{border:0;background:#111;color:#fff;border-radius:999px;padding:8px 10px}.hbs-layer{position:fixed;inset:0;background:#000b;z-index:1000;display:flex;align-items:flex-end;justify-content:center;padding:10px}.hbs-layer-card{width:min(960px,100%);max-height:86vh;overflow:auto;background:#171b24;border-radius:22px;padding:16px}.hbs-layer-head{display:flex;justify-content:space-between}.hbs-layer-close{background:#fff;color:#111;border:0;border-radius:999px;padding:8px 12px}.hbs-history-row{background:#ffffff10;border-radius:14px;padding:9px;margin:8px 0}.hbs-history-cards{display:flex;gap:5px;overflow-x:auto}.hbs-history-cards .hbs-playing-card{width:56px;height:84px}.hbs-history-cards .hbs-card-suit svg{width:23px;height:23px}.hbs-history-cards .hbs-card-name,.hbs-history-cards .hbs-card-copy{display:none}@media(max-width:820px){.hbs-topbar{flex-direction:column}.hbs-stepper{font-size:11px}.hbs-card-panel,.hbs-game{padding:8px}.hbs-form-grid,.hbs-choice-grid{grid-template-columns:1fr}.hbs-mobile-status{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}.hbs-mobile-status div{background:#ffffff14;border-radius:12px;text-align:center;padding:7px;min-height:46px}.hbs-mobile-status span{display:block;font-size:10px;color:#ccc}.hbs-play-layout{display:block}.hbs-scoreboard,.hbs-opponents{display:flex;overflow-x:auto;gap:6px}.hbs-score,.hbs-opponent{min-width:132px;flex:0 0 auto}.hbs-side-panel{padding:8px;margin-bottom:8px}.hbs-table{min-height:292px}.hbs-table-center{font-size:12px;padding:10px 12px}.hbs-trick .hbs-playing-card{width:50px;height:76px}.hbs-trick .hbs-card-suit svg{width:22px;height:22px}.hbs-trick .hbs-card-name,.hbs-trick .hbs-card-copy{display:none}}
/* 0.80 compact horizontal player bar */
.hbs-side-panel{min-width:0!important;padding:6px!important;}
.hbs-opponents{display:flex!important;flex-direction:row!important;overflow-x:auto!important;gap:6px!important;padding:2px 2px 7px!important;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.hbs-opponent{flex:0 0 auto!important;min-width:112px!important;max-width:132px!important;padding:6px 8px!important;border-radius:11px!important;font-size:12px!important;line-height:1.15!important;}
.hbs-opponent strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;}
.hbs-opponent small{display:block;font-size:10px!important;line-height:1.2!important;}
.hbs-side-title{font-size:12px!important;margin-bottom:5px!important;}
@media(max-width:820px){.hbs-side-panel{padding:5px!important;margin-bottom:6px!important;border-radius:13px!important}.hbs-opponent{min-width:96px!important;max-width:112px!important;padding:5px 7px!important}.hbs-opponent small{font-size:9px!important}.hbs-play-layout{display:block!important}}

/* 0.80 compact scoreboard + auth + ceremony */
.hbs-scoreboard{display:flex!important;overflow-x:auto!important;gap:6px!important;padding-bottom:7px!important;-webkit-overflow-scrolling:touch}.hbs-score{flex:0 0 auto!important;min-width:112px!important;max-width:132px!important;padding:6px 8px!important;border-radius:11px!important;font-size:12px!important;line-height:1.15!important}.hbs-score strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.hbs-score small{font-size:10px!important;line-height:1.2!important}.hbs-auth-tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}.hbs-auth-tabs button{border:0;border-radius:999px;padding:9px 12px;font-weight:900}.hbs-profile-strip{display:flex;gap:8px;overflow-x:auto;margin:8px 0}.hbs-profile-chip{background:#ffffff14;border-radius:999px;padding:7px 10px;white-space:nowrap}.hbs-ceremony{position:fixed;inset:0;background:radial-gradient(circle at center,#3a2b14ee,#030407f2);z-index:1200;display:flex;align-items:center;justify-content:center;padding:14px}.hbs-ceremony-card{width:min(720px,100%);background:linear-gradient(145deg,#211a10,#11141c);border:1px solid #d7a93f66;border-radius:28px;padding:24px;text-align:center;box-shadow:0 30px 120px #000}.hbs-podium{display:flex;gap:10px;align-items:end;justify-content:center;margin:18px 0}.hbs-podium-place{background:#ffffff12;border-radius:18px;padding:12px;min-width:110px}.hbs-podium-place:first-child{transform:translateY(-12px);background:#d7a93f;color:#111}.hbs-confetti{font-size:42px}@media(max-width:820px){.hbs-score{min-width:96px!important;max-width:112px!important;padding:5px 7px!important}.hbs-score small{font-size:9px!important}.hbs-podium{gap:6px}.hbs-podium-place{min-width:88px;padding:9px;font-size:12px}}

/* 0.80 Burger Menu / App Navigation */
.hbs-topbar{position:relative;align-items:flex-start}.hbs-menu-button{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:14px;background:#ffffff18;color:#fff;font-size:25px;font-weight:1000;display:grid;place-items:center;z-index:50}.hbs-user-badge{margin-top:8px;display:inline-flex;gap:7px;align-items:center;background:#ffffff12;border:1px solid #ffffff18;border-radius:999px;padding:7px 10px;color:#f8f3e8;font-size:13px}.hbs-stepper{display:none!important}.hbs-menu-layer{position:fixed;inset:0;z-index:1500;background:#0009;display:flex;justify-content:flex-end}.hbs-menu-panel{width:min(390px,92vw);min-height:100%;background:linear-gradient(145deg,#20242f,#0d1018);color:#f8f3e8;padding:18px;box-shadow:-18px 0 70px #000b;overflow:auto}.hbs-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.hbs-menu-close{border:0;background:#fff;color:#111;border-radius:999px;padding:8px 12px;font-weight:1000}.hbs-menu-section{background:#ffffff10;border:1px solid #ffffff16;border-radius:18px;padding:12px;margin:10px 0}.hbs-menu-section h3{margin:0 0 8px;color:#d7a93f}.hbs-menu-actions{display:grid;gap:8px}.hbs-menu-actions button{border:0;border-radius:13px;padding:12px 13px;font-weight:1000;text-align:left;background:#ffffff16;color:#fff}.hbs-menu-actions button.hbs-danger{background:#7b1e1e}.hbs-menu-actions button.hbs-gold{background:#d7a93f;color:#111}.hbs-profile-modal-grid{display:grid;gap:8px}.hbs-profile-modal-grid label{display:flex;flex-direction:column;gap:5px;color:#ddd}.hbs-profile-modal-grid input{padding:12px;border:0;border-radius:12px}@media(max-width:820px){.hbs-topbar{padding-right:62px}.hbs-menu-button{top:10px;right:10px}.hbs-user-badge{font-size:12px;padding:6px 9px}}

/* 0.80 forced visible burger + compact mobile header */
.hbs-app .hbs-topbar,#hbs-app .hbs-topbar{position:relative!important;padding:14px 64px 14px 14px!important;min-height:auto!important;border-radius:18px!important;gap:8px!important}
.hbs-app .hbs-topbar h1,#hbs-app .hbs-topbar h1{font-size:clamp(24px,6vw,42px)!important;line-height:.96!important;margin:2px 0 4px!important}
.hbs-app .hbs-topbar p,#hbs-app .hbs-topbar p{margin:2px 0 4px!important;font-size:clamp(12px,2.6vw,15px)!important;line-height:1.2!important}
.hbs-app .hbs-topbar small,#hbs-app .hbs-topbar small{font-size:11px!important;line-height:1.15!important}
.hbs-app .hbs-eyebrow,#hbs-app .hbs-eyebrow{font-size:11px!important;line-height:1!important;margin-bottom:2px!important}
.hbs-app .hbs-server-pill,#hbs-app .hbs-server-pill{position:absolute!important;right:62px!important;top:12px!important;max-width:145px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important;padding:6px 8px!important;z-index:60!important}
#hbs-menu-button,.hbs-menu-button{display:grid!important;visibility:visible!important;opacity:1!important;position:absolute!important;top:10px!important;right:10px!important;width:46px!important;height:46px!important;border:2px solid rgba(255,255,255,.32)!important;border-radius:14px!important;background:linear-gradient(135deg,#d7a93f,#f4dc8e)!important;color:#111!important;font-size:28px!important;line-height:1!important;font-weight:1000!important;place-items:center!important;z-index:9999!important;box-shadow:0 8px 26px rgba(0,0,0,.45)!important;cursor:pointer!important}
.hbs-user-badge{margin-top:4px!important;display:inline-flex!important;gap:7px!important;align-items:center!important;background:#ffffff12!important;border:1px solid #ffffff18!important;border-radius:999px!important;padding:5px 8px!important;color:#f8f3e8!important;font-size:11px!important;max-width:220px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hbs-stepper{display:none!important}
.hbs-menu-layer{position:fixed!important;inset:0!important;z-index:99999!important;background:#0009!important;display:flex!important;justify-content:flex-end!important}
.hbs-menu-panel{width:min(390px,94vw)!important;min-height:100%!important;background:linear-gradient(145deg,#20242f,#0d1018)!important;color:#f8f3e8!important;padding:18px!important;box-shadow:-18px 0 70px #000b!important;overflow:auto!important}
.hbs-menu-head{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:12px!important}.hbs-menu-close{border:0!important;background:#fff!important;color:#111!important;border-radius:999px!important;padding:8px 12px!important;font-weight:1000!important}
.hbs-menu-section{background:#ffffff10!important;border:1px solid #ffffff16!important;border-radius:18px!important;padding:12px!important;margin:10px 0!important}.hbs-menu-section h3{margin:0 0 8px!important;color:#d7a93f!important}.hbs-menu-actions{display:grid!important;gap:8px!important}.hbs-menu-actions button{border:0!important;border-radius:13px!important;padding:12px 13px!important;font-weight:1000!important;text-align:left!important;background:#ffffff16!important;color:#fff!important}.hbs-menu-actions button.hbs-danger{background:#7b1e1e!important}.hbs-menu-actions button.hbs-gold{background:#d7a93f!important;color:#111!important}
@media(max-width:820px){.hbs-app .hbs-topbar,#hbs-app .hbs-topbar{padding:10px 60px 10px 10px!important;border-radius:14px!important;margin-bottom:6px!important}.hbs-app .hbs-topbar h1,#hbs-app .hbs-topbar h1{font-size:24px!important}.hbs-app .hbs-topbar p,#hbs-app .hbs-topbar p,.hbs-app .hbs-topbar small,#hbs-app .hbs-topbar small,.hbs-app .hbs-server-pill,#hbs-app .hbs-server-pill{display:none!important}#hbs-menu-button,.hbs-menu-button{top:8px!important;right:8px!important;width:44px!important;height:44px!important;font-size:27px!important}.hbs-user-badge{max-width:150px!important}}


/* === 0.80 Start Flow / simplified navigation === */
.hbs-home-hero{
  background:linear-gradient(145deg,#20242f,#10131b);
  border:1px solid #ffffff16;
  border-radius:22px;
  padding:clamp(14px,3vw,24px);
  margin:10px 0;
}
.hbs-home-hero h2{
  margin:0 0 8px;
  color:#d7a93f;
  font-size:clamp(24px,5vw,42px);
}
.hbs-home-hero p{
  color:#ddd3c1;
  line-height:1.45;
}
.hbs-flow-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.hbs-flow-nav{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:7px 2px 9px;
  margin:8px 0;
  -webkit-overflow-scrolling:touch;
}
.hbs-flow-nav button{
  flex:0 0 auto;
  border:0;
  border-radius:999px;
  background:#ffffff14;
  color:#fff;
  padding:9px 12px;
  font-weight:900;
}
.hbs-flow-nav button.is-active{
  background:#d7a93f;
  color:#111;
}
.hbs-footer-admin{
  margin:18px auto 8px;
  text-align:center;
  color:#aaa;
  font-size:12px;
}
.hbs-footer-admin button{
  border:0;
  background:transparent;
  color:#d7a93f;
  text-decoration:underline;
  font-weight:900;
}
.hbs-menu-section[data-admin-section],
#hbs-m-admin{
  display:none!important;
}
.hbs-menu-panel .hbs-menu-section:nth-of-type(3){
  display:none!important;
}
@media(max-width:820px){
  .hbs-home-hero{
    padding:13px;
    border-radius:16px;
  }
  .hbs-home-hero h2{
    font-size:24px;
  }
  .hbs-flow-actions .hbs-primary,
  .hbs-flow-actions .hbs-secondary,
  .hbs-flow-actions .hbs-ghost{
    flex:1 1 100%;
    text-align:center;
  }
}


/* 0.80 real page architecture */
.hbs-page{display:none!important}.hbs-page.is-active{display:block!important}
.hbs-page-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0 10px}.hbs-page-title h2{margin:0;color:#d7a93f}
.hbs-login-grid,.hbs-profile-grid,.hbs-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hbs-login-grid label,.hbs-profile-grid label,.hbs-admin-grid label{display:flex;flex-direction:column;gap:5px;color:#ddd}
.hbs-login-grid input,.hbs-profile-grid input,.hbs-admin-grid input,.hbs-profile-grid select{border:0;border-radius:12px;padding:12px;font-size:16px}
.hbs-auth-card{background:#ffffff10;border:1px solid #ffffff18;border-radius:18px;padding:12px;margin:10px 0}
.hbs-page-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}.hbs-page-actions button{border:0;border-radius:13px;padding:12px 14px;font-weight:1000}
.hbs-admin-shell{background:#11151d;border:1px solid #ffffff18;border-radius:18px;padding:12px;margin-top:10px}
.hbs-admin-row{display:grid;grid-template-columns:1.2fr 1.4fr .8fr .8fr;gap:8px;align-items:center;background:#ffffff10;border-radius:12px;padding:8px;font-size:12px}
.hbs-admin-row button{border:0;border-radius:10px;padding:8px;font-weight:900}
.hbs-guest-note{background:#ffffff10;border-radius:14px;padding:10px;margin:8px 0;color:#ddd}
.hbs-menu-actions [data-auth-only=true].is-disabled{display:none!important}
@media(max-width:820px){.hbs-login-grid,.hbs-profile-grid,.hbs-admin-grid{grid-template-columns:1fr}.hbs-admin-row{grid-template-columns:1fr;gap:4px}}


/* 0.80 UI cleanup */
#hbs-flow-nav,.hbs-stepper{display:none!important}
.hbs-room-list{display:grid;gap:8px;margin:10px 0}.hbs-room-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:#ffffff10;border:1px solid #ffffff18;border-radius:14px;padding:10px}.hbs-room-item small{display:block;color:#cfc7b8}.hbs-room-item button{border:0;border-radius:12px;padding:10px 12px;font-weight:1000;background:#d7a93f;color:#111}
.hbs-trick-reveal{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:1300;width:min(720px,96vw);background:linear-gradient(145deg,#20170c,#11151d);border:1px solid #d7a93f66;border-radius:20px;padding:14px;box-shadow:0 20px 80px #000c;color:#fff}.hbs-trick-reveal h3{margin:0 0 8px;color:#d7a93f}.hbs-trick-reveal .hbs-history-cards{justify-content:center}.hbs-trick-reveal .hbs-winner-card{outline:3px solid #d7a93f;transform:translateY(-8px)}
.hbs-admin-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.hbs-admin-toolbar input{padding:10px;border:0;border-radius:10px;min-width:220px}.hbs-admin-detail{background:#ffffff10;border-radius:14px;padding:10px;margin-top:10px}.hbs-admin-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0}.hbs-admin-stat{background:#00000022;border-radius:12px;padding:8px}.hbs-admin-row{grid-template-columns:1.1fr 1.5fr .7fr .8fr .8fr!important}
@media(max-width:820px){.hbs-room-item{grid-template-columns:1fr}.hbs-admin-row{grid-template-columns:1fr!important}}


/* === 0.80 modern online game flow === */
#hbs-flow-nav,.hbs-stepper{display:none!important}
.hbs-modern-shell{display:grid;gap:12px}
.hbs-game-overview{background:linear-gradient(145deg,#20242f,#10131b);border:1px solid #ffffff16;border-radius:22px;padding:clamp(14px,3vw,22px);margin:10px 0}
.hbs-game-overview h2{margin:0 0 6px;color:#d7a93f;font-size:clamp(24px,5vw,40px)}
.hbs-game-overview p{color:#ddd3c1;line-height:1.45;margin:6px 0}
.hbs-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.hbs-overview-card{background:#ffffff10;border:1px solid #ffffff18;border-radius:18px;padding:12px}
.hbs-overview-card h3{margin:0 0 8px;color:#fff}
.hbs-create-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.hbs-create-grid label{display:flex;flex-direction:column;gap:5px;color:#ddd;font-size:13px;min-width:0;overflow:hidden}
.hbs-create-grid select,.hbs-create-grid input{border:0;border-radius:12px;padding:11px;font-size:15px;width:100%;box-sizing:border-box;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hbs-open-games{display:grid;gap:8px;max-height:360px;overflow:auto;padding-right:2px}
.hbs-open-game{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:#00000020;border:1px solid #ffffff14;border-radius:14px;padding:10px}
.hbs-open-game strong{display:block;color:#fff}
.hbs-open-game small{display:block;color:#cfc7b8}
.hbs-open-game button,.hbs-game-overview button{border:0;border-radius:13px;padding:11px 13px;font-weight:1000;background:#d7a93f;color:#111}
.hbs-game-overview .hbs-secondary{background:#526dff;color:#fff}
.hbs-current-game-code{display:inline-flex;gap:8px;align-items:center;background:#d7a93f;color:#111;border-radius:999px;padding:7px 11px;font-weight:1000}
.hbs-lobby-code-big{font-size:clamp(24px,7vw,52px);letter-spacing:.12em;color:#d7a93f}
[data-screen="room"]>h2,[data-screen="room"]>.hbs-choice-grid{display:none!important}
@media(max-width:820px){
  .hbs-overview-grid{grid-template-columns:1fr}
  .hbs-create-grid{grid-template-columns:1fr}
  .hbs-open-game{grid-template-columns:1fr}
}


/* 0.80 hotfix UI */
.hbs079-error,.hbs080-error{background:#7b1e1e;color:#fff;border-radius:12px;padding:10px;margin:8px 0}
.hbs080-debug{font-size:12px;color:#ffbf80;margin-top:8px}

/* ===== 0.81c: kompakte Stichdarstellung & erweiterte Statistik ===== */

/* Kompakte Mini-Karten für die Stichübersicht (passt auf einen Screen) */
.hbs-playing-card.is-mini {
  width: 44px;
  min-width: 44px;
  height: 62px;
  padding: 2px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.hbs-playing-card.is-mini .hbs-card-rank { font-size: 11px; line-height: 1; }
.hbs-playing-card.is-mini .hbs-card-suit { width: 16px; height: 16px; margin: 1px auto; }
.hbs-playing-card.is-mini .hbs-card-name { font-size: 7px; line-height: 1; }

.hbs-layer-tricks { max-width: 680px; }
.hbs-history-compact { padding: 6px 8px; margin: 4px 0; }
.hbs-history-compact > strong { display: block; font-size: 12px; margin-bottom: 4px; }
.hbs-history-compact .hbs-history-cards { display: flex; flex-wrap: wrap; gap: 4px; }
.hbs-history-compact .hbs-winner-card .hbs-playing-card.is-mini { outline: 2px solid #f5c542; border-radius: 6px; }

#hbs-trick-reveal .hbs-history-cards { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }

/* Statistik nach Kartenqualität */
.hbs-profile-section { margin-top: 16px; }
.hbs-profile-section h3 { font-size: 14px; margin: 0 0 8px; opacity: .85; }
.hbs-bucket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hbs-bucket { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 10px; text-align: center; }
.hbs-bucket strong { display: block; font-size: 12px; opacity: .85; }
.hbs-bucket-val { font-size: 22px; font-weight: 700; margin: 4px 0 2px; }
.hbs-bucket small { opacity: .6; font-size: 11px; }
.hbs-muted { opacity: .6; font-size: 13px; }

@media (max-width: 640px) {
  .hbs-playing-card.is-mini { width: 38px; min-width: 38px; height: 54px; }
  .hbs-playing-card.is-mini .hbs-card-rank { font-size: 10px; }
  .hbs-history-compact .hbs-history-cards { gap: 3px; }
  .hbs-bucket-grid { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .hbs-bucket-val { font-size: 18px; }
  .hbs-layer-tricks { max-height: 80vh; overflow-y: auto; }
}

/* ===== 0.82c: FAQ & geführte Demo ===== */
.hbs-faq { display: flex; flex-direction: column; gap: 8px; }
.hbs-faq-item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 8px 12px; }
.hbs-faq-item summary { cursor: pointer; font-weight: 600; }
.hbs-faq-item p { margin: 8px 0 2px; opacity: .85; line-height: 1.45; }

.hbs-guide-bubble {
  position: fixed; z-index: 1200; max-width: min(360px, 92vw);
  background: #14233b; color: #eef3fb; border: 1px solid #3a567f; border-radius: 14px;
  border-color: #3a567f; padding: 14px 16px; box-shadow: 0 18px 48px rgba(0,0,0,.5);
}
.hbs-guide-bubble h3 { margin: 4px 0 6px; font-size: 16px; }
.hbs-guide-bubble p { margin: 0 0 12px; line-height: 1.5; opacity: .92; font-size: 14px; }
.hbs-guide-step { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.hbs-guide-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.hbs-guide-highlight { outline: 3px solid #f5c542 !important; outline-offset: 3px; border-radius: 10px; box-shadow: 0 0 0 6px rgba(245,197,66,.18); transition: outline-color .2s; }

@media (max-width: 640px) {
  .hbs-guide-bubble { left: 4vw !important; right: 4vw; max-width: 92vw; transform: none !important; }
}

/* ===== 0.83: Menü Startseite-Button ===== */
.hbs-menu-home { padding: 8px 16px 0; }
.hbs-menu-home-btn {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: none; cursor: pointer;
  background: rgba(255,255,255,.10); color: #eef3fb; font-size: 15px; font-weight: 600;
  text-align: left; letter-spacing: .01em;
  transition: background .15s;
}
.hbs-menu-home-btn:hover { background: rgba(255,255,255,.18); }

/* ===== 0.83: KI-Spielstärke-Badge im Scoreboard ===== */
.hbs-strength-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 1px 5px; border-radius: 4px; margin-left: 5px;
  vertical-align: middle; letter-spacing: .04em;
}
.hbs-strength-easy   { background: #2a7a2a; color: #c8f5c8; }
.hbs-strength-medium { background: #7a6a1a; color: #f5e8a0; }
.hbs-strength-hard   { background: #7a2020; color: #f5b8b8; }

/* ===== 0.84: Admin KI-Lernübersicht ===== */
.hbs-learn-panel { margin-top: 28px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; }
.hbs-learn-panel h3 { margin: 0 0 12px; font-size: 16px; }
.hbs-learn-panel h4 { margin: 18px 0 8px; font-size: 13px; opacity: .75; }
.hbs-learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.hbs-learn-stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 12px; text-align: center; }
.hbs-learn-val { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.hbs-learn-label { font-size: 12px; opacity: .75; line-height: 1.4; }
.hbs-learn-active .hbs-learn-val { color: #7ef07e; }
.hbs-learn-waiting .hbs-learn-val { color: #f0d87e; }
.hbs-learn-bar-wrap { background: rgba(255,255,255,.05); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; }
.hbs-learn-bar-label { font-size: 12px; margin-bottom: 6px; }
.hbs-learn-bar-track { height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.hbs-learn-bar-fill { height: 100%; background: #5b9ef0; border-radius: 4px; transition: width .4s; }
.hbs-learn-bar-pct { font-size: 18px; font-weight: 700; margin-top: 4px; }
.hbs-learn-bar-hint { font-size: 11px; margin-top: 2px; }
.hbs-learn-hint { font-size: 12px; margin-top: 12px; }
@media (max-width: 640px) {
  .hbs-learn-grid { grid-template-columns: 1fr 1fr; }
  .hbs-learn-grid > :last-child { grid-column: 1 / -1; }
}

/* ===== 0.85: Pausierte Spiele + menschliche Spielstärke ===== */
.hbs-room-paused { border-left: 3px solid #f5c542; opacity: .92; }
.hbs-room-paused button[disabled] { opacity: .45; cursor: not-allowed; }
.hbs-pause-btn { background: rgba(245,197,66,.15); color: #f5c542; border: 1px solid rgba(245,197,66,.4); }
.hbs-pause-btn:hover { background: rgba(245,197,66,.28); }

/* Human player tier badges – slightly different shade from AI badges */
.hbs-strength-human-easy   { background: #1a5c3a; color: #b0f5d4; }
.hbs-strength-human-medium { background: #2a4a7a; color: #aacef5; }
.hbs-strength-human-hard   { background: #6a2080; color: #e8b0f5; }

/* ===== 0.86: Mobile Handkarten kompakter ===== */
@media (max-width: 480px) {
  .hbs-playing-card {
    width: 52px !important;
    min-width: 52px !important;
    height: 74px !important;
    padding: 3px !important;
    font-size: 11px;
  }
  .hbs-playing-card .hbs-card-rank { font-size: 12px; }
  .hbs-playing-card .hbs-card-suit { width: 20px; height: 20px; margin: 2px auto; }
  .hbs-playing-card .hbs-card-name { font-size: 8px; }
  .hbs-playing-card .hbs-card-copy { display: none; }
  #hbs-hand { gap: 4px !important; }
}
@media (max-width: 360px) {
  .hbs-playing-card { width: 44px !important; min-width: 44px !important; height: 62px !important; }
}

/* ===== 0.86: User-Badge klickbar + Profil-Fehler ===== */
.hbs-user-badge { cursor: pointer; padding: 3px 8px; border-radius: 20px; }
.hbs-user-badge:hover { background: rgba(255,255,255,.12); }
.hbs-error { color: #f08080; padding: 8px; background: rgba(240,128,128,.1); border-radius: 8px; }

/* ===== 0.87: Turn-Timer, Lobby-Badges, Admin-Config ===== */
.hbs-turn-timer { margin-bottom: 6px; }
.hbs-timer-label { font-size: 12px; opacity: .8; margin-bottom: 3px; }
.hbs-timer-track { height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.hbs-timer-fill { height: 100%; background: #5b9ef0; border-radius: 4px; transition: width .2s linear, background .3s; }
.hbs-timer-fill.hbs-timer-warn { background: #e05050; animation: hbs-pulse .5s alternate infinite; }
@keyframes hbs-pulse { from { opacity: .7; } to { opacity: 1; } }

.hbs-badge-mode { background: rgba(91,158,240,.18); color: #9ec8f5; padding: 2px 6px; border-radius: 6px; font-size: 11px; margin-right: 4px; }
.hbs-badge-timer { background: rgba(240,197,91,.18); color: #f5d89e; padding: 2px 6px; border-radius: 6px; font-size: 11px; }
.hbs-room-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.hbs-config-panel { margin-top: 28px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; }
.hbs-config-panel h3 { margin: 0 0 12px; font-size: 16px; }
.hbs-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hbs-config-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; opacity: .85; }
.hbs-config-grid input { padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: inherit; }
@media (max-width: 480px) { .hbs-config-grid { grid-template-columns: 1fr; } }

/* ===== 0.88: Home Screen Beginner UX + Live Counter ===== */
.hbs-home-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.hbs-home-action-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hbs-home-action-card.hbs-home-action-primary { border-color: rgba(91,158,240,.4); background: rgba(91,158,240,.08); }
.hbs-home-action-icon { font-size: 28px; }
.hbs-home-action-desc { font-size: 12px; opacity: .75; line-height: 1.4; margin: 0; }

.hbs-home-flow { margin-top: 28px; }
.hbs-home-flow h3 { margin: 0 0 14px; font-size: 15px; opacity: .85; }
.hbs-flow-steps { display: flex; flex-direction: column; gap: 10px; }
.hbs-flow-step { display: flex; gap: 12px; align-items: flex-start; }
.hbs-step-num { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: #3a6fb5; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.hbs-flow-step p { margin: 2px 0 0; opacity: .75; font-size: 13px; }
.hbs-home-rules-btn { margin-top: 12px; font-size: 13px; }
.hbs-rules-box { margin-top: 10px; padding: 12px; background: rgba(255,255,255,.05); border-radius: 10px; font-size: 13px; line-height: 1.55; }

.hbs-home-status { margin-top: 16px; font-size: 13px; opacity: .8; min-height: 20px; }
.hbs-home-status strong { color: #7ef07e; }

@media (max-width: 560px) {
  .hbs-home-actions-row { grid-template-columns: 1fr; }
}

/* ===== 0.89: Home Help Block + Lobby Flow Blocks ===== */

/* --- Home: Beginner Help Block --- */
.hbs-home-help-block {
  margin-top: 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 22px;
}
.hbs-help-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.hbs-help-emoji { font-size: 32px; line-height: 1; padding-top: 2px; }
.hbs-help-header h3 { margin: 0 0 4px; font-size: 18px; }
.hbs-help-sub { margin: 0; opacity: .75; font-size: 13px; }
.hbs-help-demo-cta {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: rgba(91,158,240,.10); border: 1px solid rgba(91,158,240,.25);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 20px;
}
.hbs-help-demo-text { flex: 1; min-width: 200px; }
.hbs-help-demo-text strong { display: block; margin-bottom: 4px; }
.hbs-help-demo-text p { margin: 0; font-size: 13px; opacity: .8; line-height: 1.45; }
.hbs-help-demo-btn { white-space: nowrap; }
.hbs-help-flow h4 { margin: 0 0 12px; font-size: 14px; opacity: .80; }
.hbs-help-faq-link {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13px; opacity: .85;
}
.hbs-help-faq-btn { font-size: 13px; }

/* --- Lobby: Overview blocks --- */
.hbs-overview-block {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  overflow: hidden;
  min-width: 0;
}
.hbs-overview-block-join { border-color: rgba(255,255,255,.08); }
.hbs-overview-block-open { background: rgba(255,255,255,.03); }
.hbs-block-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.hbs-block-num {
  width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
  background: #3a6fb5; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.hbs-block-num-alt { background: rgba(255,255,255,.15); font-size: 16px; }
.hbs-block-num-open { background: transparent; border: 1px solid rgba(255,255,255,.2); font-size: 18px; }
.hbs-block-header h3 { margin: 0 0 4px; font-size: 16px; }
.hbs-block-sub { margin: 0; opacity: .70; font-size: 13px; line-height: 1.4; }
.hbs-overview-hint { font-size: 12px; opacity: .65; margin: 8px 0 0; line-height: 1.45; }
.hbs-label-hint { font-size: 11px; opacity: .7; font-weight: normal; }
.hbs-join-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hbs-join-row input { flex: 1; min-width: 120px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: inherit; font-size: 16px; letter-spacing: .08em; }
.hbs-refresh-btn { margin-top: 12px; font-size: 13px; }

@media (max-width: 540px) {
  .hbs-help-demo-cta { flex-direction: column; }
  .hbs-help-demo-btn { width: 100%; }
}

/* ===== 0.91: Nano cards, Bid attention, Weltrangliste ===== */

/* Bid box attention flash when appearing */
@keyframes hbs-bid-flash { 0%,100%{box-shadow:none;} 40%{box-shadow:0 0 0 4px rgba(91,158,240,.6);} }
.hbs-bid-attention { animation: hbs-bid-flash 1.1s ease; }

/* Nano cards: for trick history overlay (even more compact than mini) */
.hbs-playing-card.is-nano {
  width: 30px !important; min-width: 30px !important; height: 42px !important;
  padding: 1px !important; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.hbs-playing-card.is-nano .hbs-card-rank { font-size: 9px; line-height: 1; }
.hbs-playing-card.is-nano .hbs-card-suit { width: 12px; height: 12px; margin: 1px auto; }
.hbs-playing-card.is-nano .hbs-card-name { display: none; }
.hbs-history-compact .hbs-winner-card .hbs-playing-card.is-nano { outline: 2px solid #f5c542; }
.hbs-history-compact .hbs-history-cards { gap: 2px !important; }
.hbs-history-row.hbs-history-compact { padding: 4px 6px; }

/* Weltrangliste */
.hbs-lb-card { max-width: 700px; width: 100%; }
.hbs-lb-sub { font-size: 12px; margin: 0 0 12px; }
.hbs-lb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.hbs-lb-tab {
  padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.2);
  background: transparent; color: inherit; cursor: pointer; font-size: 13px;
}
.hbs-lb-tab.is-active { background: #3a6fb5; border-color: #3a6fb5; font-weight: 600; }
.hbs-lb-body { min-height: 120px; }
.hbs-lb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hbs-lb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hbs-lb-table thead { position: sticky; top: 0; background: #1a2a42; }
.hbs-lb-table th { padding: 8px 10px; text-align: left; opacity: .7; font-weight: 600; white-space: nowrap; }
.hbs-lb-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: middle; }
.hbs-lb-table tr:last-child td { border-bottom: none; }
.hbs-lb-top1 td { background: rgba(255,215,0,.06); }
.hbs-lb-top2 td { background: rgba(192,192,192,.05); }
.hbs-lb-top3 td { background: rgba(205,127,50,.05); }
.hbs-lb-rank { font-size: 18px; width: 36px; text-align: center; }
.hbs-lb-name { display: flex; flex-direction: column; gap: 3px; }
.hbs-lb-name > span:first-child { font-weight: 600; }
.hbs-lb-stat { text-align: right; }
.hbs-lb-win strong { color: #7ef07e; }
.hbs-lb-acc strong { color: #9ec8f5; }
@media (max-width: 540px) {
  .hbs-lb-table th:nth-child(n+5), .hbs-lb-table td:nth-child(n+5) { display: none; }
}

/* ===== 0.92: Profil — verbesserte Stats-Chips + letzte Spiele ===== */
.hbs-profile-strip { display: flex; gap: 8px; overflow-x: auto; flex-wrap: wrap; margin: 8px 0; }
.hbs-profile-chip {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 10px 14px; text-align: center; min-width: 80px;
}
.hbs-chip-val { font-size: 20px; font-weight: 700; line-height: 1.1; }
.hbs-chip-lbl { font-size: 11px; opacity: .65; margin-top: 2px; }

.hbs-recent-games { display: flex; flex-direction: column; gap: 6px; }
.hbs-recent-game {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
}
.hbs-game-won  { border-left: 3px solid #7ef07e; }
.hbs-game-lost { border-left: 3px solid rgba(255,255,255,.2); }
.hbs-game-result-icon { font-size: 18px; width: 22px; }
.hbs-game-score { font-size: 15px; min-width: 70px; }
.hbs-game-detail { font-size: 12px; opacity: .7; flex: 1; }
.hbs-game-date { font-size: 11px; opacity: .5; }

/* ===== 0.93 A: Layer close-buttons kleiner auf Mobile ===== */
@media (max-width: 540px) {
  .hbs-layer-head { gap: 8px; align-items: center; }
  .hbs-layer-head h2 { font-size: 16px; margin: 0; }
  .hbs-layer-close, .hbs-layer-head button {
    font-size: 12px !important; padding: 6px 10px !important;
    border-radius: 8px !important; white-space: nowrap;
  }
}

/* ===== 0.93 B: Trump-Box kompakt ===== */
.hbs-table-center { padding: 8px 12px !important; }
.hbs-table-center strong { font-size: 13px; }
.hbs-trump-compact { display: flex; align-items: center; gap: 8px; }
.hbs-trump-suit-icon { width: 28px; height: 28px; }
.hbs-trump-info { font-size: 12px; line-height: 1.3; }
.hbs-trump-label { font-size: 10px; opacity: .65; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 540px) {
  .hbs-table { min-height: 220px !important; }
  .hbs-table-center { font-size: 11px !important; }
}

/* ===== 0.93 C/D: Admin Game Tables ===== */
.hbs-admin-section { margin-top: 28px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; }
.hbs-admin-section h3 { margin: 0 0 12px; font-size: 16px; }
.hbs-admin-games-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hbs-admin-games-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hbs-admin-games-table th { text-align: left; padding: 6px 8px; opacity: .65; border-bottom: 1px solid rgba(255,255,255,.12); }
.hbs-admin-games-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.hbs-btn-xs { font-size: 11px !important; padding: 4px 8px !important; border-radius: 6px !important; }

/* ===== 0.93 E: Klick-Tutorial ===== */
.hbs-tut-card { max-width: 580px; width: 100%; }
.hbs-tut-progress { height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; margin-bottom: 14px; }
.hbs-tut-progress-fill { height: 100%; background: #d7a93f; border-radius: 2px; transition: width .3s; }
.hbs-tut-visual {
  min-height: 120px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; margin: 10px 0; gap: 8px; text-align: center;
}
.hbs-tut-players { display: flex; gap: 16px; font-size: 32px; }
.hbs-tut-suits { display: flex; gap: 16px; font-size: 15px; font-weight: 700; }
.hbs-tut-suit { text-align: center; padding: 8px 12px; background: rgba(255,255,255,.08); border-radius: 10px; }
.hbs-tut-trump-demo { display: flex; align-items: center; gap: 12px; }
.hbs-tut-card {
  background: linear-gradient(145deg,#fff7e7,#efd7a6); color: #1e1710;
  border-radius: 10px; padding: 8px 12px; text-align: center;
  font-weight: 700; font-size: 13px; line-height: 1.3; min-width: 56px;
}
.hbs-tut-card-trump { background: linear-gradient(145deg,#ffe9e9,#ffb8b8); border: 2px solid #e05050; }
.hbs-tut-vs { font-size: 18px; opacity: .5; }
.hbs-tut-bid-buttons { display: flex; gap: 8px; }
.hbs-tut-btn { width: 44px; height: 44px; border-radius: 10px; border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: inherit; font-weight: 700; font-size: 18px; cursor: default; }
.hbs-tut-btn-sel { background: #d7a93f; border-color: #d7a93f; color: #111; }
.hbs-tut-bids { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 260px; }
.hbs-tut-bid-row { display: flex; justify-content: space-between; padding: 4px 8px; background: rgba(255,255,255,.06); border-radius: 6px; font-size: 13px; }
.hbs-tut-trick-cards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hbs-tut-score-row { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 13px; }
.hbs-tut-exact { border-left: 3px solid #7ef07e; }
.hbs-tut-text { font-size: 14px; line-height: 1.6; margin: 10px 0; }
.hbs-tut-dots { display: flex; gap: 6px; justify-content: center; margin: 10px 0; }
.hbs-tut-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); cursor: pointer; transition: background .2s; }
.hbs-tut-dot.is-active { background: #d7a93f; }
.hbs-tut-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; }
.hbs-tut-ready { font-size: 40px; }

/* ===== 0.94: Brand/Logo, Footer, Affiliate, Legal, User Popover ===== */

/* Brand header */
.hbs-brand { display: flex; align-items: center; gap: 14px; }
.hbs-logo { width: 72px; height: 60px; flex-shrink: 0; }
.hbs-brand-text h1 { font-size: clamp(24px, 6vw, 42px); margin: 0; line-height: 1; }
.hbs-version-pill { font-size: 11px; opacity: .55; margin-top: 3px; letter-spacing: .06em; }
.hbs-topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* Footer */
.hbs-footer { margin-top: 32px; padding: 20px clamp(10px,2vw,20px); text-align: center; border-top: 1px solid rgba(255,255,255,.08); }
.hbs-footer-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.hbs-footer-link { background: none; border: none; color: rgba(255,255,255,.5); font-size: 13px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.hbs-footer-link:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); }
.hbs-footer-copy { font-size: 11px; opacity: .35; }

/* Name origin collapsible */
.hbs-name-origin { margin: 8px 0 12px; background: rgba(215,169,63,.08); border: 1px solid rgba(215,169,63,.2); border-radius: 10px; padding: 10px 14px; }
.hbs-name-origin summary { cursor: pointer; font-weight: 600; font-size: 14px; color: #d7a93f; }
.hbs-name-origin-text { margin-top: 10px; font-size: 14px; line-height: 1.6; }

/* Affiliate zone */
.hbs-affiliate-zone { margin: 20px 0; }
.hbs-affiliate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.hbs-affiliate-block { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; transition: background .2s; }
.hbs-affiliate-block:hover { background: rgba(255,255,255,.09); }
.hbs-affiliate-img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; }
.hbs-affiliate-body strong { display: block; font-size: 15px; }
.hbs-affiliate-body p { font-size: 13px; opacity: .75; margin: 4px 0 0; }
.hbs-affiliate-cta { font-size: 13px; color: #d7a93f; font-weight: 600; margin-top: auto; }
.hbs-affiliate-placeholder { border: 1px dashed rgba(255,255,255,.2); border-radius: 14px; padding: 18px; opacity: .6; }
.hbs-affiliate-ph-inner { display: flex; gap: 12px; align-items: center; }
.hbs-affiliate-ph-icon { font-size: 28px; }
.hbs-affiliate-placeholder strong { display: block; margin-bottom: 4px; }
.hbs-affiliate-placeholder p { font-size: 12px; margin: 0; opacity: .75; }
.hbs-aff-form { margin-top: 14px; padding: 14px; background: rgba(255,255,255,.04); border-radius: 12px; }
.hbs-aff-form h4 { margin: 0 0 12px; }

/* Legal layer */
.hbs-legal-card { max-width: 640px; }
.hbs-legal-body { font-size: 14px; line-height: 1.65; }
.hbs-legal-body p { margin: 10px 0; }
.hbs-legal-body ul { padding-left: 20px; }
.hbs-legal-body strong { color: #e8dcc8; }

/* User popover (logout quick-access) */
.hbs-user-popover {
  position: absolute; z-index: 500;
  background: #1e2535; border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px; padding: 10px; min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 6px;
}
.hbs-popover-name { font-size: 13px; opacity: .7; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 4px; }
.hbs-user-popover button { text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; width: 100%; border: none; background: transparent; color: inherit; cursor: pointer; }
.hbs-user-popover button:hover { background: rgba(255,255,255,.08); }