/* Select Player: a fighting-game character select. A grid of neon instrument portraits (one tile per instrument, tinted by section), the highlighted tile in a thick pulsing outline with a 1P marker, and a big preview of it with a player card. The page takes the chosen game's neon (--t, --u from shared/cabinets.css, set on by player.js). Family colors: woodwinds magenta (--pink), brass --amber, percussion --cyan. */ .wrap.sp{max-width:1180px} .topbar{margin-bottom:6px} .fam-woodwind{--fam:var(--pink);--fam-hi:var(--pink-hi);--fam-glow:var(--glow-pink)} .fam-brass{--fam:var(--amber);--fam-hi:var(--amber-hi);--fam-glow:var(--glow-amber)} .fam-percussion{--fam:var(--cyan);--fam-hi:var(--cyan-hi);--fam-glow:var(--glow-cyan)} /* the game's marquee, small, then SELECT YOUR PLAYER */ .sp-head{text-align:center;margin-bottom:12px} .sp-marquee{display:flex;width:min(300px,80%);height:62px;margin:0 auto 8px;font-size:14px} .sp-marquee .mq{box-shadow:var(--t-glow)} .sp-marquee .mq-shade{transform:skewY(-3deg)} .sp-title{font-family:var(--display);font-weight:400;font-size:clamp(30px,6.4vw,56px);line-height:1;letter-spacing:.03em;text-transform:uppercase; font-style:italic;transform:skewX(-8deg);color:var(--yellow);-webkit-text-stroke:2px var(--red-ink);text-shadow:0 4px 0 var(--red-ink),var(--glow-yellow); text-wrap:balance;overflow-wrap:normal;padding:0 8px} /* the announcer says it: one gentle swell, timed with the choose-instrument voice line (none under reduced motion) */ .sp-title.say{animation:say .6s ease-out} @keyframes say{35%{transform:skewX(-8deg) scale(1.06)}} /* CONTINUE AS … (returning students), and the migration message */ .continue{display:flex;justify-content:center;margin-bottom:12px} .btn-continue{display:flex;align-items:center;gap:12px;padding:8px 22px 8px 10px;text-decoration:none;min-height:64px; background:var(--yellow);color:var(--deep);border:3px solid var(--yellow-hi);border-radius:999px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),var(--glow-yellow)} .btn-continue:hover{background:var(--yellow-hi)} .btn-continue:active{transform:translateY(2px)} .btn-continue:focus-visible{outline:4px solid var(--text-hi);outline-offset:4px} .c-pic{width:50px;height:50px;border-radius:50%;background:var(--deep);display:grid;place-items:center;flex:none} .c-pic .pt-box{width:44px;height:44px} .c-text{display:flex;flex-direction:column;line-height:1.1} .c-label{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase} .c-name{font-family:var(--display);font-size:clamp(20px,4vw,26px);text-transform:uppercase} .sp-msg{max-width:720px;margin:0 auto 12px;padding:10px 14px;border-radius:14px;text-align:center;background:var(--floor-2);border:2px solid var(--yellow);box-shadow:var(--glow-yellow)} .sp-msg b{color:var(--yellow-hi)} /* layout: preview on the side (landscape) or on top (portrait). Landscape gives the grid most of the width. */ .sp-main{display:grid;gap:16px;grid-template-columns:1fr} @media (min-width:900px) and (orientation:landscape){ .sp-main{grid-template-columns:clamp(210px,23vw,290px) 1fr;gap:clamp(12px,1.6vw,20px);align-items:start} } /* ---------- the preview + player card ---------- */ .preview{--pc:var(--cyan);background:var(--floor-2);display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:12px;align-items:center;padding:12px;border-radius:20px; background:radial-gradient(circle at 30% 45%, color-mix(in srgb, var(--pc) 22%, transparent), transparent 60%), var(--floor-2);border:2px solid var(--floor-3)} @media (min-width:900px) and (orientation:landscape){ .preview{grid-template-columns:1fr;position:sticky;top:12px;gap:10px;padding:10px} /* the portrait a little smaller, sized by the screen height, so the card, SKINS and SELECT fit with no scrolling */ .pv-stage{width:min(100%,clamp(140px,calc(100vh - 570px),260px));justify-self:center} .preview .card-name{font-size:clamp(22px,2.4vw,30px);margin-bottom:4px} .preview .card-key,.preview .card-five{font-size:14px} .preview .card-stars{margin-top:6px} .preview .btn-skins{min-height:40px;margin-top:8px} .preview .btn-select{margin-top:8px;min-height:50px;padding:6px 10px;font-size:clamp(15px,1.5vw,19px);line-height:1.1} /* Horn's Starting notes toggle: the label on its own line, both buttons on one, and a smaller portrait to make room */ .preview .horn-toggle{margin-top:6px;gap:4px 6px} .preview .horn-toggle>span{flex-basis:100%} .preview .horn-toggle button{min-height:36px;padding:2px 14px} .preview:has(.horn-toggle:not([hidden])) .pv-stage{width:min(100%,clamp(120px,calc(100vh - 600px),260px))} } /* short landscape screens (iPad landscape, 1366 × 768 Chromebooks): a slightly tighter header */ @media (min-width:900px) and (orientation:landscape) and (max-height:860px){ .sp-head{margin-bottom:8px} .sp-marquee{height:50px;margin-bottom:4px;font-size:12px} .sp-title{font-size:min(6.4vw,6.6vh)} .continue{margin-bottom:10px} .btn-continue{min-height:56px;padding:6px 20px 6px 8px} .c-pic{width:44px;height:44px}.c-pic .pt-box{width:38px;height:38px} } .pv-stage{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;background:var(--deep);background:radial-gradient(circle, color-mix(in srgb, var(--pc) 18%, var(--deep)), var(--deep) 70%); border-bottom:3px solid var(--pc);box-shadow:0 10px 30px -12px var(--pc)} .pv-pic{width:86%;animation:idle 2.6s ease-in-out infinite} .pv-pic .pt-box{display:grid} @keyframes idle{50%{transform:translateY(-5px) rotate(-1.5deg)}} .card{min-width:0} .card-fam{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fam-hi)} .card-name{font-family:var(--display);font-weight:400;font-size:clamp(24px,4vw,34px);line-height:1.05;text-transform:uppercase;color:var(--text-hi);margin:2px 0 6px} .card-key,.card-five{margin:0;color:var(--text-lo);font-size:15px} .card-five{font-family:var(--text),var(--music)} .card-stars{margin:8px 0 0;font-weight:700;color:var(--text-hi)} .card-stars .star{color:var(--yellow);text-shadow:0 0 6px rgba(255,225,77,.6)} .card-stars b{font-family:var(--display);font-weight:400;font-size:20px;color:var(--yellow)} .horn-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:14px;font-weight:700;color:var(--text-lo)} .horn-toggle button{min-height:40px;padding:4px 14px;border-radius:999px;border:2px solid var(--amber-ink);background:var(--deep);color:var(--text-hi);font-weight:700} .horn-toggle button[aria-pressed="true"]{background:var(--amber);border-color:var(--amber-hi);color:var(--deep);box-shadow:var(--glow-amber)} .btn-select{display:block;width:100%;margin-top:12px;min-height:54px;border-radius:999px;font-family:var(--display);font-size:20px;letter-spacing:.06em;text-transform:uppercase; color:var(--deep);background:var(--t,var(--pink));border:3px solid var(--t-hi,var(--pink-hi));box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),var(--t-glow,var(--glow-pink))} .btn-select:hover{background:var(--t-hi)} .btn-select:active{transform:translateY(2px)} /* the LOCKER button (opens the locker) */ .btn-skins{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;min-height:44px;border-radius:999px;border:2px solid var(--cyan); background:var(--deep);color:var(--cyan-hi);font-family:var(--display);font-size:17px;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--glow-cyan)} .btn-skins small{font-family:var(--text);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--text-lo)} .btn-skins:hover{background:var(--floor-lit)} /* ---------- the LOCKER ---------- */ .sk-locker{align-items:flex-start;overflow-y:auto;padding:12px} .sk-locker .panel{max-width:860px;width:100%;margin:auto;text-align:left;border-color:var(--cyan)} .lk-head{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:16px;align-items:center} .lk-stage{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;background:radial-gradient(circle, color-mix(in srgb, var(--pc,var(--cyan)) 18%, var(--deep)), var(--deep) 70%)} .lk-pic{width:86%} .lk-pic .pt-box{display:grid} .lk-info h2{margin:2px 0 4px;font-family:var(--display);font-weight:400;font-size:clamp(24px,4vw,34px);text-transform:uppercase} .lk-now{margin:0 0 6px;font-weight:700;color:var(--yellow-hi)} .lk-how{margin:0;font-size:14px} .lk-sub{margin:16px 0 8px;font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-hi)} .lk-sub small{font-family:var(--text);font-size:13px;letter-spacing:0;text-transform:none;color:var(--text-lo)} .lk-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 2px;border-bottom:2px solid var(--floor-3);padding-bottom:8px} .lk-tabs [role="tab"]{flex:1 1 90px;min-height:44px;padding:6px 10px;border-radius:999px;border:2px solid var(--floor-3);background:var(--deep);color:var(--text-hi); font-family:var(--display);font-size:15px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer} .lk-tabs [role="tab"][aria-selected="true"]{border-color:var(--cyan);color:var(--cyan-hi);box-shadow:var(--glow-cyan);background:var(--floor-lit)} .lk-tabs [role="tab"]:focus-visible{outline:3px solid var(--text-hi);outline-offset:2px} .lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px} .sk-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;border-radius:14px;border:2px solid var(--floor-3); background:var(--deep);color:var(--text-hi);text-align:center;min-width:0} .sk-opt b{font-size:14px;line-height:1.15} .sk-opt small{font-size:11.5px;line-height:1.2;color:var(--text-lo)} .sk-o-pic{position:relative;display:grid;place-items:center;width:78%;aspect-ratio:1} .sk-o-pic .pt-box{width:100%} .sk-opt[aria-pressed="true"]{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow),var(--glow-yellow)} .sk-opt[aria-pressed="true"]::after{content:"✓";position:absolute;top:4px;right:6px;font-weight:700;color:var(--yellow)} .sk-opt:not(.locked):hover{border-color:var(--cyan)} .sk-opt:focus-visible{outline:3px solid var(--text-hi);outline-offset:3px} /* locked: a dark silhouette with a thin outline, a lock, and what it takes */ .sk-opt.locked{border-style:dashed;cursor:not-allowed} .sk-opt.locked .pt-box{filter:brightness(0) drop-shadow(0 0 1px var(--text-lo))} .sk-opt.locked[data-lk-bg] .pt-box{filter:brightness(.5) saturate(.6)} /* a locked background: its own dimmed picture */ .sk-opt.locked b{color:var(--text-lo)} .lk-lock{position:absolute;width:26%;right:0;bottom:0;fill:var(--floor-3);stroke:var(--text-lo);stroke-width:2} .lk-none{font-size:40px;line-height:1;color:var(--text-lo)} @media (max-width:560px){ .lk-head{grid-template-columns:110px 1fr;gap:10px} .lk-how{display:none} .lk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .sk-opt{padding:6px 4px} .sk-opt b{font-size:12.5px} .sk-opt small{font-size:10.5px} } /* ---------- the grid ---------- 16 players in Arcade.PLAYERS order (woodwinds, brass, bells, snare). Tile size comes from the grid, gaps from clamp(). Portrait / narrow screens: 4 columns (4 × 4). Landscape from 900 px (iPad landscape, Chromebooks, desktops): 6 columns in 3 rows, the 4 tiles of row 3 centered; the grid has 12 half-columns and each tile spans two, so the last row can start half a tile in (with Face-Off's CPU tile, 5 tiles, it starts one half-column in). */ .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vw,14px)} @media (min-width:900px) and (orientation:landscape){ .grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.2vw,14px)} .grid>.tile{grid-column:span 2} .grid>.tile:nth-child(13){grid-column:3/span 2} .phase2 .grid>.tile:nth-child(13){grid-column:2/span 2} } .tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:clamp(6px,.9vw,10px) 4px clamp(5px,.7vw,8px);min-width:0;border-radius:14px; background:linear-gradient(180deg, var(--deep), var(--floor-2));border:2px solid var(--floor-3);border:2px solid color-mix(in srgb, var(--fam) 55%, transparent);opacity:.72; transition:opacity .12s, transform .12s} .tile .pt-box{width:80%} /* names wrap to two lines rather than being cut off ("Baritone (T.C.)", "Euphonium (B.C.)") */ .t-name{font-weight:700;font-size:clamp(12.5px,1.25vw,15px);line-height:1.15;text-align:center;color:var(--text-hi);min-height:2.3em;display:flex;align-items:center; justify-content:center;max-width:100%;overflow-wrap:break-word;hyphens:manual} .tile:hover{opacity:.95} .tile.suggest{opacity:1;border-style:dashed;border-color:var(--yellow)} .tile.on{opacity:1;z-index:1;border-color:var(--fam-hi);box-shadow:0 0 0 4px var(--fam),var(--fam-glow),0 0 26px var(--fam);animation:pulse 1.2s ease-in-out infinite;transform:scale(1.04)} .tile.on:focus-visible{outline:3px solid var(--text-hi);outline-offset:6px} .tile .p1,.tile .p2{position:absolute;z-index:2;left:-6px;top:-8px;padding:1px 7px;border-radius:6px;font-family:var(--display);font-size:13px;color:var(--deep); background:var(--cyan);box-shadow:var(--glow-cyan);opacity:0;transform:rotate(-8deg)} .tile .p2{left:auto;right:-6px;background:var(--pink);box-shadow:var(--glow-pink);transform:rotate(8deg)} .tile.on .p1{opacity:1} /* two-player select: Player 1's tile keeps its 1P marker, Player 2's highlight is magenta with a 2P marker */ .phase2 .tile.on .p1{opacity:0} .phase2 .tile.on .p2,.phase2 .tile.p1-lock .p1{opacity:1} .phase2 .tile.p1-lock{opacity:1;border-color:var(--cyan)} .phase2 .tile.on{--fam:var(--pink);--fam-hi:var(--pink-hi);--fam-glow:var(--glow-pink)} .sp-view:not(.phase2) .tile.cpu{display:none} /* the Snare Drum on a game that needs pitch: shown, dimmed, and choosing it explains why */ .tile.no-play{opacity:.35;border-style:dashed} .tile.no-play .pt-box{filter:grayscale(1)} .fam-cpu{--fam:var(--white-ink);--fam-hi:var(--white);--fam-glow:var(--glow-white)} .phase2 .sp-title{color:var(--pink-hi);-webkit-text-stroke-color:var(--deep);text-shadow:0 4px 0 var(--deep),var(--glow-pink)} .ready.p2 p span+span{color:var(--pink-hi);text-shadow:0 6px 0 var(--deep),var(--glow-pink)} @keyframes pulse{50%{box-shadow:0 0 0 6px var(--fam-hi),var(--fam-glow),0 0 40px var(--fam)}} .legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;list-style:none;margin:14px 0 0;padding:0;font-size:14px;font-weight:700;color:var(--text-lo)} .legend li{display:flex;align-items:center;gap:6px} .legend li::before{content:"";width:14px;height:14px;border-radius:4px;border:2px solid var(--fam);box-shadow:var(--fam-glow)} /* phones: four columns (same order), the preview a short strip on top; the page scrolls down, never sideways */ @media (max-width:560px){ .grid{gap:6px} .tile{padding:6px 3px 5px} .t-name{font-size:12.5px} .preview{grid-template-columns:96px 1fr;padding:8px 10px;gap:10px} .pv-stage{border-radius:12px} .card-name{font-size:22px;margin-bottom:2px} .card-key,.card-five{font-size:13px} .card-stars{margin-top:4px;font-size:14px} .btn-select{min-height:46px;font-size:17px;margin-top:8px} .sp-marquee{height:50px;font-size:12px} } /* ---------- PLAYER 1 READY ---------- */ .ready{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(6,4,13,.82);pointer-events:none} .ready .flash{position:absolute;inset:0;background:var(--white-hi);opacity:0} .ready p{position:relative;display:flex;flex-direction:column;align-items:center;margin:0;font-family:var(--display);font-size:clamp(44px,11vw,110px);line-height:.95; text-transform:uppercase;font-style:italic;transform:skewX(-10deg);color:var(--yellow);-webkit-text-stroke:3px var(--red-ink);text-shadow:0 6px 0 var(--red-ink),var(--glow-yellow)} .ready p span+span{color:var(--cyan-hi);-webkit-text-stroke-color:var(--deep);text-shadow:0 6px 0 var(--deep),var(--glow-cyan)} .ready.go .flash{animation:flash .45s ease-out} .ready.go p{animation:slam .4s cubic-bezier(.2,1.6,.4,1)} @keyframes flash{0%{opacity:.95}100%{opacity:0}} @keyframes slam{0%{transform:skewX(-10deg) scale(2.2);opacity:0}100%{transform:skewX(-10deg) scale(1);opacity:1}} @media (prefers-reduced-motion:reduce){ .pv-pic,.tile.on,.ready.go p,.ready.go .flash,.sp-title.say{animation:none} .tile,.tile.on{transition:none;transform:none} } /* BACKUP / RESTORE (shared/backup.js): a small text button on the player card */ .card-backup{display:block;margin:4px auto 0;min-height:32px;padding:2px 10px;border:0;background:none;color:var(--text-lo);font-family:var(--text);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .card-backup:hover,.card-backup:focus-visible{color:var(--cyan-hi)} /* CREATE YOUR PLAYER (shared/avatar.js): the preview shows the student's avatar with the instrument as a badge; the card names the player and has EDIT PLAYER (Player 2 in Neon Face-Off: the guest, with SURPRISE ME) */ .pv-stage{position:relative} .pv-pic .av-box{width:100%} .pv-inst{position:absolute;right:3%;bottom:3%;width:32%;padding:3px;border-radius:12px;border:2px solid var(--pc);background:var(--deep);box-shadow:0 0 10px color-mix(in srgb,var(--pc) 45%,transparent);z-index:3} .pv-inst .pt-box{display:grid} .card-player{display:flex;align-items:center;gap:8px;margin:0 0 6px;min-width:0;font-size:16px;color:var(--yellow)} .card-player b{overflow-wrap:break-word;text-wrap:balance;font-family:var(--display);font-weight:400;letter-spacing:.02em;text-shadow:var(--glow-yellow)} .cp-tag{flex:none;padding:1px 7px;border-radius:6px;font-family:var(--display);font-size:13px;color:var(--deep);background:var(--cyan)} .phase2 .cp-tag{background:var(--pink)} .card-avatar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px} .card-avatar[hidden]{display:none} .btn-edit{flex:1 1 auto;min-height:44px;padding:4px 14px;border-radius:999px;border:2px solid var(--yellow);background:var(--deep);color:var(--yellow-hi); font-family:var(--display);font-size:14px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer} .btn-edit:hover{background:var(--floor-lit)} .btn-edit:focus-visible{outline:3px solid var(--cyan-hi);outline-offset:2px} .phase2 .btn-edit{border-color:var(--pink);color:var(--pink-hi)} .c-pic .av-box{width:100%} /* the LOCKER's name plates and shoes (shared/avatar-parts.js PLATES, SHOES) */ .lk-plate{display:grid;place-items:center;width:100%;aspect-ratio:1;font-weight:700;font-size:13px;color:var(--text-hi)} .lk-body{display:block;width:100%;aspect-ratio:1;border-radius:12%;background:var(--deep);overflow:hidden} .lk-body img{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;transform:scale(1.35);transform-origin:50% 88%} .sk-opt.locked[data-lk-bg] .lk-plate{filter:brightness(.5) saturate(.6)} .sk-opt.locked .lk-body img{filter:brightness(0) drop-shadow(0 0 1px var(--text-lo))}