.friend-islands-view{padding:18px;min-height:calc(100vh - 110px)}
.friend-shell{max-width:1180px;margin:auto;padding:20px;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(232,252,255,.94));box-shadow:0 18px 55px rgba(4,97,126,.18)}
.friend-head{display:flex;align-items:center;gap:16px;padding:18px;border-radius:22px;background:linear-gradient(120deg,#087d9c,#10a66b);color:#fff;box-shadow:0 8px 0 #075d73}
.friend-head .icon-button{flex:0 0 56px}.friend-head h2{margin:0;font-size:clamp(1.45rem,4vw,2.35rem)}.friend-head p{margin:4px 0 0;line-height:1.7}.friend-head .friend-balance{margin-inline-start:auto;min-width:150px;text-align:center;padding:10px 16px;border-radius:18px;background:#fff;color:#08617a;font-weight:900}
.friend-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.friend-stat{padding:16px;border:2px solid #cbeaf0;border-radius:18px;background:#fff;text-align:center}.friend-stat b{display:block;color:#087592;font-size:1.35rem}.friend-stat small{color:#507782;font-weight:800}
.friend-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.friend-tabs button{min-height:54px;flex:1;border-radius:16px;border:2px solid #b7e1e9;background:#fff;color:#08617a;font-weight:900}.friend-tabs button.active{background:#087d9c;color:#fff;box-shadow:0 6px 0 #075d73;transform:translateY(-2px)}
.friend-panel{padding:20px;border:2px solid #caeaf0;border-radius:22px;background:#fff}.friend-panel[hidden]{display:none!important}.friend-panel h3{margin-top:0;color:#075f78}.friend-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.friend-form-grid label{display:grid;gap:6px;font-weight:900;color:#245f70}.friend-form-grid input,.friend-form-grid select{min-height:54px;padding:10px 14px;border:2px solid #b9dee7;border-radius:14px;font:inherit}.friend-full{grid-column:1/-1}
.friend-gate{padding:14px 16px;border-radius:16px;background:#fff7d6;border:2px solid #ffd563;color:#795500;font-weight:800;line-height:1.8}.friend-gate.ready{background:#e5faed;border-color:#75d99a;color:#176d3a}
.friend-problem-tools{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.friend-problem-tools button{min-height:48px;border:0;border-radius:13px;background:#e6f8fb;color:#075f78;font-weight:900;padding:8px 14px}.friend-problems{display:grid;grid-template-columns:repeat(12,minmax(48px,1fr));gap:6px;overflow:auto;padding:8px}.friend-problems button{min-width:48px;min-height:48px;border:2px solid #c6e7ed;border-radius:12px;background:#fff;color:#396976;font-weight:900}.friend-problems button.selected{background:#14ad70;color:#fff;border-color:#078a56;box-shadow:0 4px 0 #087647}.friend-problems button:disabled{opacity:.25}
.friend-primary{min-height:58px;padding:12px 22px;border:0;border-radius:17px;background:linear-gradient(#ffc632,#f29b0b);color:#563600;font-weight:900;box-shadow:0 7px 0 #bd7300}.friend-primary:disabled{filter:grayscale(1);opacity:.55;box-shadow:none}.friend-code{font-size:clamp(2rem,9vw,4rem);letter-spacing:.18em;direction:ltr;color:#087592;font-weight:900;text-align:center;background:#edfbfe;border:3px dashed #22a8c2;border-radius:20px;padding:14px}
.friend-join-row{display:flex;gap:10px;max-width:650px;margin:auto}.friend-join-row input{flex:1;min-height:62px;text-align:center;direction:ltr;letter-spacing:.16em;font-size:1.55rem;font-weight:900;border:3px solid #8bd0df;border-radius:18px}.friend-message{min-height:28px;text-align:center;margin:12px;font-weight:900;color:#a14d00}.friend-message.good{color:#087e4b}
.friend-list{display:grid;gap:12px}.friend-card{display:flex;align-items:center;gap:14px;padding:15px;border:2px solid #cce9ee;border-radius:18px;background:#f9feff}.friend-card>div{flex:1}.friend-card h4{margin:0;color:#075f78}.friend-card p{margin:4px 0;color:#527784}.friend-card button{min-height:48px;border-radius:14px;padding:8px 14px;font-weight:900}
.friend-game-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px}.friend-game{padding:20px;border-radius:24px;background:linear-gradient(160deg,#eafcff,#fff7dc);text-align:center}.friend-game-question{font-size:clamp(2.4rem,10vw,5.5rem);font-weight:900;color:#075f78;margin:18px 0}.friend-answer-display{min-height:86px;display:flex;align-items:center;justify-content:center;border:3px solid #20aac6;border-radius:22px;background:#fff;color:#075f78;font-size:3rem;font-weight:900;box-shadow:0 8px 0 #b8e9f2;outline:none}.friend-keypad{max-width:390px;margin:18px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.friend-keypad button{min-height:60px;border:0;border-radius:16px;background:#fff;color:#075f78;font-size:1.35rem;font-weight:900;box-shadow:0 5px 0 #a8dce7}.friend-keypad button:active{transform:translateY(4px);box-shadow:0 1px 0 #a8dce7}.friend-rank{padding:16px;border-radius:22px;background:#075f78;color:#fff}.friend-rank h3{color:#fff}.friend-rank ol{padding:0;margin:0;list-style:none}.friend-rank li{display:grid;grid-template-columns:35px 1fr auto;gap:6px;padding:10px 6px;border-bottom:1px solid rgba(255,255,255,.18)}
.friend-question-timer{display:block;width:max-content;min-width:105px;margin:10px auto 0;padding:7px 14px;border-radius:999px;background:#fff;color:#9a5b00;border:2px solid #ffd36a;font-weight:900}
.friend-result{padding:25px;text-align:center}.friend-result b{display:block;font-size:2.2rem;color:#07834e}.friend-islands-island{filter:hue-rotate(12deg) saturate(1.15)}
.friend-result small{display:block;margin:8px 0 18px;color:#507782;font-weight:800}.friend-celebration-star{position:fixed;z-index:9999;inset-inline-start:var(--friend-x);bottom:-50px;font-size:clamp(1.4rem,4vw,2.5rem);font-style:normal;pointer-events:none;animation:friendStarRise 2s var(--friend-delay) cubic-bezier(.2,.75,.3,1) both}@keyframes friendStarRise{0%{transform:translateY(0) scale(.35) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(-85vh) scale(1.1) rotate(300deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.friend-islands-view *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:800px){.friend-islands-view{padding:8px}.friend-shell{padding:10px}.friend-head{align-items:flex-start;flex-wrap:wrap}.friend-head .friend-balance{width:100%;margin:0}.friend-summary,.friend-form-grid{grid-template-columns:1fr}.friend-game-layout{grid-template-columns:1fr}.friend-problems{grid-template-columns:repeat(6,minmax(48px,1fr))}.friend-join-row{flex-direction:column}.friend-card{align-items:stretch;flex-direction:column}}