/* Make Your Own Game, I'm Lazy: "Gzowo 90s" (GeoCities 1998 pastiche). Player drawings stay on white mats so they are the loudest thing. */
:root{
  --pink:#ff00ff;--cyan:#00ffff;--lime:#00ff00;--yellow:#ffff00;--red:#ff0000;--blue:#0000cc;--navy:#000080;--silver:#c0c0c0;
  --comic:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive;--times:"Times New Roman",Times,serif;--courier:"Courier New",Courier,monospace;--impact:Impact,"Haettenschweiler","Arial Black",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:8px 6px 30px;font-family:var(--comic);font-size:15px;color:#000;background-color:#00007a;
  background-image:repeating-linear-gradient(135deg,#ff0000 0 40px,#ff8000 40px 80px,#ffff00 80px 120px,#00ff00 120px 160px,#00ffff 160px 200px,#0000ff 200px 240px,#ff00ff 240px 280px,#ff0000 280px 320px)}
button,input,textarea,select{font-family:var(--comic);font-size:14px}
.frame{max-width:1180px;margin:0 auto;border:6px ridge var(--pink);background:#ffffcc;box-shadow:8px 8px 0 rgba(0,0,0,.6)}
.topbar{background:#000;color:var(--lime);font-family:var(--courier);font-weight:bold;font-size:14px;padding:4px 0;border-bottom:3px solid var(--lime)}
.marquee{overflow:hidden;white-space:nowrap}
.marquee>span{display:inline-block;padding-left:100%;animation:march 26s linear infinite}
@keyframes march{to{transform:translateX(-100%)}}
.blink{animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{visibility:hidden}}
.hr90{height:8px;border:0;margin:10px 0;background:repeating-linear-gradient(90deg,#f00 0 12px,#ff0 12px 24px,#0f0 24px 36px,#0ff 36px 48px,#f0f 48px 60px)}
.banner{padding:14px 10px 10px;text-align:center;background:radial-gradient(circle at 50% 120%,#2a0a5e 0%,#12043a 45%,#05010f 100%);border-bottom:5px double #000}
.eyebrow{font-weight:bold;font-size:14px;color:#ff0;text-shadow:1px 1px 0 #000,2px 2px 0 #f00;margin-bottom:4px}
.wordart{margin:0;font-family:var(--impact);font-size:clamp(34px,7vw,76px);line-height:.98;letter-spacing:2px;text-transform:uppercase;color:#ffe14d;-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:4px 4px 0 #000,7px 7px 0 rgba(255,0,255,.85);transform:scaleY(1.12)}
.tagline{margin:14px 0 4px;font-size:clamp(14px,2.4vw,20px);font-weight:bold;color:#ffe14d;text-shadow:2px 2px 0 #b30000}
.tagline .sig{color:#7fdfff;font-size:.8em}
.page{padding:12px 16px 20px}
.h2{font-family:var(--impact);font-size:34px;margin:6px 0 10px;color:var(--navy);text-shadow:2px 2px 0 #ff0;letter-spacing:1px}
.hint{color:#444;font-size:13px;margin:4px 0}
.err{color:#c00;font-weight:bold;margin:6px 0;white-space:pre-wrap}
.ok{color:#080;font-weight:bold}
.lbl{display:block;font-weight:bold;margin:8px 0 3px;font-size:13px}
.center{text-align:center}
.pad{padding:10px}
.sp{flex:1}
.bigtxt{font-family:var(--impact);font-size:26px;letter-spacing:1px;color:var(--navy);margin:6px 0}

/* windows and buttons */
.win{background:var(--silver);border:3px outset #fff;border-right-color:#404040;border-bottom-color:#404040;margin:10px 0}
.win-title{background:linear-gradient(90deg,var(--navy),#1084d0);color:#fff;font-weight:bold;font-size:13px;padding:3px 6px;display:flex;align-items:center;gap:8px;letter-spacing:.5px}
.win-title .x{margin-left:auto;background:var(--silver);color:#000;border:2px outset #fff;padding:0 7px;font-weight:bold;cursor:pointer;font-size:12px}
.blink-dot{width:10px;height:10px;background:var(--lime);border:1px solid #000;display:inline-block;animation:blink 1.4s steps(1,end) infinite}
.btn{background:var(--silver);border:3px outset #fff;border-right-color:#404040;border-bottom-color:#404040;padding:5px 12px;cursor:pointer;color:#000;font-weight:bold}
.btn:hover{background:#ffff99}
.btn:active,.btn.on{border-style:inset;background:#ffec55}
.btn:disabled{color:#888;cursor:not-allowed;background:var(--silver)}
.btn.s{padding:2px 8px;font-size:12px}
.btn.big{padding:9px 18px;font-size:16px}
.btn.huge{padding:12px 30px;font-size:20px;font-family:var(--impact);letter-spacing:1px;background:#7cff7c}
.btn.huge.on{background:#ffd54d}
.btn.warn{background:#ffb3b3}
.row2{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.chk{display:flex;align-items:center;gap:6px;margin:8px 0;font-size:14px}
input[type=text],textarea,select{border:3px inset #fff;border-right-color:#fff;background:#fff;padding:5px 7px;width:100%}
textarea{resize:vertical}
.nameinp{max-width:260px;font-weight:bold}
.codeinp{max-width:120px;text-transform:uppercase;font-family:var(--impact);font-size:28px;letter-spacing:6px;text-align:center}
.chip{display:inline-block;color:#fff;font-size:11px;font-weight:bold;padding:1px 7px;margin:2px 3px 2px 0;border:2px solid #000;text-shadow:1px 1px 0 #000}
.chip.dark{background:#333}
.chip.dark b{cursor:pointer;color:#f66}
.chip-btn{background:#fff;border:2px solid #000;padding:1px 8px;margin:2px 4px 2px 0;cursor:pointer;font-size:12px;font-weight:bold}
.chip-btn:hover{background:#ff0}
.note{font-size:12px;background:#ffc;border:1px dashed #000;padding:4px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#000;color:#0f0;font-family:var(--courier);font-weight:bold;padding:10px 16px;border:3px ridge var(--pink);z-index:9999;max-width:90vw;transition:opacity .35s}
.toast.out{opacity:0}

/* menu */
.menu-wrap{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:16px;padding:10px 18px}
@media(max-width:820px){.menu-wrap{grid-template-columns:1fr}}
.menu{display:flex;flex-direction:column;gap:10px}
.bigbtn{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:12px 16px;cursor:pointer;background:linear-gradient(#fff,#d6d6d6);border:4px outset #fff;border-right-color:#404040;border-bottom-color:#404040;font-family:var(--impact)}
.bigbtn b{font-size:30px;letter-spacing:1px;color:var(--navy);font-weight:normal}
.bigbtn small{font-family:var(--comic);font-size:13px;color:#333}
.bigbtn:hover{background:#ffff99}
.bigbtn:hover b{color:#c00}
.how{align-self:start}
.how ol{margin:8px 14px 12px 28px;padding:0;line-height:1.5}
.how li{margin-bottom:6px}
.aistat{font-family:var(--courier);font-size:12px;font-weight:bold;padding:4px 8px;border:2px solid #000;background:#eee}
.aistat.ok{background:#aff7a0}.aistat.warn{background:#ffe08a}.aistat.bad{background:#ffb3b3}
.foot{text-align:center;padding:6px 10px 12px;font-size:12px}
.counter{background:#000;color:#0f0;font-family:var(--courier);padding:2px 8px;border:2px inset #888}
.back{margin-bottom:6px}

/* lobby */
.rooms{display:flex;flex-direction:column;gap:6px}
.room-row{display:grid;grid-template-columns:70px 1fr 110px 90px 70px;gap:8px;align-items:center;background:#fff;border:2px solid #000;padding:5px 8px}
.room-row .code{font-family:var(--impact);font-size:22px;letter-spacing:3px;color:var(--navy)}

/* room header */
.roomhead{display:flex;align-items:center;gap:12px;padding:6px 10px;background:#000;border-bottom:3px solid var(--lime);flex-wrap:wrap}
.roomcode{background:#ff0;border:3px outset #fff;cursor:pointer;font-family:var(--impact);font-size:16px;padding:2px 10px;letter-spacing:1px}
.roomcode b{font-size:20px;letter-spacing:4px;color:var(--navy)}
.roomcode small{font-family:var(--comic);font-size:10px;letter-spacing:0;color:#555}
.solo{color:var(--lime);font-family:var(--courier)}
.rname{color:#ff0;font-weight:bold}
.rh-players{flex:1;display:flex;gap:6px;flex-wrap:wrap}
.pl{font-weight:bold;font-size:13px;padding:2px 9px;border:2px solid #fff;text-shadow:none}
.pl i{cursor:pointer;font-style:normal;opacity:.8}
.room-content{padding:10px 14px 16px}

/* board */
.board .win{margin:8px 0}
.pb{position:relative;background:#fff;border:3px inset #fff}
.pb-mirror,.pb-ta{margin:0;padding:10px 12px;font:17px/1.55 var(--comic);width:100%;min-height:118px;max-height:240px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;letter-spacing:0;border:0;box-sizing:border-box}
.pb-mirror{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:#000}
.pb-ta{position:relative;display:block;background:transparent;color:transparent;caret-color:#000;resize:none;outline:none;overflow:auto;height:150px}
.pb-ta::placeholder{color:#8a8a8a}
.pb.locked{background:#eee}
.pb-run{border-bottom:4px solid var(--c);padding-bottom:0}
.rc{position:relative;display:inline-block;width:0;height:1em;vertical-align:text-bottom}
.rc-bar{position:absolute;left:-1px;top:-1px;width:3px;height:1.25em}
.rc-name{position:absolute;left:0;top:-1.5em;font:bold 11px var(--comic);color:#fff;padding:0 5px;white-space:nowrap;text-shadow:1px 1px 0 #000}
.pb-count{text-align:right;font-size:11px;color:#555;margin-top:2px}
.pb-chips{margin-top:4px}
.pb-chips .lbl{display:inline;margin-right:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.card{background:#fff;border:3px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.5);padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:3px;text-align:left;font-family:var(--comic)}
.card:hover{background:#ffff99;transform:translate(-1px,-1px)}
.card.needs{border-color:#c00;border-style:dashed}
.card.add{align-items:center;justify-content:center;min-height:210px;background:repeating-linear-gradient(45deg,#fff 0 10px,#f4f4f4 10px 20px);border-style:dashed;font-weight:bold;color:var(--navy)}
.card.add b{font-size:46px;line-height:1}
.card.add.px{border-color:var(--pink)}
.card.add small{font-weight:normal;color:#555}
.thumb-wrap{position:relative;background:conic-gradient(#e8e8e8 25%,#fff 0 50%,#e8e8e8 0 75%,#fff 0) 0 0/16px 16px;border:2px solid #000;aspect-ratio:1}
.thumb{width:100%;height:100%;display:block}
.badge{position:absolute;top:2px;font:bold 9px var(--courier);padding:1px 4px;border:1px solid #000}
.badge.ai{right:2px;background:#0ff}.badge.px{left:2px;background:var(--pink);color:#fff}.badge.snd{left:2px;bottom:2px;top:auto;background:#ff0}.badge.rig{right:2px;bottom:2px;top:auto;background:#0f0}
.cname{font-weight:bold;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdesc{font-size:11px;color:#444;max-height:2.7em;overflow:hidden}
.needs .cdesc{color:#c00;font-weight:bold}
.role{align-self:flex-start;font:bold 10px var(--courier);padding:0 5px;border:1px solid #000;text-transform:uppercase}
.role.r-avatar{background:#7cff7c}.role.r-cursor{background:#7fdfff}.role.r-bg{background:#ffd27f}
.who{display:flex;gap:3px;flex-wrap:wrap}
.dot{width:20px;height:20px;border:2px solid #000;font:bold 11px var(--comic);display:inline-flex;align-items:center;justify-content:center}
.donebar{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#000;color:#fff;padding:8px 12px;border:3px ridge var(--lime);margin-top:10px;z-index:5}
.donebar .hint{color:#aaa}
.donebar .chk{color:#fff}
.donebar .dis{opacity:.7}
.ai-toggle small{color:#aaa}
.right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.readyrow{display:flex;gap:8px;flex-wrap:wrap}
.rd{display:inline-flex;align-items:center;gap:5px;border:2px solid;padding:1px 7px;font-weight:bold;font-size:12px}
.rd i{width:11px;height:11px;border:2px solid #fff;display:inline-block}

/* editor */
.ed-back{position:fixed;inset:0;background:rgba(0,0,20,.72);z-index:1000;display:flex;align-items:center;justify-content:center;padding:14px}
.ed{width:min(1280px,100%);height:min(860px,100%);margin:0;display:flex;flex-direction:column;box-shadow:10px 10px 0 rgba(0,0,0,.6)}
.ed-body{flex:1;display:grid;grid-template-columns:190px 1fr 330px;min-height:0}
.ed-tools{padding:8px;overflow:auto;border-right:2px groove #fff;display:flex;flex-direction:column;gap:6px}
.ed-stage{display:flex;align-items:center;justify-content:center;background:#808080;min-width:0;min-height:0;overflow:hidden;padding:4px}
.ed-stage.alt{background:#c8c8c8}
.ed-view{position:relative;background:conic-gradient(#e0e0e0 25%,#fff 0 50%,#e0e0e0 0 75%,#fff 0) 0 0/24px 24px;border:3px solid #000;touch-action:none;cursor:crosshair}
.ed-cv,.ed-over{position:absolute;left:0;top:0}
.ed-over{touch-action:none}
.ed-side{border-left:2px groove #fff;display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;gap:2px;padding:6px 6px 0}
.tab{background:#b0b0b0;border:2px outset #fff;border-bottom:0;padding:4px 12px;cursor:pointer;font-weight:bold}
.tab.on{background:var(--silver);margin-bottom:-2px;position:relative}
.pane{flex:1;overflow:auto;padding:10px;border-top:2px solid #fff;display:flex;flex-direction:column;gap:6px}
.tool{background:var(--silver);border:3px outset #fff;border-right-color:#404040;border-bottom-color:#404040;padding:6px;cursor:pointer;font-weight:bold;text-align:left}
.tool.on{border-style:inset;background:#ffec55}
.pal{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.sw{aspect-ratio:1;border:2px solid #000;cursor:pointer;padding:0}
.sw.on{outline:3px solid #f0f;outline-offset:1px}
.colpick{width:100%;height:34px;padding:0;border:2px solid #000}
.ed-tools hr{width:100%;border:1px solid #888;margin:2px 0}
.anims{display:flex;flex-wrap:wrap;gap:3px}
.rig-cv{aspect-ratio:1;background:conic-gradient(#e0e0e0 25%,#fff 0 50%,#e0e0e0 0 75%,#fff 0) 0 0/20px 20px;border:2px solid #000;cursor:crosshair}
.ptlist{display:flex;flex-wrap:wrap}
.snd{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media(max-width:1000px){.ed-body{grid-template-columns:150px 1fr 260px}}

/* review */
.qcard{display:flex;background:#fff;border:3px solid #000;margin:10px 0;box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.qstripe{width:14px;flex:none}
.qbody{padding:8px 12px;flex:1}
.qto{font-size:13px;color:#333}
.pn{padding:0 6px;margin:0 1px;border:2px solid #000}
.qtext{font-size:19px;font-weight:bold;margin:6px 0}
.qopts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.qans{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ans{border:2px solid;padding:1px 8px;background:#fffbe0;font-size:13px}
.evalhead{display:flex;gap:16px;align-items:center;margin-bottom:8px}
.score{font-family:var(--impact);font-size:64px;line-height:1;border:5px ridge var(--pink);padding:6px 14px;background:#ff0;min-width:130px;text-align:center}
.score small{font-size:22px}
.score.shi{background:#7cff7c}.score.slo{background:#ff9d9d}
.missing{background:#fff;border:3px solid #000;padding:6px 12px;margin:8px 0}
.missing h3{margin:2px 0 6px;font-family:var(--impact);color:var(--navy);font-weight:normal;font-size:22px}
.mrow{margin:4px 0}
.mrow em{color:#a0a;font-size:12px}
.tips{font-size:13px}
.spinner{display:inline-block;width:44px;height:44px;vertical-align:middle;margin:0 8px;border-radius:50%;background:conic-gradient(from 0deg,#0f0,#0ff,#00f,#f0f,#f00,#ff0,#0f0);box-shadow:inset -6px -6px 10px rgba(0,0,0,.55),0 0 8px #fff;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loglines{background:#000;color:#0f0;font-family:var(--courier);font-size:13px;text-align:left;padding:10px;margin:12px auto;max-width:640px;min-height:120px;border:3px inset #888}
.ll.last{color:#ff0}

/* play */
.playwrap{display:flex;flex-direction:column;gap:8px}
.playbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#000;padding:6px 10px;border:3px ridge var(--lime)}
.playbar .gtitle{color:#ff0;font-family:var(--impact);font-size:22px;letter-spacing:1px;font-weight:normal}
.playbar .hint{color:#aaa}
.stage{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 200px);background:#000;border:4px ridge var(--pink);margin:0 auto}
.game-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.playstat{font-family:var(--courier);font-size:12px;color:#080}
.playstat.bad{color:#c00}

/* gallery */
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:10px}
.gcard{padding:8px;margin:0;display:flex;flex-direction:column;gap:5px}
.gthumb{aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center;color:#888;border:2px inset #fff;overflow:hidden}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.gtitle{font-family:var(--impact);font-size:20px;color:var(--navy);letter-spacing:.5px}
.gby{font-size:12px;color:#333}
.gprompt{font-size:12px;color:#555;max-height:3.4em;overflow:hidden}
@media(max-width:700px){.room-row{grid-template-columns:60px 1fr 70px}.room-row .rp,.room-row .rph{display:none}}

/* feedback dialog */
.fb-back{position:fixed;inset:0;background:rgba(0,0,20,.72);z-index:1100;display:flex;align-items:center;justify-content:center;padding:14px}
.win.fb{width:min(620px,100%);margin:0;box-shadow:8px 8px 0 rgba(0,0,0,.6)}
.fb-chips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 10px}
.chip-btn.fb{padding:4px 10px;font-size:13px}
.chip-btn.fb.on{background:#ffec55;border-width:3px}
.win.fb textarea{margin-bottom:10px}

/* unlock box */
.unl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}
.unl .lbl.inl{display:inline;margin:0}
.unl-inp{width:150px !important;padding:3px 6px !important}
.unl-ok{font-family:var(--courier);font-weight:bold;color:#060;background:#aff7a0;border:2px solid #000;padding:2px 8px}
.buildwin .unl{justify-content:center;margin:8px 0}