*{box-sizing:border-box}html,body{margin:0;height:100%;background:#101c1b;color:#eff4ed;font-family:system-ui,Segoe UI,sans-serif}body{display:flex;flex-direction:column}button,a,input,select{font:inherit}button,select,input{border:1px solid #45625b;border-radius:10px;background:#1a302b;color:inherit;padding:10px 14px}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c4f28a;outline-offset:3px}[hidden]{display:none!important}.top{height:64px;flex-shrink:0;padding:10px 24px;border-bottom:1px solid #30453d;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{text-decoration:none;font-weight:800;letter-spacing:2px;font-size:14px}.brand span{color:#c4f28a}.tools{display:flex;align-items:center;gap:8px}.tools select{max-width:130px;font-size:13px}#connection{font-size:12px;color:#bfccb9}#main{flex:1;min-height:0}.landing{max-width:1250px;margin:auto;padding:55px 28px 60px}.eyebrow{text-transform:uppercase;letter-spacing:3px;color:#c4f28a;font-size:12px}.landing h1{font-size:clamp(38px,6vw,76px);line-height:1.05;letter-spacing:-3px;max-width:850px;margin:18px 0}.landing .lead{font-size:19px;line-height:1.6;color:#b7c8c0;max-width:620px}.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:38px}.game{display:flex;flex-direction:column;border:1px solid #3a5048;border-radius:20px;overflow:hidden;background:#192b26}.game-art{height:180px;display:grid;place-items:center;font-size:70px;background:radial-gradient(ellipse at 70% 20%,#5f8051,#233d34)}.game-art img{width:100%;height:100%;object-fit:cover}.game-info{padding:22px;display:flex;flex-direction:column;align-items:flex-start;flex:1}.game-info h2{margin:6px 0;font-size:25px}.game-info p{line-height:1.6;color:#bacac2;flex:1}.game-info small{color:#c4f28a}.primary{background:#c4f28a;color:#12220d;border-color:#c4f28a;font-weight:750}.game-info button{width:100%}.room{display:flex;height:100%;min-height:0}.stage{flex:1;min-width:0;min-height:0;background:#101c1b;position:relative}.stage iframe{display:block;width:100%;height:100%;border:0}.room-side{width:230px;flex-shrink:0;padding:20px 18px;border-left:1px solid #344f44;display:flex;flex-direction:column;gap:12px;overflow:auto}.room-side h2{font-size:19px;margin:0}.room-side img{width:190px;height:190px;max-width:100%;border-radius:12px;background:white;align-self:center}.room-side .invite{font-size:12px;overflow-wrap:anywhere;color:#c4f28a}.room-side button,.room-side select{width:100%}.room-side label{font-size:12px;display:block;margin-bottom:10px}.room-side select{margin-top:5px;font-size:13px}.room-side p{font-size:13px;line-height:1.5;color:#c1cec7;margin:0}.room-side .controls{display:grid;gap:8px}.organiser{border-top:1px solid #3c5248;padding-top:12px}.player-screen{height:100%;display:flex;flex-direction:column}.player-screen .stage{flex:1}.loading{padding:40px}.dialog{position:fixed;inset:0;z-index:200;background:#000b;display:grid;place-items:center;padding:16px}.dialog form{background:#1b3029;border:1px solid #66806d;border-radius:20px;padding:24px;width:min(440px,100%);max-height:95vh;overflow:auto}.dialog h2{margin-top:0}.dialog label{display:block;margin:14px 0}.dialog input{width:100%;margin-top:8px}.dialog canvas{display:block;width:240px;height:240px;max-width:100%;margin:16px auto;touch-action:none;border:2px solid #c4f28a;border-radius:10px}.dialog p{font-size:13px;line-height:1.5;color:#c1cec7}.dialog .actions{display:flex;gap:10px;justify-content:flex-end}#notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:14px 20px;border-radius:12px;background:#eed48c;color:#241c0b;z-index:300;max-width:90%;display:none}#notice.show{display:block}.room-message{font-size:12px;color:#c4f28a;min-height:18px}@media(max-width:800px){.top{height:56px;padding:8px 12px}.brand{font-size:11px;letter-spacing:1px}.tools{gap:5px}.tools select{max-width:108px;padding:7px}.room-side{width:175px;padding:12px}.room-side img{height:145px;width:145px}.room-side h2{font-size:16px}.landing{padding:32px 20px}.landing h1{letter-spacing:-1.5px}.tools #connection{max-width:90px;font-size:10px}}@media(max-width:520px){.room{flex-direction:column}.room .stage{min-height:55vh}.room-side{width:100%;border-left:0;border-top:1px solid #344f44;display:grid;grid-template-columns:110px 1fr;gap:8px 14px;max-height:40vh}.room-side img{width:110px;height:110px;grid-column:1;grid-row:1/5}.room-side>*{grid-column:2}.room-side .organiser{grid-column:1/3}.room-side h2{font-size:14px}.room-side .invite{font-size:10px}.player-screen .stage{min-height:0}}@media(prefers-reduced-motion:no-preference){.game{animation:arrive .45s ease-out}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}

.invite-player{display:inline-flex;align-items:center;white-space:nowrap;font-size:12px}.invite-player span{margin-left:7px}.invite-player svg{flex-shrink:0}@media(max-width:520px){body[data-role=controller] .top .brand{display:none}body[data-role=controller] .top .tools{width:100%;justify-content:space-between}body[data-role=controller] .invite-player{padding:8px}body[data-role=controller] #profile{max-width:65px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:520px){body[data-role=controller] .top{height:auto;min-height:56px}body[data-role=controller] .tools{flex-wrap:wrap}}