:root { --ink:#193a4a; --muted:#496574; --sea:#087eaa; --sea-deep:#046487; --coral:#d9524d; --line:rgba(25,58,74,.16); }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; padding:48px 20px; overflow-x:hidden; color:var(--ink); font-family:"Trebuchet MS","Segoe UI",sans-serif; background:radial-gradient(ellipse at 16% 12%,rgba(255,255,255,.55) 0 6%,transparent 6.3%),radial-gradient(ellipse at 78% 17%,rgba(255,255,255,.32) 0 5%,transparent 5.3%),linear-gradient(180deg,#82cae5 0%,#addbe7 41%,#d7e1d7 62%,#efd5a5 62.2%,#f5dcae 100%); background-attachment:fixed; }
body::before,body::after { position:fixed; z-index:-1; display:block; content:""; pointer-events:none; }
body::before { right:-7vw; bottom:14vh; left:-7vw; height:13vh; opacity:.45; background:repeating-radial-gradient(ellipse at center,transparent 0 15px,rgba(255,255,255,.78) 16px 18px,transparent 19px 31px); }
body::after { right:0; bottom:0; left:0; height:21vh; opacity:.38; background-image:radial-gradient(rgba(126,91,44,.38) .75px,transparent .9px); background-size:12px 12px; }
.container { position:relative; width:min(100%,940px); min-height:460px; margin:0 auto; padding:clamp(30px,5vw,56px); overflow:hidden; text-align:center; background:rgba(255,253,245,.94); border:1px solid rgba(255,255,255,.9); border-radius:8px; box-shadow:0 20px 45px rgba(23,73,93,.22),0 3px 8px rgba(25,58,74,.12); }
.container::before { position:absolute; top:0; right:0; left:0; height:8px; content:""; background:repeating-linear-gradient(90deg,var(--coral) 0 24px,#f1bd75 24px 48px,var(--sea) 48px 72px,#f6e8c8 72px 96px); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:8px; color:var(--ink); font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.25rem,5vw,3.45rem); font-weight:700; letter-spacing:0; line-height:1.05; }
h1::after { display:block; width:62px; height:4px; margin:16px auto 0; content:""; background:var(--coral); border-radius:2px; }
h2 { margin-bottom:24px; color:var(--muted); font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.45rem,3vw,2rem); line-height:1.15; }
.hidden { display:none; }
#loginSection { width:min(100%,420px); margin:34px auto 0; padding:28px; text-align:left; background:rgba(233,248,244,.58); border:1px solid rgba(8,126,170,.16); border-radius:6px; }
#loginSection h2 { text-align:center; }
#loginSection label { display:block; margin-bottom:9px; color:var(--muted); font-size:1rem; font-weight:700; }
#passwordInput { width:100%; height:48px; margin-bottom:14px; padding:0 14px; color:var(--ink); font:inherit; background:rgba(255,255,255,.84); border:1px solid rgba(25,58,74,.28); border-radius:4px; outline:none; transition:border-color 160ms ease,box-shadow 160ms ease; }
#passwordInput:focus { border-color:var(--sea); box-shadow:0 0 0 3px rgba(8,126,170,.16); }
button { min-height:42px; padding:10px 18px; color:#fff; font:inherit; font-size:.93rem; font-weight:700; cursor:pointer; background:var(--sea); border:0; border-radius:4px; box-shadow:0 3px 0 var(--sea-deep),0 6px 12px rgba(4,100,135,.17); transition:transform 160ms ease,background-color 160ms ease,box-shadow 160ms ease; }
button:hover:not(:disabled) { background:var(--sea-deep); box-shadow:0 4px 0 #034b66,0 9px 16px rgba(4,100,135,.2); transform:translateY(-2px); }
button:active:not(:disabled) { box-shadow:0 1px 0 #034b66; transform:translateY(2px); }
button:focus-visible { outline:3px solid rgba(217,82,77,.52); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.65; box-shadow:none; }
#loginButton { width:100%; }
#assignmentSection { margin-top:34px; }
#studentName { display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:28px; padding:9px 14px; color:var(--muted); font-size:1rem; font-weight:700; background:rgba(233,248,244,.7); border:1px solid rgba(8,126,170,.14); border-radius:999px; }
#changeChoiceButton { min-height:auto; padding:5px 9px; color:var(--sea-deep); font-size:.78rem; background:transparent; border:1px solid rgba(8,126,170,.38); box-shadow:none; }
#tentContainer { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; align-items:stretch; }
.tent { position:relative; display:flex; flex-direction:column; min-width:0; min-height:245px; padding:48px 22px 20px; overflow:hidden; text-align:center; background:linear-gradient(150deg,#fffef8,#f2ead6); border:1px solid rgba(127,91,43,.22); border-radius:6px; box-shadow:0 9px 18px rgba(71,76,58,.14); transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease; }
.tent::before { position:absolute; top:12px; left:50%; width:54px; height:30px; content:""; background:linear-gradient(90deg,#e5c281 0 47%,#c78f54 48% 52%,#e5c281 53%); clip-path:polygon(50% 0,100% 100%,0 100%); transform:translateX(-50%); }
.tent:hover:not(.disabled-tent) { border-color:rgba(8,126,170,.44); box-shadow:0 15px 24px rgba(71,76,58,.2); transform:translateY(-5px); }
.tent h3 { margin-bottom:12px; color:var(--ink); font-family:Georgia,"Times New Roman",serif; font-size:1.38rem; line-height:1.2; }
.tent-capacity-info { margin-bottom:8px; color:var(--muted); font-size:.9rem; line-height:1.55; }
.student-list { min-height:22px; margin:0 0 12px; padding:0; color:var(--muted); list-style:none; }
.student-list li { margin-bottom:4px; font-size:.84rem; }
.tent button { align-self:center; margin-top:auto; }
.tent.selected { background:linear-gradient(150deg,#f4fffd,#d8f2ee); border:2px solid var(--sea); box-shadow:0 0 0 4px rgba(8,126,170,.14),0 15px 24px rgba(71,76,58,.17); }
.tent.selected::before { background:linear-gradient(90deg,#76c8c0 0 47%,#087eaa 48% 52%,#76c8c0 53%); }
.tent.disabled-tent { background:linear-gradient(150deg,#efefea,#e4e0d6); filter:saturate(.65); }
#assignmentSection > button { margin:26px 5px 0; }
#logoutButton { background:var(--coral); box-shadow:0 3px 0 #ad3738,0 6px 12px rgba(173,55,56,.18); }
#logoutButton:hover:not(:disabled) { background:#bd423e; box-shadow:0 4px 0 #903033,0 9px 16px rgba(173,55,56,.2); }
@media (max-width:600px) { body { padding:20px 12px; } .container { min-height:calc(100vh - 40px); padding:35px 20px 30px; } #loginSection { padding:22px 18px; } #tentContainer { grid-template-columns:1fr; gap:16px; } .tent { min-height:225px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }