:root { font-family: Arial, "Microsoft YaHei", sans-serif; color: #111; background: #969696; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.panel { width: min(560px, calc(100% - 32px)); margin: 7vh auto; padding: 28px 32px; background: #fff; border-radius: 10px; box-shadow: 0 8px 30px #0003; }
h1 { font-size: 24px; margin-top: 0; }
#participant-form { display: grid; gap: 14px; margin-top: 22px; }
#participant-form label { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; }
input, select, button { font: inherit; padding: 9px; }
button { cursor: pointer; background: #185abc; color: white; border: 0; border-radius: 5px; font-weight: 600; }
.error { min-height: 1.2em; margin: 0; color: #b42318; }
#jspsych-target { display: none; }
.jspsych-display-element { background: #969696; color: #000; font-family: Arial, sans-serif; }
.experiment-screen { position: relative; width: 100vw; height: 100vh; overflow: hidden; font-family: Arial, sans-serif; font-size: 50px; }
.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.loc { position: absolute; transform: translate(-50%, -50%); line-height: 1; }
.loc-1 { left: calc(50% - 150px); top: calc(50% - 150px); }
.loc-2 { left: calc(50% - 150px); top: calc(50% + 150px); }
.loc-3 { left: calc(50% + 150px); top: calc(50% - 150px); }
.loc-4 { left: calc(50% + 150px); top: calc(50% + 150px); }
.prompt { position: absolute; left: 50%; transform: translateX(-50%); }
.instruction { width: 600px; height: 300px; object-fit: fill; }
.surprise-prompt { width: 660px; height: 150px; top: calc(50% - 350px); }
.location-prompt { width: 390px; height: 60px; top: calc(50% - 270px); }
.feedback { position: absolute; width: 160px; height: 40px; transform: translateX(-50%); }
.identity-option { position: absolute; left: 50%; transform: translateX(-50%); white-space: pre; }
.identity-option .letter { display: inline-block; width: 100px; text-align: center; }
.identity-option .key { display: inline-block; width: 100px; text-align: center; }
.identity-1 { top: calc(50% - 150px); }
.identity-2 { top: calc(50% - 50px); }
.identity-3 { top: calc(50% + 50px); }
.identity-4 { top: calc(50% + 150px); }
.end-image { width: 340px; height: 40px; }
.post-form { width: min(760px, calc(100vw - 40px)); margin: 0 auto; padding-top: 15vh; font-size: 20px; text-align: left; }
.post-form label { display: block; margin: 26px 0; }
.post-form input { margin-left: 12px; width: 80px; }
.post-form button { font-size: 20px; }
.completion { font-size: 26px; text-align: center; padding-top: 35vh; }
@media (max-width: 700px) { .instruction { width: min(600px, 95vw); height: auto; } .surprise-prompt { width: min(660px, 95vw); height: auto; } }