*{box-sizing:border-box} :root{font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff;font-size:16px}body{margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #3b51ff;outline-offset:5px}button:disabled{cursor:default}main{min-height:100svh;display:flex;flex-direction:column}.world{height:calc(100svh - 210px);min-height:390px;position:relative;overflow:hidden;background:white}.terrain{position:absolute;width:100%;height:100%;object-fit:fill;display:block;user-select:none;pointer-events:none}header{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;padding:28px 3.2vw;gap:20px}h1{font-family:'Chalkduster','Comic Sans MS',cursive;font-weight:900;font-size:clamp(44px,6.8vw,100px);letter-spacing:-.085em;line-height:1.15;margin:0;transform:rotate(-3deg)}h1 span{display:inline-block}h1 span:nth-child(2n){transform:rotate(4deg) translateY(4px)}h1 span:nth-child(3n){transform:rotate(-5deg) scaleY(1.12)}.text-button{border:0;border-bottom:2px solid #111;background:none;padding:7px 0;font:700 16px 'Courier New',monospace;white-space:nowrap;margin-top:8px}.flagpole{position:absolute;left:50%;bottom:52%;height:clamp(125px,21vh,210px);width:clamp(110px,12vw,185px)}.pole{position:absolute;left:0;top:0;bottom:-8px;width:6px;background:#111;transform:rotate(1.6deg);border-radius:44% 33% 11% 40%}.cloth{position:absolute;left:4px;top:8px;width:100%;height:58%;border:3px solid #111;background:#ff2525;border-radius:3% 7% 6% 3%;display:grid;place-items:center;transform-origin:left center;animation:flap 1s steps(1,end) infinite;clip-path:polygon(0 0,19% 3%,37% 0,63% 6%,83% 3%,100% 5%,97% 42%,100% 93%,79% 96%,61% 91%,40% 95%,18% 92%,0 96%)}.cloth span{font:bold clamp(20px,3vw,40px) 'Courier New',monospace;color:#111;overflow:hidden;max-width:94%;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.05;padding:8px}.flagpole.lower .cloth{animation:none;transform:translateY(95px) scaleY(.05);opacity:0;transition:transform .32s,opacity .25s}.flagpole.raise .cloth{animation:hoist .5s ease-out,flap 1s .5s steps(1,end) infinite}@keyframes flap{0%,100%{transform:skewY(-2deg) scaleX(1)}33%{transform:skewY(2deg) scaleX(.96)}66%{transform:skewY(-1deg) scaleX(.99)}}@keyframes hoist{from{transform:translateY(95px) scaleY(.05);opacity:0}to{transform:translateY(0) scaleY(1);opacity:1}}.world-note{position:absolute;left:3.2vw;bottom:20px;font:16px 'Courier New',monospace;transform:rotate(-3deg)}.announcement{position:absolute;top:27%;left:0;width:100%;text-align:center;font:700 clamp(20px,3vw,34px) 'Courier New',monospace;pointer-events:none;z-index:3}.announcement span{display:inline-block;background:#ffe900;border:2px solid black;padding:10px 18px;transform:rotate(-2deg);box-shadow:4px 4px 0 #111}.control-bar{border-top:3px solid #111;display:grid;grid-template-columns:1fr .8fr 1.5fr;padding:24px 3.2vw 20px;gap:28px;background:#fff;flex:1;align-content:center;min-height:146px}.eyebrow{font:14px 'Courier New',monospace;letter-spacing:.025em;margin:0 0 10px}.holder,.clock{border-right:1px solid #111;padding-right:24px}#owner{font:700 clamp(22px,2.8vw,42px) 'Courier New',monospace;overflow-wrap:anywhere}#timer{font:clamp(25px,3.2vw,46px) 'Courier New',monospace;font-variant-numeric:tabular-nums;white-space:nowrap}.take{border:3px solid #111;background:#fff000;box-shadow:4px 4px 0 #111;width:100%;min-height:62px;padding:12px;font:900 clamp(18px,2vw,29px) 'Arial Narrow',Arial,sans-serif;transition:transform .08s,box-shadow .08s}.take:hover:not(:disabled){transform:rotate(-.7deg)}.take:active:not(:disabled){transform:translate(3px,3px);box-shadow:1px 1px 0 #111}.take:disabled{background:#eee;box-shadow:none}.action p{font-size:14px;line-height:1.4;margin:12px 0 0;max-width:580px}.prototype{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 3.2vw;background:#f0f0f0;border-top:1px dashed #aaa;font:12px 'Courier New',monospace;flex-wrap:wrap}.prototype div{display:flex;gap:20px;flex-wrap:wrap}.prototype button{font-size:12px;padding:3px 0;border:0;border-bottom:1px solid #777;background:none}.prototype b{font-size:12px}dialog{width:min(490px,calc(100% - 30px));max-height:calc(100svh - 30px);border:3px solid #111;padding:32px;background:#fff;box-shadow:8px 8px 0 #111;overflow:auto}dialog::backdrop{background:#fff9;backdrop-filter:blur(2px)}.close{position:absolute;right:14px;top:8px;font-size:32px;background:none;border:0;line-height:1;padding:4px}h2{font:900 40px 'Chalkduster','Comic Sans MS',cursive;letter-spacing:-2px;margin:6px 0 30px;line-height:1.2}form>label{display:block;margin:20px 0 8px;font:700 15px 'Courier New',monospace}input[type=text],input:not([type]){width:100%;padding:12px;border:2px solid black;border-radius:0;background:white;font:18px 'Courier New',monospace}fieldset{padding:0;border:0;margin:22px 0}legend{font:700 15px 'Courier New',monospace;margin-bottom:10px}.swatches{display:flex;gap:12px;flex-wrap:wrap}.swatches label{position:relative;display:block;width:49px;height:45px}.swatches input{appearance:none;margin:0;width:100%;height:100%;border:2px solid #111;background:var(--swatch);cursor:pointer}.swatches input:checked{box-shadow:3px 3px 0 #111;transform:rotate(-5deg)}.swatches input:checked:after{content:'✓';display:block;text-align:center;font-size:26px;font-weight:bold}.swatches span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.optional{font-weight:normal;font-size:14px}.warning{border-top:1px dashed #aaa;padding-top:20px;margin:24px 0;font-size:15px;line-height:1.5}.demo-note{font:13px/1.5 'Courier New',monospace;color:#555}#history-list{list-style:none;padding:0;margin:24px 0 0}#history-list li{border-top:1px solid #aaa;padding:16px 0;display:grid;grid-template-columns:28px 1fr;gap:12px}.history-color{width:25px;height:20px;border:2px solid #111;transform:rotate(-4deg)}.history-name{font:700 18px 'Courier New',monospace;overflow-wrap:anywhere}.history-meta{font:13px/1.5 'Courier New',monospace;color:#555;margin-top:6px}
@media(max-width:650px){.world{height:57svh;min-height:390px}header{padding:22px 20px}h1{font-size:49px}.text-button{font-size:14px}.flagpole{width:100px;height:100px}.control-bar{grid-template-columns:1fr 1fr;gap:20px 16px;padding:20px}.holder{padding-right:12px}.clock{border:0;padding:0}#owner{font-size:25px}#timer{font-size:29px}.action{grid-column:1/-1}.take{font-size:22px;min-height:60px}.action p{font-size:14px;margin-top:12px}.world-note{left:20px;font-size:13px;bottom:15px}.prototype{padding:14px 20px;line-height:1.6}.prototype button{font-size:13px}.announcement{top:28%;font-size:20px}.announcement span{padding:8px 10px}dialog{padding:28px 22px}h2{font-size:34px}.eyebrow{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

#flag-symbol{font-size:clamp(13px,1.8vw,24px)}.cloth{width:clamp(150px,17vw,250px);height:65%}#form-error{color:#a80000;font-size:15px;line-height:1.4}.prototype.offline{background:#ffeab8}@media(max-width:650px){.cloth{width:155px}.flagpole{left:50%}#flag-symbol{font-size:16px}.terrain{object-fit:fill}}
