*{box-sizing:border-box} html{color-scheme:dark}
.lobby-shell{width:min(97%,1500px);margin:auto;padding:22px 0 50px}.lobby-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px;background:#151027;border:1px solid #3e315d;border-radius:22px}.mini-brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;letter-spacing:3px}.mini-logo{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#833dff,#e83f9f)}.user-summary{display:flex;align-items:center;gap:14px;color:#c9bfd4}.small-button{border:1px solid #55456f;background:#211838;color:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}.main-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0}.nav-item{border:1px solid #392d51;background:#151027;color:#bfb4cb;border-radius:14px;padding:14px 8px;cursor:pointer;font-weight:700}.nav-item.active{background:linear-gradient(90deg,#7540ea,#be368c);color:#fff}.lobby-grid{display:grid;grid-template-columns:230px minmax(0,1fr) 280px;gap:14px;align-items:start}.room-panel,.chat-panel,.feature-panel,.online-sidebar{background:#151027;border:1px solid #3e315d;border-radius:24px;padding:20px}.eyebrow.compact{margin:0;font-size:12px;letter-spacing:3px}.room-card{width:100%;text-align:left;border:1px solid #3e315d;background:#211838;color:#ddd4e5;border-radius:14px;padding:15px;margin-top:14px;cursor:pointer}.room-card.active{border-color:#a76dff;background:#342155}.chat-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.chat-heading-actions{display:grid;justify-items:end;gap:9px}.chat-heading h1{font-size:38px;margin:12px 0}.online-badge{color:#8ee3a7;background:#173323;border-radius:999px;padding:9px 12px;white-space:nowrap}.people-toggle{display:none;border:1px solid #7654a9;background:#342155;color:#fff;border-radius:12px;padding:10px 13px;font-weight:800}.messages{height:420px;overflow:auto;background:#0d0918;border:1px solid #352846;border-radius:18px;padding:16px}.chat-message{padding:12px 14px;background:#1b132d;border-radius:14px;margin-bottom:10px}.message-head{display:flex;justify-content:space-between;gap:20px}.message-head time{font-size:12px;color:#8e849b}.chat-message p{margin:7px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.message-form{display:grid;grid-template-columns:1fr 150px;gap:10px;margin-top:12px}.message-form textarea{resize:vertical;border:1px solid #44385e;background:#0d0918;color:#fff;border-radius:15px;padding:14px;font:inherit}.send-button{padding:12px}.feature-panel{min-height:500px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{margin:0;min-height:100vh;font-family:Arial,Helvetica,sans-serif;color:#f7f3fb;background:radial-gradient(circle at 18% 15%,rgba(196,158,255,.32) 0 1px,transparent 2px),radial-gradient(circle at 78% 32%,rgba(255,255,255,.22) 0 1px,transparent 2px),linear-gradient(180deg,#0b0717,#10091f 58%,#07050e);background-size:85px 85px,120px 120px,auto}
.room-card strong,.room-card span{display:block}.room-card span{color:#aaa1ba;font-size:13px;line-height:1.35;margin-top:5px}.room-card.active span{color:#ded4ef}.room-description{color:#bdb2c8;margin:-4px 0 14px}@media(min-width:768px) and (max-width:800px){.room-panel{display:block;overflow-x:auto}.room-panel #roomList{display:flex;gap:10px}.room-card{min-width:210px;margin-top:14px}}

.rules-open-button{width:100%;margin:10px 0 2px;padding:15px;border:1px solid #7654a9;border-radius:14px;background:#211838;color:#fff;font:inherit;font-weight:700;cursor:pointer}.rules-open-button:hover{background:#342155}.inline-rule-link{border:0;background:none;color:#cbb5ff;text-decoration:underline;padding:0;font:inherit;font-weight:700;cursor:pointer}.rules-box h2{font-size:34px;margin:12px 0}.rule-copy{display:grid;gap:5px;line-height:1.35}.rule-copy span{color:#bdb2c8;font-size:14px}.rules-box .btn{margin-top:18px}@media(max-width:520px){.modal{padding:10px}
.modalbox{padding:20px}
.rule{align-items:flex-start;padding:14px}
.num{min-width:40px;height:40px}
}


.studio-footer{margin-top:30px;padding-top:22px;border-top:1px solid #392d51;text-align:center;color:#b8a9cb}
.studio-footer p{margin:0;max-width:100%;overflow-wrap:anywhere}
.studio-footer .studio-platforms{font-size:15px;line-height:1.65;color:#c4b7d3}
.studio-footer .studio-platforms span{display:inline-block}
.studio-footer .studio-credits{display:grid;gap:7px;margin-top:22px;font-size:11px;line-height:1.8;letter-spacing:1.2px;text-transform:uppercase}
.studio-footer .studio-credits span{display:inline-block;max-width:100%}
.studio-footer .studio-original{color:#d1bddf;letter-spacing:2.8px}
.studio-footer .studio-rights{font-size:10px;color:#a798b8;letter-spacing:1px}
@media(max-width:430px){.studio-footer{margin-top:24px;padding-top:18px}
.studio-footer .studio-platforms{font-size:14px}
.studio-footer .studio-credits{letter-spacing:.8px;gap:9px}
}

.coin-button{border:1px solid #7654a9;background:#342155;color:#fff;border-radius:999px;padding:9px 13px;font:inherit;font-weight:800;cursor:pointer}.coin-button:hover{background:#4a2b73}.coin-account{max-width:700px;margin:24px 0}.coin-balance{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px;border:1px solid #7654a9;border-radius:18px;background:linear-gradient(90deg,#342155,#211838)}.coin-balance strong{font-size:28px;color:#f2d36b}.coin-transactions{display:grid;gap:9px;margin:12px 0 24px}.coin-transaction{display:flex;justify-content:space-between;gap:20px;padding:14px 16px;background:#211838;border-radius:12px}.coin-plus{color:#8ee3a7}.coin-minus{color:#ff9eae}
.coin-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.coin-stats .coin-balance{display:grid;gap:8px}.presence-note{color:#aaa1ba;line-height:1.5}@media(max-width:650px){.coin-stats{grid-template-columns:1fr}
}

[hidden]{display:none!important}.daily-panel{max-width:700px;margin:24px 0;padding:22px;border:1px solid #7654a9;border-radius:18px;background:#211838}.fish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.fish-card{display:grid;gap:8px;place-items:center;border:1px solid #7654a9;border-radius:18px;background:#211838;color:#fff;padding:22px 12px;cursor:pointer}.fish-card>span{font-size:54px}.fish-card small{color:#c9bfd4}.fish-card:not(:disabled):hover{transform:translateY(-3px);background:#342155}.fish-card.revealed{border-color:#b78cff}.fish-card.selected{background:linear-gradient(160deg,#50308b,#9d317b);box-shadow:0 0 25px #c43fff55}.catch-result{min-height:32px;text-align:center;font-size:22px;font-weight:800;color:#f2d36b;margin:14px}.catch-box h2{font-size:38px;margin:12px 0}@media(max-width:650px){.fish-grid{grid-template-columns:1fr}
.fish-card{grid-template-columns:auto 1fr auto;justify-items:start}
.fish-card>span{font-size:38px}
}

.quiz-panel{max-width:820px;margin:24px 0}.quiz-progress{display:inline-block;padding:9px 14px;border-radius:999px;background:#342155;color:#d9cafa;margin-bottom:18px}.quiz-category{color:#bca7ef;font-weight:800;letter-spacing:2px;text-transform:uppercase}.quiz-question{font-size:30px;line-height:1.25}.quiz-answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quiz-answer{min-height:76px;text-align:left;border:1px solid #7654a9;border-radius:16px;background:#211838;color:#fff;padding:16px;font:inherit;font-weight:700;cursor:pointer}.quiz-answer:not(:disabled):hover{background:#342155}.quiz-answer.correct{border-color:#58d683;background:#173323}.quiz-answer.wrong{border-color:#ff6b86;background:#481a28}.quiz-feedback{margin-top:18px;padding:18px;border-radius:16px;background:#211838}.quiz-feedback.success strong{color:#8ee3a7}.quiz-feedback.failure strong{color:#ff9eae}.quiz-feedback p{line-height:1.5}.quiz-next{margin-top:14px}.quiz-done{padding:24px;border:1px solid #7654a9;border-radius:18px;background:#211838}@media(max-width:650px){.quiz-answers{grid-template-columns:1fr}
.quiz-question{font-size:25px}
}

.role-badge{display:inline-flex;align-items:center;width:max-content;border:1px solid #55456f;border-radius:999px;padding:4px 9px;background:#211838;color:#c9bfd4;font-size:11px;font-weight:900;letter-spacing:.5px}.role-badge.role-admin{border-color:#e9bd43;background:linear-gradient(90deg,#513609,#8a5f0d);color:#fff1a8;box-shadow:0 0 14px #f6c64c33}.role-badge.role-moderator{border-color:#54c6b7;background:#153a36;color:#a7fff0}.message-author{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.online-users-panel{border-top:1px solid #3e315d;margin-top:20px;padding-top:20px}.online-users-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.online-users-heading>span{min-width:26px;height:26px;display:grid;place-items:center;border-radius:999px;background:#342155;color:#dccdff;font-size:12px;font-weight:900}.online-user-list{display:grid;gap:9px;margin-top:13px}.online-user-card{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #3e315d;border-radius:14px;background:#211838}.user-avatar{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:linear-gradient(135deg,#7540ea,#be368c);font-weight:900}.user-avatar.role-admin{background:linear-gradient(135deg,#d49a22,#7e4d08);color:#fff4b5}.online-user-card>div{min-width:0;display:grid;gap:4px}.online-user-card strong{overflow:hidden;text-overflow:ellipsis}.online-loading{font-size:14px;margin:0}@media(min-width:768px) and (max-width:800px){.online-users-panel{min-width:230px}.room-panel{display:grid;grid-template-columns:1fr;gap:10px}.room-panel #roomList{display:flex}.online-user-list{display:flex;overflow-x:auto}.online-user-card{min-width:190px}}
@media(max-width:767px){.online-users-panel{min-width:230px}
.online-user-list{display:flex;overflow-x:auto}
.online-user-card{min-width:190px}
}

.user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.message-author .user-avatar{width:28px;height:28px;font-size:12px}.profile-panel{display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:center;max-width:780px;margin:24px 0;padding:26px;border:1px solid #7654a9;border-radius:22px;background:#211838}.profile-avatar-wrap{position:relative;width:170px;height:170px}.profile-avatar-fallback,.profile-avatar{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}.profile-avatar-fallback{display:grid;place-items:center;background:linear-gradient(135deg,#7540ea,#be368c);font-size:64px;font-weight:900}.profile-avatar{border:3px solid #d3a5ff}.avatar-picker{display:inline-block;margin:10px 0 0;padding:14px 18px;border-radius:14px;background:linear-gradient(90deg,#8248ff,#e63e9c);color:#fff;cursor:pointer}.profile-panel h2{font-size:32px;margin:0 0 8px}@media(max-width:620px){.profile-panel{grid-template-columns:1fr;text-align:center}
.profile-avatar-wrap{margin:auto}
}

.friends-panel{max-width:900px;margin:24px 0}.friend-search{padding:20px;border:1px solid #7654a9;border-radius:18px;background:#211838}.friend-search label{margin:0 0 10px}.friend-search>div{display:grid;grid-template-columns:1fr auto;gap:10px}.friend-search .small-button{min-width:110px}.friends-panel section{margin-top:26px}.friends-panel h2{font-size:23px}.friend-grid{display:grid;gap:10px}.friend-card{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid #3e315d;border-radius:16px;background:#211838}.friend-card>.user-avatar{width:52px;height:52px}.friend-details{display:grid;gap:7px;min-width:0}.friend-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.friend-title strong{font-size:18px}.friend-actions{display:flex;gap:8px;align-items:center}.friend-action{border:1px solid #7654a9;border-radius:11px;background:#342155;color:#fff;padding:10px 12px;cursor:pointer;font-weight:700}.friend-action.primary{border:0;background:linear-gradient(90deg,#8248ff,#e63e9c)}.friend-action:disabled{opacity:.6}.friend-online{color:#8ee3a7;font-size:13px}.friend-offline,.friend-relation{color:#aaa1ba;font-size:13px}.friend-empty{font-size:15px;margin:0}@media(max-width:650px){.friend-search>div{grid-template-columns:1fr}
.friend-card{grid-template-columns:auto auto 1fr}
.friend-actions{grid-column:1/-1}
.friend-action{flex:1}
}

a{color:inherit}.page{width:min(92%,760px);margin:auto;padding:42px 0 55px}.brand{text-align:center}.logo{width:86px;height:86px;margin:auto;border-radius:28px;display:grid;place-items:center;font-size:40px;font-weight:800;background:linear-gradient(135deg,#833dff,#e83f9f);box-shadow:0 15px 45px #7d2fff40}.eyebrow{letter-spacing:5px;color:#bca7ef;font-weight:700;margin-top:26px}h1{font-size:clamp(42px,10vw,72px);font-weight:300;line-height:.92;margin:25px 0 8px}.outline{color:transparent;-webkit-text-stroke:1px #d6c8f5}.meta{margin:50px 0 35px}.row{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #2c2341;padding:16px 0;color:#aaa1ba}.row b{color:#f5f1fb}.btn{display:block;width:100%;border:0;border-radius:17px;padding:20px;text-align:center;text-decoration:none;font-size:20px;font-weight:800;background:linear-gradient(90deg,#8248ff,#e63e9c);color:#fff;cursor:pointer}.btn:disabled{opacity:.65;cursor:wait}.linkbtn{background:none;border:0;color:#c5bacf;text-decoration:underline;font-size:18px;width:100%;padding:18px;cursor:pointer}.panel{background:#151027;border:1px solid #3e315d;border-radius:28px;padding:28px;box-shadow:0 20px 55px #0007}.panel h1{font-size:48px;line-height:1.05;margin:18px 0}.muted{color:#aaa1ba;font-size:19px;line-height:1.5}label{display:block;font-weight:700;margin:22px 0 9px}.field{width:100%;padding:17px;border-radius:15px;border:1px solid #44385e;background:#0d0918;color:#fff;font-size:17px}.check{display:flex;gap:12px;align-items:flex-start;margin:20px 0;color:#bcb2c8}.check input{margin-top:4px;min-width:18px;min-height:18px}.small{font-size:14px;color:#8e849b;text-align:center;margin-top:22px}.actions{display:grid;gap:12px;margin-top:24px}.back{text-decoration:none;color:#bdb2c8}.modal{display:none;position:fixed;inset:0;background:#05030bd9;padding:22px;align-items:center;justify-content:center}.modal.open{display:flex}.modalbox{width:min(100%,700px);max-height:90vh;overflow:auto;background:#17102a;border:1px solid #49366c;border-radius:30px;padding:28px}.rule{display:flex;align-items:center;gap:18px;background:#211838;border-radius:14px;padding:16px;margin:12px 0}.num{min-width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:22px;font-weight:800;background:#7433ed}.close{float:right;background:none;border:0;color:#aaa1ba;font-size:34px;cursor:pointer}.notice{padding:15px;border-radius:14px;background:#281c40;color:#c9bfd4;margin-top:18px}.form-message{min-height:24px;margin:18px 0;color:#aee7c0}.form-message.error{color:#ff9eae}@media(max-width:520px){.page{padding-top:28px}
.panel{padding:22px}
.panel h1{font-size:39px}
.row{font-size:14px}
}


.message-form{position:relative;grid-template-columns:1fr 56px 150px}.emoji-toggle{border:1px solid #654987;background:#211838;color:#fff;border-radius:15px;font-size:25px;cursor:pointer}.emoji-toggle:hover,.emoji-toggle:focus-visible{border-color:#d45eff;background:#342155}.emoji-picker{position:absolute;right:160px;bottom:68px;z-index:20;width:min(320px,calc(100vw - 70px));display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:10px;background:#171027;border:1px solid #a76dff;border-radius:16px;box-shadow:0 14px 35px #07030dbf}.emoji-picker[hidden]{display:none}.emoji-option{border:0;background:#281b42;color:#fff;border-radius:10px;padding:7px 4px;font-size:23px;cursor:pointer}.emoji-option:hover,.emoji-option:focus-visible{background:#7540ea;transform:scale(1.08)}
@media(min-width:768px) and (max-width:800px){.message-form{grid-template-columns:1fr 54px}.message-form textarea{grid-column:1/-1}.send-button{grid-column:1/-1}.emoji-picker{position:static;grid-column:1/-1;grid-row:auto;width:100%;max-height:210px;overflow-y:auto;box-shadow:none}}


.admin-link{text-decoration:none;white-space:nowrap}.profile-visibility{display:flex;align-items:flex-start;gap:10px;margin-top:18px;line-height:1.4;color:#d8cfe2}.profile-visibility input{width:20px;height:20px;flex:0 0 auto}.youtube-preview{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:14px;max-width:520px;margin-top:12px;padding:10px;border:1px solid #55456f;border-radius:14px;background:#0d0918;text-decoration:none}.youtube-preview img{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:9px}.youtube-preview-open{min-height:44px;border:1px solid #7654a9;border-radius:12px;background:#211838;color:#fff;padding:10px 12px;font:inherit;font-weight:800;cursor:pointer}.youtube-preview-open:hover,.youtube-preview-open:focus-visible{background:#342155}.youtube-player{grid-column:1/-1;display:grid;gap:8px;min-width:0}.youtube-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#000}.youtube-player-close{justify-self:end;border:1px solid #55456f;border-radius:9px;background:#211838;color:#fff;padding:7px 10px;cursor:pointer}.media-preview-cover{display:grid;place-items:center;min-height:84px;border-radius:9px;background:linear-gradient(135deg,#3b236e,#1e1733);color:#fff;font-weight:900}.media-preview-cover img{display:block;width:100%;height:100%;min-height:84px;object-fit:cover;border-radius:9px}.floating-media-player{position:fixed;z-index:120;right:18px;bottom:18px;width:min(380px,calc(100vw - 28px));padding:8px;border:1px solid #7654a9;border-radius:16px;background:#151027;box-shadow:0 18px 55px #000b}.floating-media-bar{display:flex;align-items:center;gap:7px;min-height:34px;cursor:move;touch-action:none}.floating-media-bar strong{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.floating-media-bar button{border:1px solid #55456f;border-radius:8px;background:#211838;color:#fff;min-width:32px;height:30px;cursor:pointer}.floating-media-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#000}.floating-media-player.is-minimized{width:auto;min-width:190px}.floating-media-player.is-minimized iframe{display:none}.message-report{display:block;margin:8px 0 0 auto;border:0;background:none;color:#9e91aa;font-size:12px;cursor:pointer}.message-report:hover{color:#ff9eae}.entrance-members{margin:34px 0;padding:24px;border:1px solid #3e315d;border-radius:24px;background:#151027;text-align:left}.entrance-members h2{margin:10px 0 4px;font-size:30px}.entrance-members>p{color:#aaa1ba}.entrance-member-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px;margin-top:20px}.entrance-member-card{display:grid;place-items:center;gap:9px;padding:16px 10px;border:1px solid #44385e;border-radius:16px;background:#211838;text-align:center}.entrance-avatar,.admin-avatar{width:78px;height:78px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#7540ea,#be368c);font-size:30px;font-weight:900}.entrance-avatar.role-admin,.admin-avatar.role-admin{background:linear-gradient(135deg,#d49a22,#7e4d08);color:#fff4b5}.entrance-avatar img,.admin-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}

.admin-shell{width:min(96%,1380px);margin:auto;padding:22px 0 60px}.admin-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:18px 0;padding:26px;border:1px solid #3e315d;border-radius:24px;background:linear-gradient(120deg,#17102a,#251443)}.admin-hero h1{font-size:52px;margin:12px 0}.admin-hero p{color:#bfb4cb}.admin-status{padding:10px 14px;border-radius:999px;background:#173323;color:#8ee3a7;white-space:nowrap}.admin-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:14px 0}.admin-tab{border:1px solid #55456f;background:#151027;color:#ddd4e5;border-radius:14px;padding:15px 9px;font-weight:800;cursor:pointer}.admin-tab.active{border-color:#d45eff;background:linear-gradient(90deg,#7540ea,#be368c);color:#fff}.admin-tab span:not(:empty){display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:5px;border-radius:50%;background:#e74470;color:#fff;font-size:12px}.admin-section{padding:24px;border:1px solid #3e315d;border-radius:24px;background:#151027}.admin-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px}.admin-section-head h2{font-size:32px;margin:0 0 7px}.admin-section-head p{margin:0;color:#aaa1ba}.admin-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.admin-stat-card{display:grid;gap:8px;padding:20px;border:1px solid #55456f;border-radius:18px;background:linear-gradient(145deg,#211838,#342155)}.admin-stat-card>span{font-size:28px}.admin-stat-card strong{font-size:34px;color:#f2d36b}.admin-stat-card small{color:#c9bfd4}.admin-search{display:grid;grid-template-columns:minmax(180px,320px) auto;gap:9px}.admin-user-list,.admin-room-list,.admin-report-list{display:grid;gap:12px}.admin-user-card{display:grid;grid-template-columns:auto minmax(180px,1fr) minmax(360px,auto);align-items:center;gap:15px;padding:15px;border:1px solid #44385e;border-radius:17px;background:#211838}.admin-avatar{width:58px;height:58px;font-size:21px}.admin-user-info{display:grid;gap:7px;min-width:0}.admin-user-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.admin-user-title strong{font-size:19px}.admin-user-info>span{color:#aaa1ba;font-size:13px}.admin-user-actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}.admin-action,.admin-select{border:1px solid #654987;background:#342155;color:#fff;border-radius:10px;padding:9px 10px;font:inherit;font-size:13px;cursor:pointer}.admin-action.danger{border-color:#a63b58;background:#481a28}.admin-action.success{border-color:#347a51;background:#173323}.admin-action:disabled{opacity:.55}.admin-room-form{display:grid;grid-template-columns:1fr 2fr 180px;gap:10px;margin-bottom:20px}.admin-room-form .btn{font-size:16px;padding:14px}.admin-room-card{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px;border:1px solid #44385e;border-radius:16px;background:#211838}.admin-room-card>div{display:grid;gap:6px}.admin-room-card span{color:#aaa1ba}.admin-table-wrap{overflow:auto}.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{text-align:left;padding:13px;border-bottom:1px solid #3e315d;vertical-align:top}.admin-table th{color:#bca7ef}.admin-report-card{display:grid;gap:10px;padding:18px;border:1px solid #55456f;border-radius:17px;background:#211838}.admin-report-card.status-open{border-color:#a63b58}.admin-report-card blockquote{margin:0;padding:13px;border-left:4px solid #7540ea;background:#0d0918;border-radius:8px}.admin-report-card p{margin:0;color:#ffb3c1}.admin-report-card>span{color:#aaa1ba;font-size:13px}
@media(max-width:1000px){.admin-nav{grid-template-columns:repeat(3,1fr)}.admin-stat-grid{grid-template-columns:repeat(2,1fr)}.admin-user-card{grid-template-columns:auto 1fr}.admin-user-actions{grid-column:1/-1;justify-content:flex-start}.admin-room-form{grid-template-columns:1fr}}
@media(max-width:650px){.admin-hero{display:block}
.admin-status{display:inline-block;margin-top:12px}
.admin-nav{grid-template-columns:repeat(2,1fr)}
.admin-stat-grid{grid-template-columns:1fr}
.admin-section-head{display:block}
.admin-search{grid-template-columns:1fr;margin-top:14px}
.youtube-preview{grid-template-columns:100px 1fr}
.youtube-preview img{width:100px}
.entrance-member-grid{grid-template-columns:repeat(2,1fr)}
}


/* Online-Benutzer nach Chatraum */
.online-sidebar{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto}.online-sidebar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.online-sidebar-head>div>strong{display:block;margin-top:8px;color:#f4edff}.people-close{display:none;border:0;background:transparent;color:#fff;font-size:34px;line-height:1;cursor:pointer}.online-search-label{font-size:13px;color:#bfb4cb;margin:18px 0 7px}.online-search{width:100%;border:1px solid #55456f;border-radius:12px;background:#0d0918;color:#fff;padding:11px 12px;font:inherit}.online-user-list{display:grid;gap:13px;margin-top:16px}.online-room-group{display:grid;gap:7px}.online-room-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:11px;background:linear-gradient(90deg,#5930a6,#8f357d);color:#fff}.online-room-heading>span{min-width:23px;height:23px;display:grid;place-items:center;border-radius:999px;background:#0d091899;font-size:12px;font-weight:900}.online-room-group.afk .online-room-heading{background:linear-gradient(90deg,#5d546c,#352d43)}.online-user-card{width:100%;color:#fff;text-align:left;font:inherit;cursor:pointer}.online-user-card:hover,.online-user-card:focus-visible{border-color:#a76dff;background:#342155}.online-profile-box{width:min(100%,390px);text-align:center}.online-profile-box #onlineProfileAvatar{display:grid;place-items:center;margin-top:20px}.online-profile-box #onlineProfileAvatar .user-avatar{width:110px;height:110px;font-size:42px}.online-profile-box h2{font-size:32px;margin:16px 0 10px}.online-profile-box #onlineProfileRole{display:grid;place-items:center}.online-profile-room{margin:18px 0 0;color:#c9bfd4}.people-backdrop{display:none}
@media(min-width:1101px){.lobby-grid{grid-template-columns:250px minmax(0,1fr) 230px}.online-sidebar{grid-column:1;grid-row:1}.chat-panel{grid-column:2;grid-row:1}.room-panel{grid-column:3;grid-row:1}.online-sidebar .online-user-card{padding:8px}.online-sidebar .user-avatar{width:32px;height:32px}.online-sidebar .community-badge,.online-sidebar .presence-status{font-size:10px}}
@media(max-width:1100px){.lobby-grid{grid-template-columns:210px minmax(0,1fr)}.online-sidebar{position:fixed;z-index:60;top:0;right:0;width:min(88vw,340px);height:100dvh;max-height:none;border-radius:24px 0 0 24px;display:none;box-shadow:-18px 0 55px #0009}.online-sidebar.open{display:block}.people-toggle,.people-close{display:block}.people-backdrop{position:fixed;z-index:55;inset:0;width:100%;height:100%;border:0;background:#05030bbf}.people-backdrop:not([hidden]){display:block}.people-open{overflow:hidden}}
@media(min-width:768px) and (max-width:800px){.main-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.lobby-grid{grid-template-columns:minmax(0,1fr)}.room-panel{display:block;overflow-x:auto}.room-panel #roomList{display:flex;gap:10px}.room-card{min-width:210px;margin-top:14px}.messages{height:55vh}.user-summary{gap:8px}.user-summary #headerUser{display:none}.message-form{grid-template-columns:1fr}.chat-heading{display:flex}.chat-heading-actions{align-self:flex-start}.online-badge{display:none}.online-user-list{display:grid;overflow:visible}.online-user-card{min-width:0}}
@media(max-width:767px){.user-summary{gap:8px}
.user-summary #headerUser{display:none}
.online-user-list{display:grid;overflow:visible}
.online-user-card{min-width:0}
}

@media(max-width:520px){.online-sidebar{width:min(92vw,340px)}
}


.account-strip{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;flex:1;flex-wrap:wrap}.account-profile{display:flex;align-items:center;gap:8px;min-width:0;border:0;background:transparent;color:#fff;padding:2px;cursor:pointer;text-align:left}.account-avatar{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;overflow:hidden;font-weight:800}.account-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.account-identity{display:grid;gap:3px;min-width:0}.account-identity>strong{display:block;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-badges{display:flex;gap:4px;flex-wrap:wrap}.account-badges .role-badge,.account-badges .community-badge{font-size:10px;padding:2px 6px}.account-metric{display:flex;align-items:center;gap:5px;min-width:0;border:1px solid #55456f;background:#211838;color:#fff;border-radius:11px;padding:7px 9px;text-align:left;cursor:pointer}.account-metric>span:last-child{display:grid;gap:1px;min-width:0}.account-metric strong{font-size:13px;white-space:nowrap}.account-metric small{font-size:10px;color:#bfb4cb;white-space:nowrap}.account-status select{max-width:140px;border:1px solid #55456f;background:#211838;color:#fff;border-radius:11px;padding:8px 7px;font:inherit}.account-online{color:#9ceab3}.account-online>span:first-child{font-size:12px}.account-strip #logoutButton{white-space:nowrap}
@media(min-width:768px) and (max-width:800px){.lobby-header{display:block}.account-strip{width:100%;justify-content:flex-start;gap:5px;margin-top:8px}.account-profile{flex:1 1 150px}.account-identity>strong{max-width:120px}.account-metric{padding:7px}.account-status select{max-width:130px}}



/* Flexible Inhalte bleiben innerhalb ihres Bereichs. */
.lobby-header,.user-summary{flex-wrap:wrap}
.mini-brand,.user-summary,.lobby-grid>*{min-width:0}
.user-summary{justify-content:flex-end}
.main-nav{grid-template-columns:repeat(6,minmax(0,1fr))}
.nav-item{min-width:0;overflow-wrap:anywhere}
.field,textarea{min-width:0;max-width:100%}
.friend-title strong,.message-author strong,.entrance-member-card strong,.admin-user-title strong,
.admin-room-card,.admin-report-card,.online-room-heading,.chat-heading h1{overflow-wrap:anywhere}
.admin-room-card input.field{padding:9px 10px;font-size:14px;margin:0}.admin-room-card>div{flex:1}.admin-room-card .admin-user-actions{flex:0 0 auto}
.message-head{flex-wrap:wrap;gap:6px}
.message-head time{flex:0 0 auto}
.chat-heading>div,.youtube-preview>span,.admin-room-card>div{min-width:0}
.admin-section,.admin-user-card,.admin-section-head>*{min-width:0}
.admin-user-card{overflow-wrap:anywhere}
.admin-load-error{padding:16px;border:1px solid #b34562;border-radius:12px;background:#341925;grid-column:1/-1}
.admin-load-error p{margin:0 0 10px}
.modal{z-index:100}
.modalbox{overscroll-behavior:contain;max-height:90dvh}
button,a,input,select,textarea,summary{touch-action:manipulation}
:focus-visible{outline:3px solid #e5c07c;outline-offset:3px}
summary{cursor:pointer;padding:12px 0;font-weight:700}

/* Spiele */
.games-hub{margin:14px 0;min-width:0}
.game-tabs{display:flex;gap:8px;margin-bottom:12px}
.game-tab{flex:1;min-width:0;border:1px solid #654987;border-radius:14px;background:#211838;color:#fff;padding:12px;font-weight:900;cursor:pointer}
.game-tab.active{background:linear-gradient(90deg,#7540ea,#be368c)}
.wheel-game,.hearts-game{padding:18px;border:1px solid #55456f;border-radius:22px;background:#100b1f;min-width:0}
.wheel-wrap{--wheel-label-radius:88px;position:relative;width:min(100%,280px);aspect-ratio:1;margin:24px auto;isolation:isolate}
.wheel-wrap::before{content:"";position:absolute;inset:-10px;border:2px solid transparent;border-radius:50%;background:linear-gradient(#100b20,#100b20) padding-box,conic-gradient(from 15deg,#fff0b6,#8b5dff 22%,#76f4ff 43%,#f5b950 61%,#d84cff 79%,#ffe8a8) border-box;box-shadow:0 0 18px #b54fff48,0 0 38px #34eaff26,0 4px 12px #05030a99;pointer-events:none}
.wheel-wrap::after{content:"";position:absolute;inset:-4px;border:1px solid #ffe9b685;border-radius:50%;box-shadow:inset 0 0 8px #ffffff20,0 0 12px #f8cb6b35;pointer-events:none}
.wheel-wrap.spinning::before{animation:wheel-orbit-pulse 1.25s ease-in-out infinite alternate}
.wheel-wrap.spinning::after{animation:wheel-launch-flash .72s ease-out 1}
.wheel-wrap.finale::before{animation:wheel-finale-pulse .52s ease-in-out infinite alternate}
@keyframes wheel-launch-flash{0%{filter:brightness(1)}35%{filter:brightness(2)}100%{filter:brightness(1)}}
@keyframes wheel-orbit-pulse{to{filter:brightness(1.22)}}
@keyframes wheel-finale-pulse{to{filter:brightness(1.28)}}
.prize-wheel{position:absolute;inset:0;z-index:1;overflow:hidden;border:9px solid #e9c76d;border-radius:50%;background:radial-gradient(circle at 70% 68%,#c375ff16 0,transparent 32%),radial-gradient(circle at 28% 30%,#73eaff12 0,transparent 43%),radial-gradient(circle at 34% 27%,#ffffff32 0,transparent 38%),conic-gradient(from -.6deg,#8138df 0deg 43.8deg,#f5d981 43.8deg 45deg,#c936a1 45deg 88.8deg,#f5d981 88.8deg 90deg,#39236e 90deg 133.8deg,#f5d981 133.8deg 135deg,#986123 135deg 178.8deg,#f5d981 178.8deg 180deg,#7938d5 180deg 223.8deg,#f5d981 223.8deg 225deg,#bd318f 225deg 268.8deg,#f5d981 268.8deg 270deg,#30205f 270deg 313.8deg,#f5d981 313.8deg 315deg,#a66a27 315deg 358.8deg,#f5d981 358.8deg 360deg);box-shadow:inset 0 0 0 3px #ffffff30,inset 0 0 26px #0b062cbb,0 0 19px #d64fff82,0 0 38px #a34dff48,0 5px 14px #05030acc}
.prize-wheel::before{content:"";position:absolute;z-index:1;inset:3px;border:1px solid #ffffff70;border-radius:50%;box-shadow:inset 0 0 18px #ffffff18;pointer-events:none}
.prize-wheel::after{content:"";position:absolute;z-index:4;left:50%;top:50%;width:42px;height:42px;border:2px solid #ffe8a1;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff 0 3%,#ffe9ba 4% 10%,transparent 22%),linear-gradient(140deg,transparent 38%,#ffffff88 40% 43%,transparent 45%),conic-gradient(from 22.5deg,#efcbff 0deg 45deg,#8250bd 45deg 90deg,#5b388e 90deg 135deg,#66dff1 135deg 180deg,#49317a 180deg 225deg,#b05cdb 225deg 270deg,#382255 270deg 315deg,#ffe0a7 315deg 360deg);clip-path:polygon(50% 0,86% 20%,100% 50%,82% 86%,50% 100%,18% 86%,0 50%,14% 20%);box-shadow:0 0 0 4px #2a174e,0 0 14px #ffdc79d9,0 0 27px #bd63ff99;transform:translate(-50%,-50%);pointer-events:none}
.prize-wheel>span{position:absolute;z-index:2;left:50%;top:50%;width:48px;height:30px;margin:-15px 0 0 -24px;transform-origin:50% 50%;user-select:none;-webkit-user-drag:none}
.wheel-prize-value{display:grid;place-items:center;width:100%;height:100%;border-radius:9px;color:#fff;font-size:17px;font-weight:950;letter-spacing:.02em;line-height:1;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #150824,0 0 8px #f9e4ffb3;transform-origin:50% 50%}
.prize-wheel>span:nth-child(1){transform:rotate(22.5deg) translateY(calc(-1 * var(--wheel-label-radius)))}
.prize-wheel>span:nth-child(2){transform:rotate(67.5deg) translateY(calc(-1 * var(--wheel-label-radius)))}
.prize-wheel>span:nth-child(3){transform:rotate(112.5deg) translateY(calc(-1 * var(--wheel-label-radius)))}
.prize-wheel>span:nth-child(4){transform:rotate(157.5deg) translateY(calc(-1 * var(--wheel-label-radius)))}
.prize-wheel>span:nth-child(5){transform:rotate(202.5deg) translateY(calc(-1 * var(--wheel-label-radius)))}
.prize-wheel>span:nth-child(6){transform:rotate(247.5deg) translateY(calc(-1 * var(--wheel-label-radius)))}
.prize-wheel>span:nth-child(7){transform:rotate(292.5deg) translateY(calc(-1 * var(--wheel-label-radius)))}
.prize-wheel>span:nth-child(8){transform:rotate(337.5deg) translateY(calc(-1 * var(--wheel-label-radius)))}
.prize-wheel>span:nth-child(1)>.wheel-prize-value{transform:rotate(-22.5deg)}
.prize-wheel>span:nth-child(2)>.wheel-prize-value{transform:rotate(-67.5deg)}
.prize-wheel>span:nth-child(3)>.wheel-prize-value{transform:rotate(-112.5deg)}
.prize-wheel>span:nth-child(4)>.wheel-prize-value{transform:rotate(-157.5deg);color:#25143e;text-shadow:0 1px 1px #fff0c2,0 0 8px #fff1b1}
.prize-wheel>span:nth-child(5)>.wheel-prize-value{transform:rotate(-202.5deg)}
.prize-wheel>span:nth-child(6)>.wheel-prize-value{transform:rotate(-247.5deg)}
.prize-wheel>span:nth-child(7)>.wheel-prize-value{transform:rotate(-292.5deg)}
.prize-wheel>span:nth-child(8)>.wheel-prize-value{transform:rotate(-337.5deg);color:#25143e;text-shadow:0 1px 1px #fff0c2,0 0 8px #fff1b1}
.prize-wheel.spinning .wheel-prize-value{animation:wheel-label-counter-spin 6.2s linear forwards}
@keyframes wheel-label-counter-spin{0%{rotate:0deg;animation-timing-function:cubic-bezier(.34,.02,.64,.35)}6%{rotate:-150deg;animation-timing-function:linear}62%{rotate:calc(920deg - var(--wheel-end,3240deg));animation-timing-function:linear}68%{rotate:calc(720deg - var(--wheel-end,3240deg));animation-timing-function:linear}82%{rotate:calc(360deg - var(--wheel-end,3240deg));animation-timing-function:linear}92%{rotate:calc(135deg - var(--wheel-end,3240deg));animation-timing-function:linear}97%{rotate:calc(36deg - var(--wheel-end,3240deg));animation-timing-function:ease-out}100%{rotate:calc(-1 * var(--wheel-end,3240deg))}}
.prize-wheel.finale>span.passing .wheel-prize-value{background:#fff3;border:1px solid #fff9;box-shadow:0 0 12px #fff7,0 0 22px #ffe17b,0 0 28px #b95cff}
.prize-wheel.winner-highlight{background:conic-gradient(from var(--wheel-winner-start,0deg),#fff2 0deg 44deg,#fff9 44deg 45deg,transparent 45deg 360deg),radial-gradient(circle at 34% 27%,#ffffff32 0,transparent 38%),conic-gradient(from -.6deg,#8138df 0deg 43.8deg,#f5d981 43.8deg 45deg,#c936a1 45deg 88.8deg,#f5d981 88.8deg 90deg,#39236e 90deg 133.8deg,#f5d981 133.8deg 135deg,#986123 135deg 178.8deg,#f5d981 178.8deg 180deg,#7938d5 180deg 223.8deg,#f5d981 223.8deg 225deg,#bd318f 225deg 268.8deg,#f5d981 268.8deg 270deg,#30205f 270deg 313.8deg,#f5d981 313.8deg 315deg,#a66a27 315deg 358.8deg,#f5d981 358.8deg 360deg);animation:wheel-winner-glow 1.2s ease-out 2}
.prize-wheel>span.winner .wheel-prize-value{background:#fff2;border:1px solid #fff9;box-shadow:0 0 12px #fff5,0 0 20px #ffdc7b}
@keyframes wheel-winner-glow{50%{filter:brightness(1.35) drop-shadow(0 0 8px #ffe48c)}to{filter:brightness(1.06)}}
.wheel-pointer{position:absolute;z-index:3;top:-17px;left:calc(50% - 17px);width:34px;height:36px;clip-path:polygon(50% 100%,0 0,100% 0);background:linear-gradient(105deg,#fff5c5 0%,#ffd65e 43%,#fff0a4 66%,#b984ff 100%);filter:drop-shadow(0 0 5px #fff2a6) drop-shadow(0 2px 8px #b13eff);user-select:none;-webkit-user-drag:none}
.wheel-pointer::after{content:"";position:absolute;left:50%;top:3px;width:8px;height:8px;border:1px solid #fff6c9;background:radial-gradient(circle at 35% 30%,#fff,#ffc94c 70%);transform:translateX(-50%) rotate(45deg);box-shadow:0 0 8px #ffe996}
.wheel-pointer.finale{transform-origin:50% 0%;animation:wheel-needle-tease .34s ease-in-out infinite alternate}
@keyframes wheel-needle-tease{0%{transform:rotate(-8deg)}48%{transform:rotate(7deg)}78%{transform:rotate(-4deg)}100%{transform:rotate(2deg)}}
.game-status.wheel-win-status{position:relative;display:grid;gap:3px;line-height:1.25;isolation:isolate;animation:wheel-win-sparkle 1.35s ease-out 1}
.game-status.wheel-win-status span{font-size:13px;letter-spacing:.1em;color:#e7c6ff}
.game-status.wheel-win-status strong{font-size:18px;color:#ffe48c;text-shadow:0 0 10px #edb64080}
.game-status.wheel-win-status::after{content:"";position:absolute;z-index:-1;inset:-12px 4%;background:radial-gradient(circle at 5% 62%,#fff 0 1px,transparent 2px),radial-gradient(circle at 14% 18%,#ffe58b 0 1.5px,transparent 2.5px),radial-gradient(circle at 23% 78%,#d9a6ff 0 1px,transparent 2px),radial-gradient(circle at 34% 30%,#85f4ff 0 1px,transparent 2px),radial-gradient(circle at 47% 8%,#fff 0 1px,transparent 2px),radial-gradient(circle at 57% 84%,#ffe58b 0 1.5px,transparent 2.5px),radial-gradient(circle at 69% 24%,#d9a6ff 0 1px,transparent 2px),radial-gradient(circle at 78% 70%,#85f4ff 0 1px,transparent 2px),radial-gradient(circle at 88% 16%,#ffe58b 0 1.5px,transparent 2.5px),radial-gradient(circle at 96% 56%,#fff 0 1px,transparent 2px);opacity:0;pointer-events:none;animation:wheel-win-particles 1.1s ease-out 1}
@keyframes wheel-win-sparkle{35%{color:#fff5cb;text-shadow:0 0 7px #ffe58b,0 0 18px #cf75ff}to{color:#f2d36b;text-shadow:none}}
@keyframes wheel-win-particles{25%{opacity:1;filter:drop-shadow(0 0 5px #fff)}to{opacity:0;transform:scale(1.15)}}
.wheel-wrap,.wheel-wrap *,.wheel-game #spinWheel{user-select:none;-webkit-user-drag:none}
.prize-wheel.spinning{animation:wheel-spin 6.2s linear forwards}
@keyframes wheel-spin{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.34,.02,.64,.35)}6%{transform:rotate(150deg);animation-timing-function:linear}62%{transform:rotate(calc(var(--wheel-end,3240deg) - 920deg));animation-timing-function:linear}68%{transform:rotate(calc(var(--wheel-end,3240deg) - 720deg));animation-timing-function:linear}82%{transform:rotate(calc(var(--wheel-end,3240deg) - 360deg));animation-timing-function:linear}92%{transform:rotate(calc(var(--wheel-end,3240deg) - 135deg));animation-timing-function:linear}97%{transform:rotate(calc(var(--wheel-end,3240deg) - 36deg));animation-timing-function:ease-out}100%{transform:rotate(var(--wheel-end,3240deg))}}
.game-main-button{max-width:360px;margin:auto}
.game-status{text-align:center;min-height:28px;color:#f2d36b;font-weight:900}
.hearts-room-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.hearts-room-head h2{font-size:22px;margin:0}
.hearts-status{font-size:14px;line-height:1.4;margin:8px 0 12px;overflow-wrap:anywhere}
#heartsError:empty,#heartsJoinError:empty{display:none}
.hearts-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:16px;align-items:start}
.hearts-play-area{min-width:0}
.hearts-table{position:relative;min-height:430px;border:8px solid #4b2a16;border-radius:30px;background:radial-gradient(circle,#27874a,#0f5b2e 72%);box-shadow:inset 0 0 35px #042f18}
.heart-seat{position:absolute;width:110px;max-width:28%;text-align:center;padding:6px;border-radius:14px;background:#17102aeb;border:1px solid #a58dbf;font-size:13px;line-height:1.2}
.heart-seat strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heart-seat small{display:block;margin-top:3px;font-size:12px;color:#ded4ec}
.heart-seat.you{border-color:#f2d36b;color:#fff2a6}
.heart-seat.active-player{outline:3px solid #a5ffc0;box-shadow:0 0 16px #a5ffc066}
.heart-seat.active-player small{color:#b7ffcf;font-weight:900}
.heart-seat.north,.heart-seat.south{left:50%;transform:translateX(-50%);width:190px;max-width:70%;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:6px;align-items:center;text-align:left}
.heart-seat.north{top:8px}.heart-seat.south{bottom:8px}
.heart-seat.north .heart-avatar,.heart-seat.south .heart-avatar{grid-row:1/3;margin:0}
.heart-seat.west{left:6px;top:50%;transform:translateY(-50%)}
.heart-seat.east{right:6px;top:50%;transform:translateY(-50%)}
.heart-avatar{width:44px;height:44px;display:grid;place-items:center;margin:0 auto 4px;border-radius:50%;background:linear-gradient(135deg,#7540ea,#be368c);overflow:hidden;font-size:22px}
.heart-avatar img{width:100%;height:100%;object-fit:cover}
.heart-trick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,84px);gap:4px}
.trick-play{position:relative;min-width:0;text-align:center}
.trick-play.north{grid-area:1/2}.trick-play.west{grid-area:2/1}.trick-play.east{grid-area:2/3}.trick-play.south{grid-area:3/2}
.trick-play small{display:none}
.playing-card{position:relative;display:inline-grid;place-items:center;flex:0 0 64px;width:64px;min-width:0;height:94px;padding:0;border:2px solid #ddd;border-radius:8px;background:#fff;color:#14121b;font-weight:900;box-shadow:0 3px 7px #0005}
.playing-card.red{color:#b41635}
.card-corner{position:absolute;left:4px;top:4px;display:grid;line-height:1;font-size:16px}
.card-corner small{display:block;font-size:14px}
.card-corner.bottom{left:auto;top:auto;right:4px;bottom:4px;transform:rotate(180deg)}
.card-suit{font-size:30px}
.trick-play .playing-card{width:100%;height:100%}
.trick-play.trick-moving{animation:trick-to-winner 1.05s ease-in forwards;z-index:4;--trick-dx:0px;--trick-dy:0px}
.trick-play.trick-moving.winner-north{--trick-dy:-150px}.trick-play.trick-moving.winner-south{--trick-dy:150px}.trick-play.trick-moving.winner-west{--trick-dx:-150px}.trick-play.trick-moving.winner-east{--trick-dx:150px}
@keyframes trick-to-winner{0%{opacity:1;transform:scale(1)}65%{opacity:1;transform:translate(calc(var(--trick-dx)*.65),calc(var(--trick-dy)*.65)) scale(.78)}100%{opacity:0;transform:translate(var(--trick-dx),var(--trick-dy)) scale(.25)}}
.hearts-trick-caption{font-size:13px;line-height:1.35;text-align:center;margin:8px 0 0;min-height:18px;overflow-wrap:anywhere}
.hearts-hand{display:flex;justify-content:flex-start;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;padding:18px 4px 10px;scroll-padding:4px;min-width:0;max-width:100%}
.hand-card{cursor:pointer;margin-left:-12px}
.hand-card:first-child{margin-left:0}
.hand-card:disabled{background:#dfdce4;cursor:not-allowed;color:#504b59}
.hand-card.red:disabled{color:#a1344a}
.hand-card.selected-pass{transform:translateY(-10px);border-color:#f2d36b;box-shadow:0 0 0 2px #f2d36b}
.hearts-pass-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px;padding:8px;border:1px solid #f2d36b;border-radius:12px;background:#2c2515;font-size:13px}
.hearts-side{padding:12px;border:1px solid #4f4263;border-radius:16px;background:#17102a;min-width:0}
.hearts-side h3{margin:0 0 8px;font-size:16px}
#heartsScores{display:grid;gap:8px;font-size:13px}
#heartsScores>div{display:grid;gap:3px;min-width:0}
#heartsScores strong{overflow-wrap:anywhere}
#heartsScores span{color:#ded4ec}
.hearts-chat-details{margin-top:8px;border-top:1px solid #4f4263}
.hearts-chat{height:210px;overflow:auto;padding:9px;border-radius:12px;background:#0d0918}
.hearts-chat p{margin:6px 0;font-size:14px;overflow-wrap:anywhere}
.hearts-chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:8px}
.hearts-chat-form .field{padding:10px}
.hearts-last-trick{font-size:13px}
.hearts-last-trick p{margin:6px 0;overflow-wrap:anywhere}
.hearts-restart{display:block;margin:14px auto 0}
.hearts-round-actions{display:grid;gap:8px;justify-items:center;margin-top:12px}.hearts-round-result{min-height:20px;margin:0;text-align:center;color:#f2d36b;font-weight:800}.hearts-ready{margin:0}
@media(hover:hover) and (min-width:768px){.hand-card:not(:disabled):hover{transform:translateY(-10px);z-index:3}}
@media(min-width:768px) and (max-width:850px){
  .hearts-layout{grid-template-columns:minmax(0,1fr);gap:10px}
  .hearts-table{min-height:380px;height:clamp(380px,45dvh,410px)}
  .heart-trick{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,72px);gap:3px}
  #heartsScores{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:768px) and (max-width:800px){
  .lobby-header{gap:10px;align-items:flex-start}
  .user-summary{width:100%;justify-content:flex-start;gap:6px}
  .user-summary>*{max-width:100%}
  .main-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:10px 0}
  .nav-item{padding:11px 5px;min-height:44px}
  .messages{height:clamp(200px,45dvh,480px)}
  .message-form{grid-template-columns:minmax(0,1fr) 52px}
  .message-form textarea{grid-column:1/-1}
  .message-form .emoji-toggle{grid-column:2;grid-row:2;min-height:44px}
  .message-form .attach-toggle{grid-column:1;grid-row:2;min-height:44px}
  .message-form .send-button{grid-column:1/-1;grid-row:3}
  .room-card{flex:0 0 185px;min-width:0}
  .chat-heading{flex-wrap:wrap;gap:8px}
  .chat-heading-actions{justify-items:start}
  .admin-section,.admin-hero{padding:16px}
  .admin-hero h1{font-size:clamp(30px,8vw,48px);overflow-wrap:anywhere}
  .admin-user-card{grid-template-columns:auto minmax(0,1fr)}
  .admin-room-card{flex-wrap:wrap}
  .admin-action,.admin-select{min-height:44px}
}
@media(max-width:767px){
  .user-summary{width:100%;justify-content:flex-start;gap:6px}

  .user-summary>*{max-width:100%}

  .admin-section,.admin-hero{padding:16px}

  .admin-hero h1{font-size:clamp(30px,8vw,48px);overflow-wrap:anywhere}

  .admin-user-card{grid-template-columns:auto minmax(0,1fr)}

  .admin-action,.admin-select{min-height:44px}
}

@media(max-width:520px){.wheel-game{padding:8px;border-radius:16px}





  .wheel-wrap{--wheel-label-radius:77px;width:min(100%,250px)}

  .feature-panel{padding:14px;min-height:0}

  .profile-panel{padding:16px}

  .coin-balance{flex-wrap:wrap;padding:14px}

  .admin-status{white-space:normal}

  .entrance-members{padding:14px}

  .entrance-member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}



@media(prefers-reduced-motion:reduce){.prize-wheel.spinning,.prize-wheel.spinning .wheel-prize-value{animation-duration:.01s}.wheel-wrap.spinning::before,.wheel-wrap.spinning::after,.wheel-pointer.finale,.prize-wheel.winner-highlight,.game-status.wheel-win-status,.game-status.wheel-win-status::after{animation:none}}
button,button *,[role="button"],[role="button"] *,summary,.avatar-picker,.floating-media-bar,.floating-media-bar *,.hearts-table,.hearts-table *{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
input,textarea,[contenteditable="true"],.chat-message p,.hearts-chat p{user-select:text;-webkit-user-select:text}
.room-card .room-count{display:block;color:#8ee3a7;font-size:12px;line-height:1.3;margin-top:7px}
.coin-transaction-online{border-left:3px solid #8ee3a7}
.profile-upload-note{margin:0 0 10px;color:#bca7ef;font-size:13px;line-height:1.4}
.community-badge{display:inline-flex;width:max-content;padding:2px 6px;border-radius:999px;border:1px solid #65527d;font-size:11px;font-weight:800;color:#e8d9ff;background:#24173a}.community-badge.community-bronze{border-color:#cd8b4a;color:#ffd8a6;background:#4a2c1b}.presence-status{font-size:11px;color:#8ee3a7}.presence-status.is-afk{color:#f2d36b}.chat-attachment-preview{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding:8px;border:1px solid #55456f;border-radius:12px;background:#0d0918}.chat-attachment-preview img{width:72px;height:54px;object-fit:cover;border-radius:7px}.chat-attachment-image{display:block;max-width:min(100%,420px);max-height:320px;margin-top:10px;border-radius:12px;border:1px solid #55456f;object-fit:contain;background:#0d0918}.attach-toggle{border:1px solid #55456f;background:#211838;color:#fff;border-radius:12px;padding:10px 12px;cursor:pointer}
.modal-open{overflow:hidden}



.compact-menu-toggle{display:none;border:1px solid #55456f;background:#211838;color:#fff;border-radius:11px;padding:8px 12px;font:inherit;font-weight:800;cursor:pointer}.room-toggle{display:none;border:1px solid #7654a9;background:#342155;color:#fff;border-radius:11px;padding:8px 11px;font:inherit;font-weight:800;cursor:pointer}.room-backdrop{display:none}
@media(min-width:768px) and (max-width:800px){
  .lobby-shell{padding-top:8px}
  .lobby-header{padding:9px 12px}
  .mini-brand>span:last-child{display:none}
  .compact-menu-toggle{display:block;width:100%;margin:7px 0 0;text-align:left}
  .main-nav{display:none;margin:6px 0 10px;padding:6px;background:#151027;border:1px solid #3e315d;border-radius:14px}
  .main-nav.compact-nav-open{display:grid}
  .main-nav .nav-item,.game-tabs .game-tab,.admin-nav .admin-tab{padding:10px 6px;font-size:14px;min-width:0;min-height:44px;overflow-wrap:anywhere}
  .chat-panel{min-width:0;padding:14px}
  .chat-heading{align-items:center}
  .chat-heading .eyebrow{display:none}
  .chat-heading h1{font-size:25px;margin:0}
  .chat-heading #welcome{display:none}
  .chat-heading-actions{display:flex;align-items:center;justify-items:initial;flex-wrap:wrap;gap:6px}
  .room-toggle{display:block}
  .room-panel{position:fixed;z-index:70;top:50%;left:8px;width:min(78vw,280px);height:min(70dvh,560px);max-height:calc(var(--app-height,100dvh) - 32px);display:none;overflow-y:auto;transform:translateY(-50%);box-shadow:18px 0 55px #0009}
  .room-panel.room-picker-open{display:block}
  .room-panel #roomList{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .room-card{min-width:0;margin-top:0;width:100%}
  .room-backdrop{position:fixed;z-index:65;inset:0;width:100%;height:100%;border:0;background:#05030bbf}
  .room-backdrop:not([hidden]){display:block}
  .room-picker-active{overflow:hidden}
  .messages{height:clamp(260px,50dvh,560px)}
}
@media(max-width:767px){.admin-nav .admin-tab{padding:10px 6px;font-size:14px;min-width:0;min-height:44px;overflow-wrap:anywhere}
}




@media(max-width:520px){.floating-media-player{right:8px;bottom:72px;width:calc(100vw - 16px)}
.floating-media-player.is-minimized{width:auto;min-width:180px}
}





/* Startseite: responsive Studio-Inszenierung */
.studio-hero{position:relative;text-align:center;padding:6px 0 8px}
.studio-hero .logo{margin:0 auto 24px}
.studio-hero h1{margin:24px 0 12px;font-size:clamp(52px,10vw,86px);letter-spacing:-2px}
.hero-tagline{margin:0;color:#d7cce8;font-size:clamp(16px,2.4vw,22px);letter-spacing:.4px}
.hero-tagline em{color:#ec9fd8;font-family:cursive;font-size:1.18em;font-weight:700;letter-spacing:0}
.hero-side{position:absolute;top:48%;margin:0;color:#8f819f;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.hero-side-left{left:-8px;transform:translateX(-100%) rotate(-5deg)}
.hero-side-right{right:-8px;transform:translateX(100%) rotate(5deg)}
.online-pulse{display:inline-grid;grid-template-columns:auto auto;gap:0 8px;align-items:center;margin-top:25px;padding:9px 15px;border:1px solid #4d3d6c;border-radius:999px;background:#151027;color:#d6f5e1}
.online-pulse span{grid-row:1/3;width:9px;height:9px;border-radius:50%;background:#76e49b;box-shadow:0 0 12px #76e49b}
.online-pulse strong{font-size:13px}.online-pulse small{color:#9d91ac;font-size:11px;text-align:left}
.home-features{margin:26px auto 0}.home-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.home-feature{padding:14px 8px;border:1px solid #3e315d;border-radius:15px;background:#151027;text-align:center}.home-feature strong{display:block;font-size:18px;color:#fff}.home-feature span{display:block;margin-top:5px;color:#9e91aa;font-size:11px;line-height:1.3}
.home-feature.is-active{box-shadow:inset 0 -2px 0 #8c4ff0}
.home-signals{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:36px 0 18px;padding:16px 0;border-top:1px solid #332746;border-bottom:1px solid #332746;text-align:center;text-transform:uppercase;letter-spacing:2px;font-size:11px;color:#b3a5c2}
.signal-script{font-family:cursive;font-size:20px;letter-spacing:1px;color:#ef9fdb;text-shadow:0 0 12px #d553be88;transform:rotate(-3deg)}.signal-word:last-child{transform:rotate(3deg)}
.home-services{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 14px;margin:0 auto 28px;color:#8e809e;font-size:11px;letter-spacing:1px;text-transform:uppercase}.home-services span{padding:4px 0}.home-services .service-live{color:#d8c7e9}.home-services .service-live::before{content:"â—†";margin-right:5px;color:#8e4ded;font-size:8px}
.studio-footer{position:relative}.studio-footer-mark{position:absolute;right:0;bottom:1px;display:grid;gap:2px;text-align:right;color:#9d8dad;text-transform:uppercase;letter-spacing:1.2px;font-size:9px}.studio-footer-mark strong{font-size:15px;color:#d6bddf;letter-spacing:2px}
@media(max-width:1100px){.hero-side{position:static;display:inline-block;margin:20px 8px 0;font-size:10px;transform:none}.hero-side-right{transform:none}.home-signals{margin-top:30px}}
@media(max-width:600px){.page{width:min(94%,760px);padding-top:24px}
.studio-hero .logo{margin-bottom:18px}
.studio-hero h1{font-size:clamp(44px,15vw,68px);letter-spacing:-1px}
.hero-tagline{font-size:15px;line-height:1.5}
.hero-side{margin-top:17px}
.online-pulse{margin-top:20px}
.home-features{margin-top:22px}
.home-feature-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.home-feature{padding:11px 6px}
.home-feature strong{font-size:16px}
.home-signals{grid-template-columns:1fr;gap:8px;margin:28px 0 15px;padding:14px 0}
.signal-script{font-size:19px}
.home-services{gap:6px 12px;margin-bottom:22px;font-size:10px}
.studio-footer-mark{position:static;margin-top:18px;text-align:center}
.studio-footer-mark strong{font-size:14px}
}

@media(prefers-reduced-motion:reduce){.signal-script{transform:none}.online-pulse span{box-shadow:none}}

/* Landing page scene: built from CSS layers so the page remains responsive and interactive. */
.landing-page{position:relative;isolation:isolate;overflow-x:hidden;background:#05030d;color:#f8f4ff}
.landing-page::before{content:"";position:fixed;z-index:-3;inset:0;background:radial-gradient(ellipse at 50% 54%,#5c1bb466 0,transparent 34%),radial-gradient(ellipse at 20% 62%,#7c2be955 0,transparent 25%),radial-gradient(ellipse at 82% 45%,#4313a844 0,transparent 30%),linear-gradient(180deg,#03020b 0,#09031a 47%,#16062a 72%,#03020a 100%)}
.landing-page::after{content:"";position:fixed;z-index:-2;inset:0;opacity:.75;background-image:radial-gradient(circle at 12% 16%,#fff 0 1px,transparent 1.7px),radial-gradient(circle at 29% 10%,#b782ff 0 1px,transparent 1.8px),radial-gradient(circle at 47% 18%,#fff 0 1px,transparent 1.7px),radial-gradient(circle at 70% 12%,#cf9cff 0 1px,transparent 1.7px),radial-gradient(circle at 88% 23%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 18% 40%,#c99bff 0 1px,transparent 1.7px),radial-gradient(circle at 76% 39%,#fff 0 1px,transparent 1.7px);background-size:230px 180px,310px 230px,410px 290px,260px 210px,350px 280px,390px 320px,280px 260px}
.landing-page .page{position:relative;width:min(92%,1200px);min-height:100vh;padding:26px 0 34px;z-index:1}
.landing-sky{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
.landing-planet{position:absolute;right:-8%;top:1%;width:260px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#e9b4ff 0 2%,transparent 3%),radial-gradient(circle at 37% 33%,#9b3cff 0 18%,#5714b8 42%,#1f073f 73%,transparent 74%);box-shadow:-18px 8px 45px #9c2bff99, inset 18px -12px 35px #07020eaa}
.landing-mountains{position:absolute;left:-5%;right:-5%;bottom:24%;height:170px;background:linear-gradient(145deg,transparent 0 15%,#100720 15% 25%,transparent 25% 32%,#0a0617 32% 47%,transparent 47% 55%,#120823 55% 67%,transparent 67%),linear-gradient(180deg,transparent 0 55%,#05030e 56%);clip-path:polygon(0 58%,8% 40%,17% 54%,26% 28%,34% 52%,45% 22%,55% 51%,64% 32%,72% 54%,82% 24%,91% 48%,100% 31%,100% 100%,0 100%);opacity:.95}
.landing-water{position:absolute;left:-5%;right:-5%;bottom:0;height:28%;background:repeating-linear-gradient(180deg,transparent 0 10px,#9f3cff33 11px 12px,transparent 13px 23px),linear-gradient(180deg,#15072b99,#03020a 82%);opacity:.9}
.landing-palms{position:absolute;bottom:16%;width:180px;height:300px;opacity:.9;background:radial-gradient(ellipse at 50% 20%,#010107 0 19%,transparent 20%),linear-gradient(80deg,transparent 46%,#010107 47% 52%,transparent 53%);filter:drop-shadow(0 0 10px #07010d)}
.landing-palms::before,.landing-palms::after{content:"";position:absolute;left:10%;top:8%;width:90%;height:70%;background:conic-gradient(from 180deg at 50% 25%,transparent 0 8%,#010107 9% 14%,transparent 15% 24%,#010107 25% 30%,transparent 31% 44%,#010107 45% 50%,transparent 51% 65%,#010107 66% 71%,transparent 72% 84%,#010107 85% 90%,transparent 91%);transform:rotate(-8deg)}
.landing-palms::after{transform:rotate(18deg) scale(.8);left:42%;top:22%}.landing-palms-left{left:-5%}.landing-palms-right{right:-5%;transform:scaleX(-1)}
.studio-hero{padding-top:0}.studio-hero .logo{box-shadow:0 0 35px #d02aff88}.studio-hero h1{font-size:clamp(62px,10vw,132px);line-height:.82;text-shadow:0 0 5px #fff,0 0 18px #873bff,0 0 38px #c63eff}.studio-hero h1 .outline{font-family:cursive;font-style:italic;color:#ecdcff;-webkit-text-stroke:1px #9c59ff;text-shadow:0 0 10px #7e4cff,0 0 30px #df32ff}
.hero-tagline{font-size:clamp(17px,2vw,25px)}.hero-tagline em{text-shadow:0 0 12px #ff49db}.hero-side{font-family:cursive;color:#f06be2;text-shadow:0 0 12px #d82bff;font-size:clamp(15px,2vw,24px);letter-spacing:0;text-transform:none}.hero-side-left{left:2%;top:16%;max-width:140px;white-space:normal;transform:rotate(-5deg)}.hero-side-right{right:2%;top:47%;max-width:170px;white-space:normal;transform:rotate(5deg)}
.hero-side::after{content:"♡";display:block;margin-top:4px;color:#ef39e8;font-family:cursive;font-size:1.45em;line-height:.8;text-align:center;text-shadow:0 0 12px #ef39e8}
.online-pulse{margin-top:220px;border-color:#8053b5;background:#080414cc}.online-pulse::before{content:"♥";position:absolute;top:-35px;left:50%;transform:translateX(-50%);color:#ff20d9;font-size:24px;text-shadow:0 0 16px #f0f}.online-pulse{position:relative}
.home-features{margin:22px auto 0;max-width:760px}.home-feature-grid{gap:28px}.home-feature{border:0;border-radius:0;background:transparent;box-shadow:none!important;color:#fff;padding:4px 8px}.home-feature i{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 8px;border:1px solid #d24aff;border-radius:50%;background:#11071f;box-shadow:0 0 20px #d22fff99;color:#e7b6ff;font-style:normal;font-size:25px}.home-feature strong{font-size:16px;text-transform:uppercase}.home-feature span{font-size:14px;color:#eee5fa}.home-feature:hover i,.home-feature:focus-visible i{background:#321257;box-shadow:0 0 28px #ef30ff}
.actions{max-width:460px;margin:28px auto 0}.actions .btn{box-shadow:0 0 24px #c03bff88}.home-signals{max-width:760px;margin:150px auto 18px;border-color:#a43bea}.signal-script{font-size:25px}.home-services{max-width:950px;margin-bottom:26px}.home-services a{display:inline-flex;align-items:center;gap:6px;padding:12px 16px;border:1px solid #a23dff;border-radius:13px;color:#eee6ff;text-decoration:none;background:#0e061dcc}.home-services a:hover,.home-services a:focus-visible{background:#321257;box-shadow:0 0 18px #c734ff99}.studio-footer{max-width:1000px;margin:0 auto;padding-top:18px;border-top-color:#5f2a82}.studio-platforms{display:none}.studio-footer-mark{right:0;bottom:0;color:#f16ce2}.studio-footer-mark strong{font-family:cursive;font-size:25px;color:#f16ce2;text-shadow:0 0 12px #f0f;letter-spacing:0}
	.home-services .service-media{font-weight:700}.home-services .service-media span{font-size:1.15em;font-weight:900;line-height:1}.home-services .service-youtube{border-color:#ff3b4f;color:#fff0f2}.home-services .service-youtube span{color:#ff3048;text-shadow:0 0 8px #ff304888}.home-services .service-spotify{border-color:#35d879;color:#effff4}.home-services .service-spotify span{color:#35d879;text-shadow:0 0 8px #35d87988}.home-services .service-vimeo{border-color:#27c8e8;color:#ecfcff}.home-services .service-vimeo span{color:#27c8e8;text-shadow:0 0 8px #27c8e888}.home-services .service-media:hover,.home-services .service-media:focus-visible{box-shadow:0 0 18px currentColor}
	@media(max-width:1100px){.hero-side{position:static;display:inline-block;margin:20px 8px 0;transform:none;max-width:none}.online-pulse{margin-top:30px}.home-signals{margin-top:50px}}
@media(max-width:600px){.landing-page .page{width:min(94%,760px);padding-top:20px}
.landing-planet{width:150px;right:-18%;top:2%}
.landing-palms{transform:scale(.65);bottom:17%}
.landing-palms-right{transform:scale(-.65,.65)}
.landing-mountains{bottom:25%;height:100px}
.landing-water{height:24%}
.studio-hero h1{font-size:clamp(50px,16vw,82px)}
.studio-hero .logo{margin-bottom:16px}
.hero-side{font-size:15px}
.home-feature-grid{gap:8px}
.home-feature i{width:56px;height:56px;font-size:19px}
.home-feature strong{font-size:14px}
.home-feature span{font-size:11px}
.actions{margin-top:22px}
.home-signals{margin-top:65px}
.home-services a{padding:9px 10px;font-size:10px}
.studio-footer{padding-bottom:4px}
.studio-footer-mark{position:static;margin-top:18px;text-align:center}
.studio-footer-mark strong{font-size:22px}
}


/* Desktop proportions follow the wide cinematic composition of the reference. */
@media(min-width:1101px){
  .landing-page .page{width:min(96vw,1500px);padding-top:22px}
  .landing-sky{overflow:visible}
  .landing-planet{right:1%;top:0;width:min(340px,25vw)}
  .landing-palms{width:260px;height:390px;bottom:14%}
  .landing-palms-left{left:-1%}.landing-palms-right{right:-1%}
  .landing-mountains{left:0;right:0;bottom:24%;height:220px}
  .landing-water{left:0;right:0;height:31%;bottom:0}
  .landing-water{background:radial-gradient(ellipse at 50% 12%,#b34cff55 0,transparent 42%),repeating-linear-gradient(180deg,transparent 0 9px,#c55cff44 10px 11px,transparent 12px 24px),linear-gradient(180deg,#32105d99,#05020e 82%);opacity:.96}
  .landing-water::before{content:"";position:absolute;left:0;right:0;top:0;height:32%;background:radial-gradient(ellipse at 50% 0,#f48bff99 0,transparent 52%),linear-gradient(180deg,#8e35d755,transparent);opacity:.75}
  .landing-water::after{content:"";position:absolute;left:8%;right:8%;top:12%;height:3px;background:linear-gradient(90deg,transparent,#f06cff99 22%,#ffe0ffcc 50%,#f06cff99 78%,transparent);box-shadow:0 18px 22px #a53cff66,0 42px 28px #a53cff44;opacity:.7}
  .online-pulse{margin-top:40px}
  .studio-hero h1{font-size:clamp(86px,10vw,150px)}
  .studio-hero h1::after{content:"♡";display:inline-block;margin-left:18px;color:#fa67ed;font-family:Arial,sans-serif;font-size:.34em;vertical-align:middle;text-shadow:0 0 15px #ff22ef}
  .hero-tagline::after{content:"";display:block;width:180px;margin:6px auto 0;border-bottom:3px solid #d438ef;border-radius:50%;transform:rotate(-3deg);box-shadow:0 0 13px #e63bff}
  .home-features{max-width:1080px;margin-top:28px}.home-feature-grid{gap:72px}.home-feature i{width:76px;height:76px}
  .actions{max-width:540px;margin-top:34px}.home-signals{max-width:1080px;margin-top:112px;padding:19px 0}.home-services{max-width:1260px;gap:10px 12px;margin-bottom:30px}.home-services a{padding:13px 20px;font-size:13px}
  .home-signals{margin-top:52px}
  .studio-footer{max-width:1320px;min-height:108px}.studio-footer-mark{right:2%}
}

/* Official provider assets and restrained studio credit. */
.home-services .brand-logo{width:20px;height:20px;display:block;object-fit:contain;flex:0 0 auto}.home-services .brand-logo-frame{display:block;width:20px;height:18px;overflow:hidden;flex:0 0 auto}.home-services .brand-youtube-frame img{display:block;height:18px;width:auto;max-width:none}.home-services .service-youtube{border-color:#ff3b4f}.home-services .service-spotify{border-color:#35d879}.home-services .service-vimeo{border-color:#27c8e8}.studio-embed-credit{margin:12px 0 0;color:#887b9d;font-size:8px;line-height:1.4;letter-spacing:1.5px;text-align:center;text-transform:uppercase;overflow-wrap:anywhere}
.studio-hero .eyebrow{font-size:clamp(10px,1.3vw,15px);letter-spacing:.28em}.home-feature .status-badge{display:block;margin-top:6px;color:#9f8db4;font-size:8px;letter-spacing:1.5px;line-height:1.2;text-transform:uppercase}.studio-original::after{content:"THE EXPERIENCE CONTINUES";display:block;margin-top:7px;color:#c2a7d5;font-size:10px;letter-spacing:2px}
.coming-soon{margin:12px auto 0;color:#d7a4dc;font-size:10px;letter-spacing:3px;text-align:center;text-transform:uppercase;text-shadow:0 0 10px #e85cff66}
.online-pulse{display:grid;width:max-content;margin-left:auto;margin-right:auto}
@media(max-width:600px){.home-services .brand-logo{width:17px;height:17px}
.home-services .brand-logo-frame{width:17px;height:16px}
.home-services .brand-youtube-frame img{height:16px}
}


.media-toggle{border:1px solid #9970c7;background:#342155;color:#fff;border-radius:12px;padding:10px;font:inherit;font-weight:700;cursor:pointer;min-height:44px;white-space:nowrap}
.chat-media-box{width:min(100%,560px);line-height:1.5}
.chat-media-box h2{margin-top:0}.chat-media-box p{overflow-wrap:anywhere}
#chatMediaForm{display:grid;gap:10px}#chatMediaForm label{margin:0}
#chatMediaPreview{margin-bottom:14px}#chatMediaPreview .youtube-preview{max-width:100%}
.chat-smiley{display:inline-block;width:32px;height:32px;max-width:36px;max-height:36px;object-fit:contain;vertical-align:text-bottom;margin:0 1px}.chat-smiley-animated{width:48px;height:48px;max-width:60px;max-height:60px;vertical-align:middle}.emoji-picker{z-index:25;display:flex;flex-direction:column;gap:7px;width:min(440px,calc(100vw - 24px));height:min(340px,42vh);min-height:180px;padding:9px;border:1px solid #62437d;border-radius:14px;background:#130d20;box-shadow:0 12px 36px #0009;overflow:hidden}.emoji-picker[hidden]{display:none!important}.message-form{position:relative}.emoji-categories{display:flex;flex:none;gap:5px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:1px 0 5px}.emoji-category{flex:none;min-height:38px;padding:6px 9px;border:1px solid #443257;border-radius:10px;background:#1b132d;color:#d8cbe9;font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}.emoji-category.active{border-color:#c45ced;background:#38224d;color:#fff;box-shadow:0 0 12px #a343d455}.emoji-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-content:start;gap:5px;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.emoji-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:66px;padding:4px;border:1px solid #30243e;border-radius:10px;background:#1a1228;color:#ddd2eb;cursor:pointer}.emoji-option:hover,.emoji-option:focus-visible{border-color:#db73ff;background:#30203f;outline:none;box-shadow:0 0 12px #bd49ef55}.emoji-option img{display:block;width:44px;height:44px;max-width:100%;object-fit:contain}.emoji-option span{max-width:100%;font-size:10px;line-height:1.1;text-align:center;overflow-wrap:anywhere}.emoji-option-animated img{width:48px;height:48px}.emoji-option[hidden]{display:none!important}.emoji-attribution{flex:none;align-self:flex-end;color:#bba4cf;font-size:10px;text-decoration:none}.emoji-attribution:hover{text-decoration:underline}
.emoji-picker-head{display:flex;flex:none;align-items:center;gap:7px;min-width:0}.emoji-picker-head>strong{color:#f6eaff;font-size:13px;white-space:nowrap}.emoji-picker-head input{flex:1;min-width:0;height:36px;padding:6px 10px;border:1px solid #49365f;border-radius:9px;background:#0d0918;color:#fff;font:inherit;font-size:16px}.emoji-close{flex:none;width:38px;height:38px;border:1px solid #654987;border-radius:10px;background:#261837;color:#fff;font-size:23px;line-height:1;cursor:pointer}.emoji-close:hover,.emoji-close:focus-visible{border-color:#e574ff;background:#442451;outline:2px solid #d45eff66}.emoji-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;min-width:0;min-height:68px;gap:2px}.emoji-grid .emoji-option{width:100%;height:100%}.emoji-favorite{width:34px;height:38px;border:1px solid #443257;border-radius:9px;background:#211633;color:#bba4cf;font-size:20px;cursor:pointer}.emoji-favorite.is-favorite{color:#ffd76a;border-color:#8d6d36}.emoji-favorite:focus-visible{outline:2px solid #d45eff}.emoji-empty{flex:none;margin:0;color:#c2b3d2;font-size:12px;text-align:center}.emoji-grid[hidden],.emoji-empty[hidden]{display:none!important}
@media(min-width:768px){.message-form .emoji-picker{position:absolute;right:0;bottom:calc(100% + 8px);width:min(440px,calc(100vw - 24px));height:min(340px,42vh);max-height:340px;overflow:hidden;grid-column:auto;grid-row:auto;box-shadow:0 12px 36px #0009}}
@media(min-width:801px){.message-form{grid-template-columns:minmax(0,1fr) auto 48px auto auto}.message-form textarea{grid-column:1}.message-form .media-toggle{grid-column:2}.message-form .emoji-toggle{grid-column:3}.message-form .attach-toggle{grid-column:4}.message-form .send-button{grid-column:5}}
@media(min-width:768px) and (max-width:800px){
  .message-form{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 78px;gap:6px}
  .message-form textarea{grid-column:1/-1;grid-row:1}
  .message-form .media-toggle{grid-column:1;grid-row:2;padding:7px 4px;font-size:13px}
  .message-form .emoji-toggle{grid-column:2;grid-row:2;width:44px}
  .message-form .attach-toggle{grid-column:3;grid-row:2;min-width:0;padding:7px 4px;font-size:13px}
  .message-form .send-button{grid-column:4;grid-row:2;width:78px}
  .chat-media-box{padding:18px;border-radius:20px}.chat-media-box .btn{font-size:17px;padding:14px}
}
@media(max-width:767px){
  .chat-media-box{padding:18px;border-radius:20px}
.chat-media-box .btn{font-size:17px;padding:14px}
}

.forum-panel{display:grid;gap:16px;margin:24px 0}.forum-toolbar{display:grid;grid-template-columns:minmax(130px,1fr) minmax(150px,1.5fr) minmax(120px,1fr) minmax(140px,1fr) auto;align-items:end;gap:10px;padding:16px;border:1px solid #4c3472;border-radius:16px;background:#1b1430}.forum-toolbar label{font-size:12px;color:#cbb9e8}.forum-topic-list,.forum-detail{display:grid;gap:10px}.forum-topic-card,.forum-post-card{padding:16px;border:1px solid #3e315d;border-radius:16px;background:#211838}.forum-topic-title{padding:0;border:0;background:none;color:#f2dfff;text-align:left;font:inherit;font-weight:700;font-size:18px;cursor:pointer}.forum-topic-title:hover{text-decoration:underline}.forum-editor{display:grid;gap:10px;padding:18px;border:1px solid #7654a9;border-radius:16px;background:#211838}.forum-editor form{display:grid;gap:9px}.forum-content{line-height:1.55;overflow-wrap:anywhere}.forum-content a{color:#e7b4ff;text-decoration:underline}.forum-votes{display:flex;gap:8px;flex-wrap:wrap}.forum-post-card{margin-left:20px}.forum-post-card+.forum-post-card{margin-top:0}@media(max-width:700px){.forum-toolbar{grid-template-columns:1fr}
.forum-post-card{margin-left:0}
}


/* Confirmed reference PNG composition */
.reference-landing{background:#05030d;color:#f8f4ff;overflow-x:hidden}.reference-page{width:min(100%,1536px);padding:0 0 34px;margin:0 auto}.reference-stage{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#05030d}.reference-art{display:block;width:100%;height:100%;object-fit:contain;object-position:center top}.reference-cover{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(4,2,15,.86);color:#f0e7ff;letter-spacing:.28em;text-transform:uppercase;pointer-events:none}.reference-presentation{top:11.3%;left:34%;width:32%;height:4%;margin:0;font-size:clamp(8px,1.1vw,16px);font-weight:700}.reference-online{top:71.7%;left:38%;width:25%;height:5%;gap:9px;border-radius:999px;font-size:clamp(11px,1.4vw,20px);letter-spacing:0;text-transform:none}.reference-online .online-dot{width:10px;height:10px;border-radius:50%;background:#00e58a;box-shadow:0 0 12px #00e58a}.reference-controls{padding:28px clamp(14px,5vw,80px) 0;background:linear-gradient(#070313,#120522)}.reference-controls .studio-hero{padding:0}.reference-controls .hero-tagline{margin:0 auto 20px;text-align:center;color:#dfd0ec}.reference-controls .actions{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;max-width:none;margin:0}.reference-controls .actions .btn{min-width:220px;text-align:center}.reference-controls .online-pulse{margin:26px auto 20px}.reference-controls .home-features{max-width:960px;margin:22px auto}.reference-controls .home-feature-grid{gap:12px}.reference-controls .home-feature{background:#160927;border:1px solid #a23dff;border-radius:14px;padding:14px 8px}.reference-controls .home-feature i{width:54px;height:54px;font-size:18px}.reference-controls .home-services{max-width:1100px;margin:24px auto;justify-content:center}.reference-controls .studio-footer{max-width:1100px;margin:26px auto 0}.reference-landing .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.reference-online strong{font-weight:700}.reference-online small{font-size:.75em;color:#cfbfe0}
/* Reference text covers: remove the two embedded dynamic/text variants cleanly. */
.reference-page{position:relative}
.reference-picture{display:contents}
.mobile-portrait,.mobile-lower-art{display:none}
.reference-controls{padding:0;background:transparent}
.reference-controls{position:absolute;z-index:3;inset:0;height:100%;pointer-events:none}
.reference-controls .studio-hero,
.reference-controls .home-features,
.reference-controls .home-services,
.reference-controls .studio-footer{display:none}
.reference-controls .actions{position:absolute;z-index:4;left:50%;bottom:2.5%;transform:translateX(-50%);width:min(92%,520px);margin:0;display:flex;gap:10px;justify-content:center}
.reference-controls .actions>*{pointer-events:auto}
.reference-controls .actions .btn,.reference-controls .actions .linkbtn{min-width:0;flex:1;padding:11px 14px;font-size:clamp(13px,1.4vw,18px);background:rgba(20,7,38,.88);border:1px solid #c34cff;border-radius:12px;white-space:nowrap}
.reference-controls .actions .linkbtn{color:#fff;text-decoration:none}
.reference-stage .reference-actions{position:absolute;z-index:4;left:50%;top:45%;transform:translateX(-50%);width:100%;min-height:150px;box-sizing:border-box;padding:2px 13%;display:flex;flex-direction:column;gap:4px;justify-content:center;background:transparent}
.reference-stage .reference-actions>*{pointer-events:auto;min-width:0;padding:11px 14px;font-size:clamp(13px,1.4vw,18px);color:transparent;background:transparent;border:0;border-radius:12px;white-space:nowrap;box-shadow:none}



@media(max-width:600px){
  .modal{padding:env(safe-area-inset-top,10px) 10px env(safe-area-inset-bottom,10px);align-items:flex-start;overflow:hidden}

  .modalbox{max-height:calc(var(--app-height,100dvh) - 20px);overflow-y:auto;overscroll-behavior:contain;margin:auto 0}

  .chat-media-box{width:min(100%,560px);max-width:100%;box-sizing:border-box}
}


.gender-male{color:#82b9ff}.gender-female{color:#ff9dcc}.gender-unspecified{color:#f2eaff}
.gender-avatar{border:2px solid #bba7d5;box-shadow:0 0 9px #bba7d566}.gender-avatar.gender-male{border-color:#62b9ff;box-shadow:0 0 10px #3fa9ff99}.gender-avatar.gender-female{border-color:#ff72c9;box-shadow:0 0 10px #ff4db099}.gender-avatar.gender-unspecified{border-color:#bba7d5;box-shadow:0 0 9px #bba7d566}
.gender-badge{display:inline-grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;font-size:13px;font-weight:900;line-height:1;background:#160c29}.gender-badge-male{color:#62b9ff;box-shadow:0 0 8px #3fa9ff88}.gender-badge-female{color:#ff72c9;box-shadow:0 0 8px #ff4db088}.gender-badge-unspecified{color:#bba7d5;box-shadow:0 0 7px #bba7d566}
.reference-hotspots{position:absolute;inset:0;z-index:2;pointer-events:none}.reference-hotspot{position:absolute;display:block;pointer-events:auto;border:0;border-radius:50%;background:transparent}.reference-hotspot:focus-visible{outline:3px solid #fff;outline-offset:4px;background:#d45eff33}.hotspot-chat{left:24%;top:32%;width:14%;height:14%}.hotspot-games{left:38%;top:32%;width:14%;height:14%}.hotspot-friends{left:53%;top:32%;width:14%;height:14%}.hotspot-quiz{left:68%;top:32%;width:14%;height:14%}.reference-mobile-menu{display:none}


.reference-presentation{top:9.5%;left:27%;width:46%;height:9%;background:#05030f;color:#f0e7ff;font-size:clamp(9px,1.2vw,17px);letter-spacing:.2em;line-height:1.25}.reference-online{top:70.5%;left:35%;width:30%;height:8%;background:#05030f}

.reference-presentation{top:11.1%;height:4.5%}

/* Dynamic online count replaces only the embedded sample line. */
.reference-live-online{position:absolute;z-index:3;top:71.5%;left:35%;width:30%;height:6%;display:flex;align-items:center;justify-content:center;gap:9px;color:#f0e7ff;font-size:clamp(11px,1.4vw,20px);line-height:1;pointer-events:none;text-shadow:0 1px 4px #05030d;background:linear-gradient(180deg,transparent 0%,rgba(9,4,25,.78) 28%,rgba(9,4,25,.78) 72%,transparent 100%)}
.reference-live-online .online-dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:#00e58a;box-shadow:0 0 12px #00e58a}
.reference-live-online strong{font-weight:700;letter-spacing:0}

/* Narrow regression fix: keep the complete reference below the browser edge. */
.reference-page{padding-top:22px}
.reference-hotspot:hover{background:rgba(212,94,255,.16);box-shadow:0 0 28px rgba(239,48,255,.7),inset 0 0 18px rgba(212,94,255,.25)}
.reference-stage .reference-actions .btn:hover,.reference-stage .reference-actions .linkbtn:hover{background:rgba(212,94,255,.18);box-shadow:0 0 24px rgba(239,48,255,.7)}
.reference-mobile-menu a:hover,.reference-mobile-menu a:focus-visible{background:#321257;box-shadow:0 0 18px #c734ff99}

/* Unified hover feedback for existing clickable lobby surfaces. */
.nav-item:hover:not(.active),
.room-card:hover:not(.active),
.online-user-card:hover,
.friend-card:hover,
.friend-action:hover,
.game-tab:hover:not(.active),
.fish-card:not(:disabled):hover,
.quiz-answer:not(:disabled):hover,
.coin-button:hover,
.account-profile:hover,
.account-metric:hover,
.small-button:hover,
.media-toggle:hover,
.emoji-toggle:hover,
.attach-toggle:hover,
.game-main-button:hover,
.admin-tab:hover:not(.active),
.admin-action:hover,
.rules-open-button:hover,
.youtube-preview-open:hover {
  border-color:#d45eff;
  box-shadow:0 0 0 2px #d45eff55,0 0 18px #c734ff99;
}
.nav-item:hover:not(.active),
.room-card:hover:not(.active),
.friend-card:hover,
.friend-action:hover,
.game-tab:hover:not(.active),
.coin-button:hover,
.account-profile:hover,
.account-metric:hover,
.small-button:hover,
.media-toggle:hover,
.emoji-toggle:hover,
.attach-toggle:hover,
.game-main-button:hover,
.admin-tab:hover:not(.active),
.admin-action:hover,
.rules-open-button:hover,
.youtube-preview-open:hover {
  background:#342155;
}

/* Enabled send control uses the same hover feedback when it is actionable. */
.send-button:not(:disabled):hover {
  border-color:#d45eff;
  background:#342155;
  box-shadow:0 0 0 2px #d45eff55,0 0 18px #c734ff99;
}

/* Compact Europe/Berlin lobby clock on phones only. */
.lobby-clock{display:none}















#roomClose{display:none}

/* Smartphone layout: one height owner, in-flow picker and independent drawers.
   All original rules at 768px and above remain in their original cascade. */
@media(max-width:767px){
  .reference-landing{min-height:100svh;overflow-x:hidden;overflow-y:auto;background:#05030d}
  .reference-landing .reference-page{width:100%;height:auto;min-height:0;margin:0;padding:0}
  .reference-stage{position:relative;isolation:isolate;display:block;width:100%;height:auto;min-height:0;aspect-ratio:auto;overflow:hidden;padding:0;box-sizing:border-box;background:#05030d}
  .reference-picture{position:relative;inset:auto;display:block;width:100%;height:auto;line-height:0}
  .reference-art{display:block;width:100%;height:auto;object-fit:initial;object-position:center center}
  .mobile-portrait,.mobile-lower-art{display:none!important}
  .mobile-palms{display:none}
  .mobile-portrait>*:not(.mobile-palms){position:relative;z-index:1}
  .mobile-cosmos{position:absolute;inset:0 0 auto;height:58px;pointer-events:none}
  .mobile-portrait>.mobile-cosmos{position:absolute;z-index:0}
  .mobile-brand-mark{position:relative;display:grid;place-items:center;width:clamp(58px,17vw,72px);height:clamp(58px,17vw,72px);box-sizing:border-box;margin:7px auto 3px;border:1px solid #ff80ff;border-radius:28%;background:linear-gradient(145deg,#3048ff 0%,#8338ff 42%,#ed25d1 78%,#ff5fc9 100%);box-shadow:0 0 16px #9b31ff,0 0 34px #dd27f866;color:#fff;font-size:clamp(38px,11vw,48px);font-weight:900;text-shadow:0 2px 5px #3f1b85}
  .mobile-brand-mark::after{content:"";position:absolute;inset:-9px -17px;border:2px solid #ed63ffb8;border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 10px #dd27f866;pointer-events:none}
  .mobile-planet{display:none}
  .mobile-presentation{margin:0;color:#ded1f2;font-size:10px;font-weight:600;letter-spacing:.2em;line-height:1.4}
  .mobile-presentation span{display:block;color:#b996d7;font-size:9px;letter-spacing:.32em}
  .mobile-brand-title{margin:4px 0 0;color:#f4edff;font-size:clamp(40px,12.8vw,58px);font-weight:900;letter-spacing:.025em;line-height:.96;text-shadow:0 0 3px #fff,0 0 12px #7e42ff,0 0 24px #8f42ff99}
  .mobile-chat-title{margin:0;color:#eea4ff;font-size:clamp(23px,7vw,30px);font-style:italic;font-weight:500;letter-spacing:.2em;line-height:1.18;text-shadow:0 0 12px #b832ff}
  .mobile-chat-title span{color:#ed57ff;letter-spacing:0}
  .mobile-tagline{margin:5px 0 15px;color:#d9cde8;font-size:clamp(12px,3.6vw,15px);line-height:1.35}
  .mobile-feature-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(5px,2.2vw,12px);width:100%;margin:0 auto}
  .mobile-feature{display:flex;min-width:0;flex-direction:column;align-items:center;gap:4px;color:#f5eaff;text-align:center}
  .mobile-feature svg{display:block;width:50px;height:50px;box-sizing:border-box;padding:9px;border:1px solid #9d47db;border-radius:50%;background:radial-gradient(circle,#371858,#120921 72%);fill:none;stroke:#ecbaff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px #ad42ff99)}
  .mobile-feature:nth-child(1) svg{border-color:#ef42ff;stroke:#ffc1ff;filter:drop-shadow(0 0 8px #eb2dff)}
  .mobile-feature:nth-child(2) svg{border-color:#358aff;stroke:#aad8ff;filter:drop-shadow(0 0 8px #287dff)}
  .mobile-feature:nth-child(3) svg{border-color:#db35ff;stroke:#f4baff;filter:drop-shadow(0 0 8px #d126ff)}
  .mobile-feature:nth-child(4) svg{border-color:#ffa72d;stroke:#ffd580;filter:drop-shadow(0 0 8px #ffae24)}
  .mobile-feature b{font-size:clamp(9px,2.8vw,11px);font-weight:700;letter-spacing:.1em}
  .mobile-feature small{max-width:92px;color:#c9b8dc;font-size:clamp(8px,2.35vw,10px);line-height:1.2}
  .reference-stage .reference-actions{position:absolute;z-index:4;left:50%;top:38.65%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:stretch;gap:0;width:44%;height:7.75%;min-height:0;margin:0;padding:0;background:transparent}
  .reference-stage .reference-actions>*{display:block;flex:0 0 auto;width:100%;min-width:0;min-height:0;box-sizing:border-box;padding:0;color:transparent;font-size:1px;line-height:1;background:transparent;border:0;border-radius:12px;white-space:nowrap;box-shadow:none}
  .reference-stage .reference-actions .btn{height:67%;}
  .reference-stage .reference-actions .linkbtn{height:33%;}
  .reference-stage .reference-actions .btn:focus-visible,.reference-stage .reference-actions .linkbtn:focus-visible{outline:3px solid #fff;outline-offset:2px;background:#d45eff33}
  .reference-stage .reference-live-online{position:absolute;z-index:5;top:48.15%;left:27%;display:flex;align-items:center;justify-content:center;gap:5px;width:46%;height:3.8%;min-height:0;box-sizing:border-box;margin:0;padding:0 5px;overflow:hidden;border:1px solid #8f51cc;border-radius:999px;background:rgba(16,9,31,.97);box-shadow:0 0 10px #7c36ff66;color:#fff;font-size:clamp(9px,2.4vw,12px);letter-spacing:0;line-height:1;text-align:center}
  .reference-stage .reference-live-online .online-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#00e58a;box-shadow:0 0 12px #00e58a}
  .reference-stage .reference-live-online strong{font-weight:700;letter-spacing:0}
  .mobile-lower-art{display:none!important}
  .mobile-section-head{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.8vw,10px);color:#ef8cff;font-size:clamp(8px,2.8vw,13px);font-style:italic;font-weight:700;letter-spacing:.09em;text-shadow:0 0 9px #d42dff;white-space:nowrap}
  .mobile-section-head i{width:1px;height:17px;background:#a94ce1;box-shadow:0 0 8px #d42dff}
  .mobile-game-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:8px 0 0}
  .mobile-game-tiles>span{display:flex;min-width:0;min-height:38px;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px 1px;border:1px solid #8d46be99;border-radius:9px;background:rgba(17,8,34,.82);color:#dfbaff;font-size:14px;line-height:1}
  .mobile-game-tiles svg{display:block;width:17px;height:17px;fill:none;stroke:#d9b0ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mobile-game-tiles b{color:#e5d8f0;font-size:clamp(7px,2.25vw,9px);font-weight:500;line-height:1.1;white-space:normal}
  .mobile-media-labels{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px auto 0}
  .mobile-media-labels>span{display:flex;min-width:0;flex:1;align-items:center;justify-content:center;gap:5px;padding:5px 3px;border:1px solid #8340ad88;border-radius:8px;background:rgba(17,8,34,.78);color:#ded0eb;font-size:clamp(8px,2.4vw,10px)}
  .mobile-media-labels img{display:block;width:17px;height:17px;object-fit:contain}
  .mobile-landscape{display:none}
  .mobile-original-label{margin:7px 0 3px;color:#e3d5f0;font-size:9px;letter-spacing:.24em}
  .mobile-credit{margin:0;color:#b9a6cf;font-size:clamp(7px,2vw,8px);line-height:1.7;letter-spacing:.09em}
  .mobile-studio-mark{display:flex;flex-direction:column;align-items:center;margin-top:5px;color:#e76aff;font-family:cursive;font-size:30px;font-style:italic;text-shadow:0 0 12px #ca2cff}
  .mobile-studio-mark span{font-family:inherit}
  .mobile-studio-mark small{margin-top:0;color:#d4c3e5;font-family:inherit;font-size:9px;font-style:normal;letter-spacing:.22em;text-shadow:none}
  .reference-presentation{display:none}
  .reference-hotspots,.reference-mobile-menu{display:none}
  .reference-mobile-menu{display:none}
  body:has(#loginForm) .page{min-height:100dvh;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom))}
  body:has(#loginForm) .back{min-height:44px;display:flex;align-items:center;flex:none}
  body:has(#loginForm) .panel{padding:22px 18px;margin:auto 0;flex:none}
  body:has(#loginForm) .eyebrow{margin-top:0;font-size:11px;letter-spacing:2px}
  body:has(#loginForm) .panel h1{font-size:32px;margin:12px 0}
  body:has(#loginForm) .muted{font-size:15px}
  #loginForm label{margin:12px 0 6px}
  #loginForm .field{padding:12px;font-size:16px;scroll-margin:16px}
  #loginForm .form-message:empty{min-height:0;margin:12px 0}
  #loginForm .btn{padding:13px;font-size:17px}
  body:has(.lobby-shell){height:var(--app-height,100dvh);min-height:0;overflow:hidden}
  .lobby-shell{width:100%;height:var(--app-height,100dvh);min-height:0;padding:max(4px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));display:flex;flex-direction:column;overflow:hidden}
  .lobby-header{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:0 4px;padding:0 4px;border-radius:14px;flex:none;align-items:center}
  .lobby-header .mini-brand{display:none}
  .account-strip{display:contents}
  .account-profile{grid-column:1/4;grid-row:1;min-width:0;padding:2px;min-height:44px}
  .account-identity>strong{max-width:200px;font-size:13px}
  .lobby-clock{display:flex;position:static;grid-column:4;grid-row:1;align-items:center;justify-content:center;padding:4px;font-size:13px;font-variant-numeric:tabular-nums}
  .account-avatar{width:28px;height:28px}
  .account-badges,.account-metric small{display:none}
  .account-metric{padding:5px;font-size:12px;min-height:44px;justify-content:center}
  .account-metric strong{font-size:12px}
  .account-coins{grid-column:2;grid-row:2}
  .account-time{grid-column:3;grid-row:2}
  .account-online{grid-column:4;grid-row:2}
  .account-status{margin:0;grid-column:1;grid-row:2;min-width:0}
  .account-status select{width:100%;max-width:100%;padding:5px;min-height:44px;font-size:16px}
  .compact-menu-toggle{display:block;flex:none;width:100%;margin:4px 0;padding:8px 12px;text-align:left;min-height:44px}
  .main-nav{display:none;position:fixed;z-index:100;right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));width:min(85vw,320px);max-height:calc(var(--app-height,100dvh) - 24px);margin:0;padding:12px;overflow:auto;overscroll-behavior:contain;border:1px solid #7654a9;border-radius:18px;background:#151027;box-shadow:0 15px 55px #000b}
  .main-nav.compact-nav-open{display:flex;flex-direction:column;gap:6px}
  .main-nav .nav-item{padding:12px;text-align:left;font-size:16px;min-height:44px;min-width:0;flex:none;overflow-wrap:anywhere}
  .phone-nav-close{min-height:44px;flex:none;text-align:right}
  .phone-nav-account{display:grid;gap:8px;border-top:1px solid #55456f;padding-top:12px;margin-top:6px}
  .phone-nav-account>*{min-height:44px;font-size:15px;text-align:center}
  .phone-nav-account #adminLink,.phone-nav-account #logoutButton{display:flex;align-items:center;justify-content:center;min-height:44px}
  .phone-nav-backdrop{position:fixed;z-index:95;inset:0;width:100%;height:100%;border:0;background:#05030bbf}
  .lobby-grid{display:flex;flex-direction:column;align-items:stretch;flex:1 1 0;min-height:0;gap:0}
  .chat-panel{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0;padding:6px;border-radius:14px;overflow:hidden}
  .chat-heading{flex:none;align-items:center;gap:6px;margin-bottom:6px}
  .chat-heading h1{font-size:20px;margin:0}
  .chat-heading .eyebrow,.chat-heading #welcome,.online-badge,.room-description{display:none}
  .chat-heading-actions{display:flex;gap:4px;align-items:center}
  .room-toggle,.people-toggle{display:block;min-height:44px;padding:7px;font-size:12px}
  .chat-panel .messages{flex:1 1 0;height:auto;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;padding:8px}
  .message-head{flex-wrap:wrap;gap:4px}
  .message-form{flex:none;display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 70px;gap:4px;margin-top:6px}
  .message-form textarea{grid-column:1/-1;grid-row:2;height:44px;min-height:44px;max-height:80px;min-width:0;padding:10px;font-size:16px}
  .message-form .media-toggle{grid-column:1;grid-row:3}
  .message-form .emoji-toggle{grid-column:2;grid-row:3}
  .message-form .attach-toggle{grid-column:3;grid-row:3}
  .message-form .send-button{grid-column:4;grid-row:3}
  .message-form button{min-width:0;min-height:44px;padding:6px;font-size:13px}
  .chat-panel .emoji-picker{position:static;grid-column:1/-1;grid-row:1;width:100%;height:min(190px,max(165px,calc(var(--app-height,100dvh) * .25)));max-height:190px;min-height:0;display:flex;gap:4px;padding:5px;border-radius:11px;box-shadow:0 0 14px #a343d422}
  .chat-panel .emoji-picker-head{gap:5px}
  .chat-panel .emoji-picker-head>strong{display:none}
  .chat-panel .emoji-picker-head input{height:30px;padding:4px 8px}
  .chat-panel .emoji-close{width:32px;height:32px;min-height:0}
  .chat-panel .emoji-categories{gap:4px;padding:0 0 2px}
  .chat-panel .emoji-category{height:30px;min-height:30px;padding:3px 8px;font-size:12px}
  .chat-panel .emoji-grid{flex:1 1 0;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .chat-panel .emoji-card{min-height:44px;grid-template-columns:minmax(0,1fr) 44px;gap:2px}
  .chat-panel .emoji-option{min-height:44px;padding:2px;border-radius:8px}
  .chat-panel .emoji-option img{width:40px;height:40px}
  .chat-panel .emoji-option-animated img{width:40px;height:40px}
  .chat-panel .emoji-favorite{width:44px;height:44px;min-height:0}
  .chat-panel .emoji-option span{font-size:9px}
  .chat-panel .emoji-attribution{font-size:8px}
  .chat-message-body .chat-smiley{width:28px;height:28px;max-width:32px;max-height:32px}
  .chat-message-body .chat-smiley-animated{width:44px;height:44px;max-width:60px;max-height:60px}
  .chat-panel>.form-message{flex:none;margin:4px 0;font-size:12px;max-height:44px;overflow:auto}
  .chat-panel>.form-message:empty{display:none}
  .chat-attachment-preview{flex:none;max-height:60px;overflow:auto}
  .room-panel{position:fixed;z-index:70;left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));width:min(80vw,300px);height:auto;max-height:calc(var(--app-height,100dvh) * .75);display:none;padding:12px;overflow:auto;overscroll-behavior:contain;transform:none}
  .room-panel.room-picker-open{display:block}
  .room-panel #roomList{display:grid;gap:8px;margin-top:10px}
  .room-card{min-width:0;width:100%;margin:0;min-height:52px}
  #roomClose{display:block;margin:0 0 12px auto;min-height:44px}
  .room-backdrop{position:fixed;z-index:65;inset:0;width:100%;height:100%;border:0;background:#05030bbf}
  .room-backdrop:not([hidden]){display:block}
  .online-sidebar{height:var(--app-height,100dvh);max-height:var(--app-height,100dvh);overflow:auto}
  .lobby-grid:has(#onlineSidebar.open) .chat-panel{display:none}
  .online-sidebar.open{position:static;z-index:auto;display:flex;flex:1 1 0;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;max-height:none;margin:0;padding:12px;border-radius:14px;overflow:hidden;box-shadow:none}
  .online-sidebar.open .online-sidebar-head,.online-sidebar.open .online-search-label,.online-sidebar.open .online-search{flex:none}
  .online-sidebar.open .people-close{display:block;flex:0 0 44px;width:44px;height:44px;min-height:44px;border:1px solid #7654a9;border-radius:12px;background:#211838;font-size:28px;line-height:1}
  .online-sidebar.open .online-user-list{flex:1 1 0;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px}
  .people-backdrop{display:none!important}
  .feature-panel,.games-hub{min-height:0;overflow:auto}
  #featureSection{flex:1 1 0;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:12px calc(12px + env(safe-area-inset-bottom))}
  .games-hub{overscroll-behavior:contain}
  #wheelGame{width:100%;min-width:0;min-height:0;overflow:visible}
  #wheelGame h2,#wheelGame p{overflow-wrap:anywhere}
  #wheelGame .wheel-wrap{width:min(100%,clamp(220px,34dvh,250px));margin:12px auto}
  #wheelGame .game-main-button{min-height:48px}

  /* Hearts uses the same remaining app height. Scores/chat are an explicit
     optional panel; the hand is a single touch-scrollable overlapping row. */
  .games-hub{flex:1 1 0;min-height:0;margin:0;display:flex;flex-direction:column;overflow:auto}
  .games-hub:has(#heartsGame:not([hidden])){overflow:hidden}
  .game-tabs{flex:none;margin:0 0 4px;gap:4px;align-items:stretch}
  .game-tabs .game-tab{min-height:44px;padding:6px;font-size:12px}
  .phone-hearts-details{display:none;flex:1;min-width:0}
  .games-hub:has(#heartsGame:not([hidden])) .phone-hearts-details{display:block}
  .phone-hearts-details>summary{height:100%;min-height:44px;display:grid;place-items:center;text-align:center;padding:6px;border:1px solid #654987;border-radius:14px;background:#211838;cursor:pointer;font-size:12px;font-weight:700}
  .phone-hearts-details>.hearts-side{position:fixed;z-index:75;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));max-height:calc(var(--app-height,100dvh) * .65);overflow:auto;box-shadow:0 0 0 100vmax #05030b99}
  .phone-hearts-details .hearts-side>.small-button{display:block;min-height:44px;margin:0 0 12px auto}
  .hearts-game{display:flex;flex:1 1 0;min-height:0;padding:2px;border-radius:14px;overflow:auto}
  #heartsRoom{display:flex;flex-direction:column;flex:1 1 0;min-width:0;min-height:0}
  .hearts-room-head{flex:none}
  .hearts-room-head h2{display:none}
  .hearts-status{flex:none;max-height:36px;overflow:auto;font-size:12px;line-height:18px;margin:0 0 4px}
  #heartsError:not(:empty){flex:none;max-height:40px;overflow:auto;font-size:12px;margin:4px 0}
  .hearts-layout{display:flex;flex:1 1 0;min-height:0;align-items:stretch;gap:0}
  .hearts-play-area{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0;--card-width:clamp(58px,16vw,72px);--card-step:44px;--table-min:170px}
  .hearts-table{flex:1 1 0;min-height:var(--table-min);height:auto;border-width:4px;border-radius:18px}
  .heart-seat{width:62px;max-width:24%;padding:3px;font-size:11px;line-height:1.15;border-radius:9px}
  .heart-seat small{font-size:10px;margin-top:2px}
  .heart-avatar{display:none}
  .heart-seat.north,.heart-seat.south{display:block;width:140px;max-width:55%;text-align:center;padding:3px;font-size:11px}
  .heart-seat.north{top:3px}
  .heart-seat.south{bottom:3px}
  .heart-seat.west{left:3px}
  .heart-seat.east{right:3px}
  .heart-trick{grid-template-columns:repeat(3,28px);grid-template-rows:repeat(3,32px);gap:2px}
  .trick-play .card-corner{font-size:12px;top:2px;left:2px}
  .trick-play .card-corner small{font-size:11px}
  .trick-play .card-corner.bottom,.trick-play .card-suit,.trick-play>small{display:none}
  .hearts-trick-caption{flex:none;font-size:11px;line-height:15px;max-height:30px;overflow:auto;min-height:15px;margin:3px 0}
  .hearts-pass-actions{flex:none;flex-wrap:nowrap;gap:6px;margin:2px 0;padding:2px;font-size:11px;border-radius:10px}
  .hearts-pass-actions strong{flex:1;min-width:0}
  .hearts-pass-actions button{min-height:44px;font-size:12px;padding:6px;flex:none}
  .hearts-hand{display:flex;flex:none;flex-wrap:nowrap;align-items:flex-end;gap:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:thin;padding:14px 4px 6px;scroll-padding:4px;min-height:96px}
  .hearts-hand .hand-card{width:var(--card-width);min-width:var(--card-width);height:76px;flex:0 0 var(--card-width);margin-left:calc(var(--card-step) - var(--card-width));border-radius:7px;touch-action:pan-x}
  .hearts-hand .hand-card:first-child{margin-left:0}
  .hearts-hand .card-corner{font-size:16px;top:4px;left:4px}
  .hearts-hand .card-corner small{font-size:15px}
  .hearts-hand .card-corner.bottom{top:auto;left:auto;bottom:4px;right:4px}
  .hearts-hand .card-suit{font-size:24px}
  .hearts-hand .hand-card.selected-pass{transform:translateY(-8px);border-color:#f2d36b;box-shadow:0 0 0 2px #f2d36b}
  .hearts-hand .received-card{border-color:#147a47;box-shadow:inset 0 0 0 3px #30d68b}
  .hearts-last-trick{flex:none;font-size:11px}
  .hearts-last-trick>summary{min-height:24px;cursor:pointer}
  .hearts-last-trick[open]{max-height:100px;overflow:auto}
  .hearts-round-actions{flex:none;margin:0;gap:4px}
  .hearts-round-result:empty{display:none}
  #heartsScores{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:767px){
  html.keyboard-compact .lobby-header{grid-template-columns:minmax(0,1fr) 36px 36px 36px 38px;grid-template-rows:44px}
  html.keyboard-compact .lobby-header .account-profile{grid-column:1;grid-row:1;min-width:0;min-height:40px}
  html.keyboard-compact .lobby-header .account-coins{grid-column:2;grid-row:1}
  html.keyboard-compact .lobby-header .account-time{grid-column:3;grid-row:1}
  html.keyboard-compact .lobby-header .account-online{grid-column:4;grid-row:1}
  html.keyboard-compact .lobby-header .account-status{display:none}
  html.keyboard-compact .lobby-clock{grid-column:5;grid-row:1}
  html.keyboard-compact .lobby-header .account-metric{min-height:40px;padding:3px}
  html.keyboard-compact .chat-heading{margin-bottom:2px}
  html.keyboard-compact .chat-heading-actions .room-toggle,html.keyboard-compact .chat-heading-actions .people-toggle{min-height:38px}
  html.keyboard-compact .chat-panel .emoji-picker{height:104px;gap:2px;padding:4px}
  html.keyboard-compact .chat-panel .emoji-picker-head>strong{font-size:12px}
  html.keyboard-compact .chat-panel .emoji-picker-head input{height:30px;font-size:16px}
  html.keyboard-compact .chat-panel .emoji-close{width:32px;height:32px}
  html.keyboard-compact .chat-panel .emoji-categories{gap:3px;padding:0 0 2px}
  html.keyboard-compact .chat-panel .emoji-category{min-height:30px;padding:4px 7px;font-size:11px}
  html.keyboard-compact .chat-panel .emoji-attribution{font-size:8px}
  html.keyboard-compact .chat-panel .emoji-attribution{display:none}
}

.fish-art-box{display:none}
@media(max-width:767px){
/* Daily catch: one proportional 4:3 canvas and touch controls outside its artwork. */
#dailyCatchModal.modal{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));align-items:center}
#dailyCatchModal .catch-box{width:min(100%,780px);max-height:calc(var(--app-height,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(14px,3vw,24px);touch-action:pan-y}
#dailyCatchModal .catch-box h2{font-size:clamp(27px,5vw,38px);line-height:1.05;margin:5px 0 8px}
#dailyCatchPrompt{margin:0 0 12px;font-size:clamp(14px,2.4vw,17px);line-height:1.4}
#dailyCatchModal .fish-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2vw,12px);margin:12px 0}
#dailyCatchModal .fish-card{min-width:0;min-height:128px;grid-template-columns:1fr;justify-items:center;align-content:center;gap:4px;padding:8px 5px;border-radius:15px;text-align:center}
#dailyCatchModal .fish-emoji{display:none}
#dailyCatchModal .fish-art-box{display:grid;place-items:center;width:100%;height:78px}
#dailyCatchModal .fish-choice-art{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 7px #37dff477)}
#dailyCatchModal .fish-choice-two{filter:hue-rotate(32deg) saturate(1.18) drop-shadow(0 4px 7px #37dff477)}
#dailyCatchModal .fish-choice-three{filter:hue-rotate(285deg) saturate(1.12) drop-shadow(0 4px 7px #37dff477)}
#dailyCatchModal .fish-card strong{font-size:14px}
#dailyCatchModal .fish-card small{font-size:12px;line-height:1.2}
#dailyCatchModal .fish-card.selected{outline:2px solid #f6d77d;outline-offset:1px}
#dailyCatchModal .catch-result:empty{min-height:0;margin:0}
#dailyCatchModal .catch-result:not(:empty){margin:9px 0 4px;font-size:clamp(19px,5vw,24px)}
#dailyCatchModal #closeDailyCatch{min-height:48px;padding:12px 18px;margin-top:8px}
#fishGrid.catch-playing{position:relative;display:flex;height:auto;min-height:0;flex-direction:column;align-items:stretch;gap:8px;margin:10px 0 8px;overflow:visible}
#fishGrid.catch-playing>.fish-card{display:none}
.catch-stage{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid #54d9e6;border-radius:18px;background:#100c2a;box-shadow:0 9px 30px #07041688;isolation:isolate}
.catch-canvas{display:block;width:100%;height:100%;object-fit:contain}
.catch-skip{align-self:center;position:relative;z-index:2;min-width:176px;min-height:46px;margin:0;padding:9px 17px;border:1px solid #9874d0;border-radius:999px;background:#201638e8;color:#f5edff;font:inherit;font-size:14px;font-weight:700;box-shadow:0 5px 16px #08051266;cursor:pointer}
.catch-skip:focus-visible{outline:3px solid #72f9ed;outline-offset:3px}
@media(max-width:650px){
  #dailyCatchModal .catch-box{width:min(100%,520px);max-height:calc(var(--app-height,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px);padding:13px;border-radius:22px}
  #dailyCatchModal .eyebrow{letter-spacing:2.5px;font-size:10px;margin-top:0}
  #dailyCatchModal .fish-card{min-height:112px}
  #dailyCatchModal .fish-art-box{height:65px}
  #dailyCatchModal .fish-card strong{font-size:12px}
  #dailyCatchModal .fish-card small{font-size:10px}
  #dailyCatchModal #closeDailyCatch{padding:11px 14px}
  .catch-stage{border-radius:15px}
  .catch-skip{min-height:46px;font-size:13px}
}
@media(max-height:560px) and (max-width:767px){
  #dailyCatchModal .catch-box{padding:10px}
  #dailyCatchModal .eyebrow{font-size:9px}
  #dailyCatchModal .fish-card{min-height:96px}
  #dailyCatchModal .fish-art-box{height:52px}
}
@media(prefers-reduced-motion:reduce){.catch-skip{transition:none}}
}
@media(min-width:768px){
  #dailyCatchModal #fishGrid.catch-playing{display:flex;min-width:0;flex-direction:column;align-items:stretch;gap:8px;margin:10px 0 8px;overflow:visible}
  #dailyCatchModal #fishGrid.catch-playing>.fish-card{display:none}
  #dailyCatchModal #fishGrid.catch-playing>.catch-stage{width:100%;max-width:680px;min-width:0;flex:0 1 auto;align-self:center;aspect-ratio:4/3}
  #dailyCatchModal #fishGrid.catch-playing>.catch-stage>.catch-canvas{width:100%;height:100%;min-width:0;max-width:100%}
  #dailyCatchModal .catch-skip{align-self:center;min-width:176px;min-height:46px;margin:0;padding:9px 17px;border:1px solid #9874d0;border-radius:999px;background:#201638e8;color:#f5edff;font:inherit;font-size:14px;font-weight:700;box-shadow:0 5px 16px #08051266;cursor:pointer}
  #dailyCatchModal .catch-skip:focus-visible{outline:3px solid #72f9ed;outline-offset:3px}
}
/* Mobile lobby: messages sit directly on the existing chat background. */
@media(max-width:767px){
  .lobby-shell .messages > .chat-message{
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:6px 4px;
    margin-bottom:8px;
  }
}

/* Mein Buziland: persönliche Ansicht, ohne globale Lobby-/Chatänderungen. */
#profilePanel.profile-dashboard{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;width:min(100%,900px);max-width:900px;min-width:0;margin:18px 0 24px;padding:clamp(16px,3vw,28px);border:1px solid #7654a9;border-radius:24px;background:linear-gradient(145deg,#211838 0%,#171126 100%);box-shadow:0 16px 42px #09051255}
#profilePanel .profile-hero{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:20px;min-width:0}
#profilePanel .profile-avatar-wrap{width:112px;height:112px;margin:0;border:2px solid #a782ec;border-radius:50%;box-shadow:0 0 24px #a85dff55}
#profilePanel .profile-identity{min-width:0}
#profilePanel .profile-identity h2{margin:3px 0 8px;overflow-wrap:anywhere;font-size:clamp(22px,3vw,32px)}
#profilePanel .profile-tags{display:flex;flex-wrap:wrap;gap:7px}
#profilePanel .profile-tag{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid #7859a2;border-radius:999px;background:#302147;color:#e6d7ff;font-size:13px;font-weight:700}
#profilePanel .profile-tag-status{border-color:#3c958e;background:#163b3b;color:#aaf7e8}
#profilePanel .profile-registration{display:grid;gap:3px;margin:12px 0 0;color:#bdb1d0;font-size:14px;line-height:1.5}
#profilePanel .profile-registration time{color:#fff;font-weight:700;overflow-wrap:anywhere}
#profilePanel .profile-journey{position:relative;min-width:0;overflow:hidden;padding:20px;border:1px solid #4a3a6d;border-radius:20px;background:radial-gradient(ellipse at 85% 0%,#57368666,transparent 45%),linear-gradient(125deg,#21173b,#132834)}
#profilePanel .profile-journey-stars{position:absolute;top:12px;right:17px;display:flex;gap:11px;color:#91fff0;text-shadow:0 0 12px #73fff0;font-size:19px}
#profilePanel .profile-journey-stars span:nth-child(2){margin-top:16px;color:#e5c6ff;font-size:13px}
#profilePanel .profile-journey .eyebrow{margin:0 0 7px;padding-right:74px;color:#91fff0}
#profilePanel .profile-journey h2{max-width:700px;margin:0 34px 7px 0;overflow-wrap:anywhere;font-size:clamp(19px,2.5vw,25px);line-height:1.25}
#profilePanel .profile-journey-copy{max-width:680px;margin:0 0 18px;color:#c8bfd8;line-height:1.55}
#profilePanel .profile-journey-track{position:relative;height:18px;overflow:visible;margin:4px 8px 10px 0;border:1px solid #7862a2;border-radius:999px;background:#100c1e;box-shadow:inset 0 2px 6px #07040d}
#profilePanel .profile-journey-fill{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8655dd,#b278ff 55%,#61eadc);box-shadow:0 0 16px #73eee1aa;transition:width .45s ease}
#profilePanel .profile-journey-treasure{position:absolute;top:50%;right:-10px;transform:translateY(-54%);font-size:25px;filter:drop-shadow(0 0 8px #7cfff0)}
#profilePanel .profile-journey-facts{display:flex;justify-content:space-between;gap:12px;color:#ded5ec;font-size:14px;line-height:1.5}
#profilePanel .profile-journey-facts span{min-width:0;overflow-wrap:anywhere}
#profilePanel .profile-milestone{margin:12px 0 0;color:#aaf7e8;font-weight:700;line-height:1.5}
#profilePanel .profile-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
#profilePanel .profile-summary-card{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:1px solid #483762;border-radius:17px;background:linear-gradient(145deg,#2b2042,#1b152b)}
#profilePanel .profile-card-label{color:#cbbce1;font-size:13px;line-height:1.4}
#profilePanel .profile-summary-card strong{max-width:100%;color:#fff;font-size:clamp(19px,2.4vw,25px);line-height:1.25;overflow-wrap:anywhere}
#profilePanel .profile-summary-card small{color:#aaa0bb;font-size:12px;line-height:1.45}
#profilePanel .profile-coins-card strong{color:#f7d875;text-shadow:0 0 14px #e2b94b33}
#profilePanel .profile-history-button{min-height:40px;max-width:100%;margin-top:auto;padding:8px 12px;border:1px solid #7961a1;border-radius:12px;background:#271d3a;color:#f4eaff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
#profilePanel .profile-history-button:hover{background:#392754}
#profilePanel .profile-history-button:focus-visible{outline:3px solid #72f9ed;outline-offset:2px}
#profilePanel .profile-settings-card{display:grid;gap:10px;min-width:0;padding:18px;border:1px solid #403354;border-radius:17px;background:#171126}
#profilePanel .profile-settings-card h2,#profilePanel .profile-settings-card p{margin:0;overflow-wrap:anywhere}
#profilePanel .profile-settings-card p{color:#bdb1d0;line-height:1.55}
#profilePanel .profile-settings-card .avatar-picker{justify-self:start;max-width:100%;overflow-wrap:anywhere}
#profilePanel .profile-settings-card .profile-visibility{max-width:100%;line-height:1.5;overflow-wrap:anywhere}
@media(max-width:650px){
  #profilePanel.profile-dashboard{gap:13px;margin:12px 0 20px;padding:14px;border-radius:19px}
  #profilePanel .profile-hero{grid-template-columns:76px minmax(0,1fr);gap:13px}
  #profilePanel .profile-avatar-wrap{width:76px;height:76px}
  #profilePanel .profile-identity .eyebrow{font-size:9px;letter-spacing:1.2px}
  #profilePanel .profile-identity h2{font-size:clamp(20px,6vw,27px)}
  #profilePanel .profile-registration{font-size:13px}
  #profilePanel .profile-journey{padding:16px}
  #profilePanel .profile-journey-facts{flex-direction:column;gap:4px;font-size:13px}
  #profilePanel .profile-summary-grid{grid-template-columns:minmax(0,1fr)}
  #profilePanel .profile-summary-card{padding:14px}
  #profilePanel .profile-history-button{width:100%;min-height:44px}
  #profilePanel .profile-settings-card{padding:14px}
}
@media(prefers-reduced-motion:reduce){#profilePanel .profile-journey-fill{transition:none}}

/* Quiz extension: green server-deadline bar, responsive reward display and hall. */
.quiz-timer{height:12px;overflow:hidden;margin:-7px 0 14px;border:1px solid #65db91;border-radius:999px;background:#102318;box-shadow:inset 0 1px 5px #050c08}
.quiz-timer.is-urgent>span{animation:quiz-timer-tension 650ms ease-in-out infinite alternate}
@keyframes quiz-timer-tension{to{filter:brightness(1.18);box-shadow:0 0 14px #ff607899,inset 0 0 8px #fff6}}
.quiz-timeout-result{border:1px solid #ffb14a;background:linear-gradient(135deg,#39232b,#211838)}
.quiz-timeout-result>strong{display:block;color:#ffd477;font-size:18px}
.quiz-timeout-result .quiz-correct-answer{padding:9px 11px;border:1px solid #58d683;border-radius:11px;background:#173323;color:#dcffe6;font-weight:800}
@media(prefers-reduced-motion:reduce){.quiz-timer.is-urgent>span{animation:none}}
.quiz-timer>span{display:block;width:100%;height:100%;transform:scaleX(1);transform-origin:left center;background:linear-gradient(90deg,#28b765,#78f2a0);box-shadow:0 0 12px #50e48688;will-change:transform}
.nav-quiz-hall{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none}
.quiz-master-jewel{display:inline-grid;place-items:center;width:27px;height:27px;flex:0 0 27px;padding:0;border:1px solid #74f7f0;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f3ffff,#70f5e9 28%,#7d55d6 70%,#21143f);box-shadow:0 0 9px #6bfff0aa;color:#fff;font-size:15px;line-height:1;cursor:pointer;animation:quiz-jewel-glow 2.8s ease-in-out infinite}
@keyframes quiz-jewel-glow{50%{box-shadow:0 0 15px #80fff2,0 0 24px #9d69ff77;filter:brightness(1.12)}}
@media(prefers-reduced-motion:reduce){.quiz-master-jewel{animation:none}}
.quiz-hall-shell{width:min(100% - 24px,1040px);margin:24px auto;padding:clamp(16px,4vw,34px);border:1px solid #57447a;border-radius:24px;background:linear-gradient(145deg,#211838,#120e22);box-shadow:0 16px 45px #08041188;color:#fff}
.quiz-hall-shell h1{font-size:clamp(23px,5vw,42px);line-height:1.13;overflow-wrap:anywhere}
.quiz-hall-table{display:grid;gap:9px;margin-top:20px}
.quiz-hall-row{display:grid;grid-template-columns:58px 44px minmax(0,1fr) auto min-content;align-items:center;gap:12px;min-width:0;padding:11px 13px;border:1px solid #45335f;border-radius:15px;background:#19132a}
.quiz-hall-place{color:#d8c6ff;font-weight:900}.quiz-hall-avatar{display:grid;place-items:center;width:42px;height:42px;overflow:hidden;border-radius:50%;background:#302147;color:#e9dcff;font-weight:900}.quiz-hall-avatar img{width:100%;height:100%;object-fit:cover}.quiz-hall-name{min-width:0;overflow-wrap:anywhere;font-weight:800}.quiz-hall-count{color:#f7dc83;white-space:nowrap;font-weight:800}
.quiz-hall-empty{color:#c9bdd8;text-align:center;padding:30px 12px}
@media(max-width:520px){.quiz-hall-row{grid-template-columns:32px 36px minmax(0,1fr) auto 26px;gap:7px;padding:9px}.quiz-hall-avatar{width:36px;height:36px}.quiz-hall-row>.quiz-master-jewel{grid-column:5;grid-row:1}}

/* Android/iOS: keep the quiz sequence tight while allowing long copy to wrap. */
@media(max-width:650px){
  .quiz-panel{margin:8px 0 16px}
  .quiz-progress{margin:0 0 8px;padding:7px 11px;font-size:13px;line-height:1.3}
  .quiz-category{margin:0 0 3px;font-size:11px;letter-spacing:1.4px}
  .quiz-question{margin:0 0 8px;font-size:clamp(19px,5vw,23px);line-height:1.25;overflow-wrap:anywhere}
  .quiz-timer{height:10px;margin:0 0 9px}
  .quiz-answers{grid-template-columns:1fr;gap:7px}
  .quiz-answer{min-height:54px;padding:10px 12px;border-radius:13px;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
  #quizContent>p{margin:7px 0;line-height:1.45;overflow-wrap:anywhere}
  #featureSection:has(#profilePanel:not([hidden])){padding:10px}
  #featureSection:has(#profilePanel:not([hidden]))>.eyebrow{margin-bottom:3px;font-size:10px}
  #featureSection:has(#profilePanel:not([hidden]))>#featureTitle{margin:4px 0;font-size:clamp(27px,7vw,32px);line-height:1.1}
  #featureSection:has(#profilePanel:not([hidden]))>#featureText{margin:4px 0 8px;font-size:14px;line-height:1.4}
  #profilePanel.profile-dashboard{gap:9px;margin:7px 0 12px;padding:11px;border-radius:16px}
  #profilePanel .profile-hero{grid-template-columns:64px minmax(0,1fr);gap:10px}
  #profilePanel .profile-avatar-wrap{width:64px;height:64px}
  #profilePanel .profile-identity h2{font-size:clamp(19px,5.4vw,23px);line-height:1.15}
  #profilePanel .profile-registration{margin-top:7px;font-size:12px;line-height:1.35}
  #profilePanel .profile-journey{padding:12px}
  #profilePanel .profile-journey-copy{margin-bottom:9px;font-size:14px;line-height:1.4}
  #profilePanel .profile-journey-facts{flex-direction:row;flex-wrap:wrap;gap:5px 10px;font-size:12px;line-height:1.35}
  #profilePanel .profile-journey-facts span{flex:1 1 130px}
  #profilePanel .profile-summary-grid{gap:8px}
  #profilePanel .profile-summary-card{gap:5px;padding:11px}
  #profilePanel .profile-settings-card{gap:7px;padding:11px}
}
@media(max-width:369px){#profilePanel .profile-journey-facts{flex-direction:column}#profilePanel .profile-summary-grid{grid-template-columns:minmax(0,1fr)}}

/* The mobile quiz gets the space of the account strip; its menu stays available. */
@media(max-width:767px){
  body.quiz-active .lobby-header{display:none}
  body.quiz-active .lobby-shell{padding-top:max(4px,env(safe-area-inset-top))}
  body.quiz-active #featureSection{flex:1 1 0;min-height:0}
  body.quiz-active #featureSection>#featureTitle{margin:3px 0;font-size:clamp(24px,6vw,30px);line-height:1.12}
  body.quiz-active #featureSection>#featureText{display:none}
  body.quiz-active .quiz-panel{max-width:none;margin:5px 0 8px}
  body.quiz-active .quiz-progress{margin-bottom:5px;padding:6px 10px}
  body.quiz-active .quiz-timer{margin-bottom:7px}
  body.quiz-active .quiz-answers{gap:6px}
  body.quiz-active .quiz-answer{min-height:50px;padding:9px 11px}
  body.quiz-active .quiz-feedback{margin-top:8px;padding:12px}
  body.quiz-active .quiz-feedback p{margin:5px 0;line-height:1.4}
  body.quiz-active .quiz-next{min-height:44px;margin-top:8px}
  body.quiz-active .quiz-done{padding:14px}
}

.quiz-timer{position:relative;overflow:visible}
.quiz-timer>span{border-radius:999px;background:linear-gradient(90deg,#28b765 0%,#78f2a0 var(--quiz-green-end,100%),#ffad42 var(--quiz-orange-start,100%),#ff263c var(--quiz-red-start,100%),#ff263c 100%);will-change:transform,background-image}
.quiz-timer.is-urgent>span{background:linear-gradient(90deg,#ff263c,#ff495b)!important;animation:quiz-timer-tension 650ms ease-in-out infinite alternate}
.quiz-final-countdown{position:absolute;z-index:2;top:50%;right:3px;display:grid;place-items:center;min-width:30px;height:30px;padding:0 7px;transform:translateY(-50%);border:1px solid #ff9a77;border-radius:10px;background:#541622f2;box-shadow:0 0 14px #ff334dbb;color:#fff;font-size:20px;font-weight:950;line-height:1;text-shadow:0 1px 4px #27060b;pointer-events:none}
.quiz-final-countdown[hidden]{display:none}