:root{--ink:#143b42;--mint:#00b99e;--yellow:#ffe574;--coral:#f67843;--cream:#fff8dd}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#092d38;color:var(--ink);font-family:'Trebuchet MS',Arial,sans-serif;touch-action:manipulation}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:0}button:disabled{cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #f34f9b;outline-offset:3px}.hidden{display:none!important}#app{width:100%;height:100dvh;max-width:1500px;margin:auto;position:relative;background:var(--cream)}.screen{width:100%;height:100%;position:relative}#loading{position:absolute;inset:0;background:var(--cream);z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;font-size:18px}#loading span{font-size:12px}#rotate{display:none}#menu{display:grid;grid-template-columns:54% 46%;background:radial-gradient(#35897415 1px,transparent 1px) 0 0/9px 9px,var(--cream)}.menu-art{position:relative;overflow:hidden;background:#70ced0}.menu-art:after{content:'';position:absolute;top:0;bottom:0;right:-8px;width:16px;background:var(--cream);clip-path:polygon(50% 0,100% 2%,40% 5%,80% 9%,30% 14%,90% 20%,20% 26%,80% 33%,30% 40%,90% 48%,20% 56%,80% 64%,30% 72%,90% 81%,30% 90%,60% 100%,100% 100%,100% 0)}#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.universe{position:absolute;top:4%;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:8px;font-size:9px;font-weight:900;letter-spacing:1.4px}.universe img{width:70px;height:49px;object-fit:contain}.title-art{position:absolute;top:16%;left:6%;width:87%;height:37%;object-fit:contain;filter:drop-shadow(0 4px 0 #183e4422)}.edition{position:absolute;bottom:4%;left:15%;right:15%;background:var(--yellow);border:2px solid var(--ink);border-radius:30px;text-align:center;font-weight:900;font-size:9px;letter-spacing:1.7px;padding:8px;transform:rotate(-2deg);box-shadow:2px 3px 0 var(--ink)}.menu-panel{padding:clamp(14px,2.5vw,40px);display:flex;flex-direction:column;justify-content:center;min-width:0}.menu-panel header{display:flex;align-items:center;justify-content:space-between;gap:5px}.eyebrow{font-size:9px;letter-spacing:1.2px;font-weight:900}.icon{width:44px;height:44px;min-width:44px;border:2px solid var(--ink);border-radius:50%;background:var(--cream);font-size:24px;font-weight:900}.menu-panel h1{font-size:clamp(24px,3.7vw,52px);line-height:1.02;letter-spacing:-1.5px;font-weight:900;margin:11px 0 10px}.menulead{font-size:12px;line-height:1.5;margin:0 0 15px}.modes{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mode{background:#ebe7ce;border:2px solid var(--ink);border-radius:13px;text-align:left;padding:10px;opacity:.7;box-shadow:0 3px var(--ink)}.mode.selected{background:var(--yellow);opacity:1;transform:translateY(-2px)}.mode b{font-size:clamp(12px,1.6vw,21px);font-weight:900;display:block}.mode small{display:block;font-size:8px;margin-top:5px;line-height:1.4}.primary{background:var(--coral);border:3px solid var(--ink);border-radius:13px;box-shadow:0 4px var(--ink);padding:12px;font-size:clamp(16px,2.2vw,28px);font-weight:900;letter-spacing:-.6px;margin:14px 0;display:flex;align-items:center;justify-content:center;gap:16px}.primary:active,.secondary:active{transform:translateY(3px);box-shadow:none}.primary:disabled{opacity:.45}.menurow{display:grid;grid-template-columns:1fr 1fr;gap:9px}.secondary{background:var(--cream);border:2px solid var(--ink);border-radius:10px;padding:10px;font-size:11px;font-weight:900;box-shadow:0 2px var(--ink)}#bank{color:#078d72;margin-left:5px}.menutools{display:flex;justify-content:space-between;gap:4px;margin:14px 0 10px}.menutools button{font-size:10px;background:transparent;text-decoration:underline;font-weight:900;min-height:25px}footer{display:flex;justify-content:space-between;gap:5px;font-size:8px;font-weight:900}footer a{color:var(--ink);text-decoration:none}#game{display:flex;flex-direction:column;background:#0c3441}.gamehead{height:57px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px max(12px,env(safe-area-inset-right)) 5px max(12px,env(safe-area-inset-left));background:var(--cream);border-bottom:3px solid var(--ink);position:relative;z-index:4}.hud-left{display:flex;align-items:center;gap:10px;flex:1}.gamehead .icon{width:40px;height:40px;min-width:40px;font-size:19px}.hud-left span{font-size:9px;font-weight:900;letter-spacing:1px;display:block}.hud-left strong{font-size:17px;display:block;white-space:nowrap}.hud-right{display:flex;align-items:center;justify-content:flex-end;gap:15px;font-size:11px;flex:1}#lives{color:#d44464;font-size:17px;letter-spacing:2px}#who{font-size:11px}.clock{min-width:83px;text-align:center;border:2px solid var(--ink);border-radius:10px;background:var(--yellow);font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;padding:4px 12px}.clock.calm{background:#cde7d0;font-size:13px}.clock.danger{background:#ef614b;color:white;animation:alarm .7s alternate infinite}@keyframes alarm{to{box-shadow:0 0 0 4px #ef614b55}}#boardwrap{position:relative;flex:1;min-height:0;overflow:hidden}#board{display:block;width:100%;height:100%;object-fit:contain;touch-action:none}#controls{position:absolute;inset:0;pointer-events:none}.pad{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));display:grid;grid-template-columns:56px 56px;gap:7px;pointer-events:auto;text-align:center}.pad button{height:51px;border:3px solid var(--ink);border-radius:15px;background:var(--yellow);font-size:33px;font-weight:900;box-shadow:0 4px var(--ink);line-height:1}.pad button:active{transform:translateY(3px);box-shadow:none;background:#ffcc54}.pad small{grid-column:1/3;font-size:7px;letter-spacing:1px;color:#fff9dd;text-shadow:1px 1px #082c35;font-weight:900}.pad.vertical{left:max(12px,env(safe-area-inset-left))}.pad.horizontal{right:max(12px,env(safe-area-inset-right))}#controls.swapped .vertical{left:auto;right:max(12px,env(safe-area-inset-right))}#controls.swapped .horizontal{right:auto;left:max(12px,env(safe-area-inset-left))}#power{pointer-events:auto;position:absolute;bottom:max(9px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);height:64px;min-width:125px;border:3px solid var(--ink);border-radius:40px;background:var(--mint);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:5px 18px;box-shadow:0 4px var(--ink);font-weight:900}#power>span{font-size:23px;line-height:1}#power strong{font-size:9px}#power small{font-size:7px;margin-top:3px}#power:disabled{background:#d7ddcf;color:#697f7c;box-shadow:none}#power.ready{animation:powerPulse .75s alternate infinite}@keyframes powerPulse{to{box-shadow:0 0 0 5px #ffe57455}}#toast{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:40px;padding:9px 22px;font-size:12px;font-weight:900;opacity:0;transition:opacity .2s;pointer-events:none;max-width:70%;white-space:nowrap}#toast.show{opacity:1}#hunterWarning{position:absolute;top:7px;left:50%;transform:translateX(-50%);background:#762a63;color:#fff2cc;border:2px solid #ffcf63;border-radius:15px;padding:6px 18px;font-size:10px;font-weight:900;letter-spacing:1px;pointer-events:none}#modal{position:fixed;inset:0;background:#082e3ce0;backdrop-filter:blur(5px);z-index:20;display:flex;align-items:center;justify-content:center;padding:14px}#panel{max-width:800px;width:100%;max-height:94dvh;overflow:auto;overscroll-behavior:contain;border:3px solid var(--ink);border-radius:23px;padding:22px 26px;background:radial-gradient(#238b7511 1px,transparent 1px) 0 0/9px 9px,var(--cream);box-shadow:7px 7px 0 #061f28;position:relative}#panel h2{font-size:29px;line-height:1.05;margin:0 0 12px;font-weight:900;letter-spacing:-1px}#panel p{font-size:12px;line-height:1.6}#panel .primary{font-size:19px;padding:10px 18px;display:inline-flex;min-width:190px;margin:10px 7px}.close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font-size:23px}.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.card{padding:0 0 10px;text-align:center;border:2px solid var(--ink);border-radius:15px;background:#e9ead4;overflow:hidden}.card.chosen{background:#bde7ce;box-shadow:0 0 0 3px var(--mint)}.card canvas{width:100%;height:114px;display:block;background:radial-gradient(ellipse at bottom,#8dcfba66,transparent 75%)}.card strong{display:block;font-size:12px;margin:5px}.card small{display:block;font-size:8px}.badge{display:inline-block;border-radius:20px;background:var(--yellow);padding:5px 8px;margin:7px 0 0;font-size:8px;font-weight:900}.detail-layout{display:grid;grid-template-columns:35% 1fr;align-items:center;gap:24px}.detail-layout canvas{width:100%;height:220px}.detail-layout p{font-size:13px!important}.celebrate{display:grid;grid-template-columns:35% 1fr;align-items:center;gap:20px}.celebrate canvas{width:100%;height:220px}.celebrate h2{font-size:32px!important;color:#0b806c;transform:rotate(-2deg)}.reward{display:inline-block;background:var(--yellow);border:2px solid var(--ink);border-radius:30px;padding:8px 15px;font-size:14px;font-weight:900}.row-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.map{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.map button{min-height:69px;border:2px solid var(--ink);border-radius:12px;background:var(--mint);padding:8px 4px}.map b{font-size:20px;display:block}.map small{font-size:9px;display:block;margin-top:4px}.map button:disabled{opacity:.4;background:#c7cbbb!important}.planet-chip{font-size:8px;text-transform:uppercase;font-weight:900;letter-spacing:.5px}.settings-preview{display:flex;justify-content:space-around;align-items:center;background:#e1e8d4;border:2px solid var(--ink);border-radius:14px;padding:15px;margin:12px 0;font-size:26px;font-weight:900}.settings-preview small{display:block;font-size:10px;text-align:center}.setting-btn{width:100%;min-height:50px;padding:12px;border:2px solid var(--ink);border-radius:12px;background:var(--yellow);font-weight:900}.help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.help-grid p{margin:0}.muted{opacity:.65}.modal-buttons button{margin-right:7px;margin-bottom:7px}.starsbig{font-size:30px;color:#d9941f}#panel .notes{font-size:10px}
@media(max-height:470px){.menu-panel{padding:12px 20px}.menu-panel h1{font-size:30px;margin:5px 0 8px}.eyebrow{font-size:7px;letter-spacing:1px}.menu-panel .icon{height:36px;width:36px;min-width:36px}.menulead{font-size:10px;margin-bottom:9px}.mode{padding:8px}.mode b{font-size:13px}.mode small{font-size:7px}.primary{padding:9px;margin:10px 0;font-size:18px}.secondary{padding:9px 7px;font-size:9px}.menutools{margin:9px 0 5px}.menutools button{font-size:8px}.universe{font-size:7px}.edition{font-size:7px;padding:6px}.gamehead{height:49px}.hud-left strong{font-size:14px}.hud-left span{font-size:7px}.hud-right{gap:10px}.clock{font-size:20px;min-width:72px;padding:3px 8px}#panel{padding:17px 22px}#panel h2{font-size:25px}.celebrate canvas,.detail-layout canvas{height:190px}.card canvas{height:100px}.pad{grid-template-columns:52px 52px;gap:6px}.pad button{height:48px}#power{height:59px;min-width:115px}#toast{font-size:10px;padding:7px 16px}.map button{min-height:59px}}
@media(max-width:700px) and (orientation:landscape){.menu-panel{padding:10px 14px}.menu-panel h1{font-size:23px;margin:4px 0}.menulead{font-size:8px;margin:5px 0}.eyebrow{font-size:6px}.mode{padding:6px}.mode b{font-size:11px}.mode small{font-size:6px}.primary{font-size:14px;padding:7px;margin:8px 0}.secondary{font-size:8px;padding:7px 4px}.menutools{margin:6px 0 2px}footer{font-size:6px}.pad{grid-template-columns:46px 46px;gap:5px;bottom:7px}.pad button{height:44px;font-size:28px;border-radius:12px}.pad small{font-size:6px}.pad.vertical{left:7px}.pad.horizontal{right:7px}#power{height:53px;min-width:104px;bottom:7px;padding:3px 9px}#power>span{font-size:19px}.hud-right{gap:6px}#who{display:none}#lives{font-size:14px}.hud-left{gap:6px}.hud-left strong{font-size:12px}.hud-left span{font-size:6px}.gamehead .icon{height:36px;width:36px;min-width:36px}.gamehead{padding:4px 7px;height:45px}#panel{padding:14px 18px}.roster{gap:7px}.card canvas{height:85px}.card strong{font-size:10px}.card small,.badge{font-size:7px}.map{gap:6px}.map button{min-height:50px}.map small{font-size:7px}.celebrate canvas,.detail-layout canvas{height:165px}.celebrate h2{font-size:25px!important}.help-grid{gap:12px}#panel p{font-size:10px}}
@media(orientation:portrait){#rotate{display:flex;position:fixed;inset:0;z-index:200;background:radial-gradient(#15666c 1px,transparent 1px) 0 0/12px 12px,#073f49;color:var(--cream);align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#rotate img{width:min(85vw,390px);height:160px;object-fit:contain}.rotate-phone{font-size:65px;color:var(--yellow)}#rotate h2{font-size:30px;margin:10px}#rotate p{font-size:14px}#rotate small{font-size:12px;line-height:1.8;color:#b8e7d7}#app{visibility:hidden}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#hero{object-fit:contain;object-position:center bottom}.menu-art{background:linear-gradient(#70ced0,#b4dc9c)}

.card canvas,.detail-layout canvas,.celebrate canvas{object-fit:contain}
/* POP CROSS 2.1: a single illustrated landscape, with comic lettering throughout. */
@font-face{font-family:PopComic;src:url('assets/fonts/Bangers-Regular.ttf') format('truetype');font-display:swap;font-weight:100 900}
html,body,button,a{font-family:PopComic,'Arial Rounded MT Bold',fantasy;letter-spacing:.7px}#app{max-width:none}#menu{display:block;background:#9dd8b5;overflow:hidden}#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.menu-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:8px max(16px,env(safe-area-inset-left)) 8px}.menu-top{position:absolute;top:10px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-start}.universe{position:static;display:flex;flex-direction:column;gap:0;font-size:10px;letter-spacing:1px;text-align:center;text-shadow:0 1px #fff8dd}.universe img{width:77px;height:50px}.menu-top .icon{background:#fff8dddb}.title-art{position:static;width:min(43vw,470px);height:33%;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 4px 0 #163d4333)}.menu-panel{position:absolute;bottom:8px;width:min(690px,82vw);padding:0;display:flex;gap:9px;justify-content:flex-end}.modes{gap:16px}.mode,.mode.selected{opacity:1;transform:none;background:#ffe574f2;border:3px solid var(--ink);border-radius:16px;box-shadow:0 5px var(--ink);text-align:center;padding:9px 12px}.mode[data-mode=arcade]{background:#fc8a58f2}.mode:hover{filter:brightness(1.08);transform:translateY(-2px)}.mode:active{transform:translateY(4px);box-shadow:none}.mode b{font-size:clamp(23px,3.1vw,39px);letter-spacing:1.4px}.mode small{font-size:clamp(11px,1.4vw,16px);letter-spacing:.6px;margin-top:2px}.menurow{grid-template-columns:repeat(4,1fr);gap:8px}.secondary{font-size:16px;letter-spacing:.8px;background:#fff8dde8;padding:8px 7px}.menu-panel footer{justify-content:center;gap:35px;font-size:15px;padding:2px 0;text-shadow:0 1px #fff8dd}.menu-panel footer a{background:#fff8ddc9;padding:2px 9px;border-radius:12px}#board{object-fit:fill}.hud-left strong{font-size:20px;font-weight:400}.hud-left span{font-size:12px}.hud-right,#who{font-size:15px}.pad small,#power strong,#power small{font-size:10px}#panel p{font-size:16px;line-height:1.4}#panel h2{font-weight:400;letter-spacing:1px}.card strong{font-size:16px}.card small,.badge{font-size:12px}.map small{font-size:12px}.planet-chip{font-size:10px}.menutools button{font-size:14px}#toast,#hunterWarning{font-size:15px}.clock{font-weight:400}.clock.calm{font-size:17px}#panel .notes{font-size:13px}.help-grid{gap:12px}
@media(max-height:470px){.menu-content{padding-top:3px}.title-art{height:32%;width:40vw}.menu-panel{gap:7px;bottom:6px;width:min(680px,82vw)}.mode{padding:6px 10px;border-radius:12px}.mode b{font-size:27px}.mode small{font-size:12px}.menurow .secondary{font-size:13px;padding:6px 4px}.menu-panel footer{font-size:13px}.menu-top{top:7px;left:14px;right:14px}.universe{font-size:8px}.universe img{width:65px;height:42px}.hud-left strong{font-size:17px}.hud-left span{font-size:10px}#panel p{font-size:14px}.card canvas{height:85px}.card strong{font-size:14px}.card small,.badge{font-size:10px}#toast,#hunterWarning{font-size:13px}}
@media(max-height:350px){.title-art{height:30%}.menu-panel{gap:5px;bottom:4px}.mode b{font-size:22px}.mode small{font-size:10px}.menurow .secondary{font-size:11px;padding:5px 3px}.menu-panel footer{font-size:11px}.universe{display:none}.menu-top .icon{width:32px;height:32px;min-width:32px;font-size:20px}.map button{min-height:42px}.map small{font-size:10px}.planet-chip{font-size:8px}}

/* Approved orientation screen A: paper, mint and one random friend at a time. */
@media(orientation:portrait){
 #rotate{isolation:isolate;gap:5px;padding:max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom));background:radial-gradient(#0bb19822 1px,transparent 1px) 0 0/15px 15px,#fff8dd;color:#143b42;overflow:hidden;font-family:PopComic,fantasy}
 #rotate:after{content:'';position:absolute;z-index:-1;width:145%;height:30%;left:-22%;bottom:-20%;background:#b7e6c9;border-radius:50% 50% 0 0}
 .rotate-brand{font-size:29px;color:#047f78;text-shadow:1px 2px #ffe574;letter-spacing:1px;margin-bottom:8px}
 #rotatePortrait{display:block;width:min(84vw,320px);height:min(34dvh,270px);object-fit:contain}
 #rotateName{font-size:20px;letter-spacing:1px;margin-top:0;min-height:24px}
 #rotate .rotate-phone{font-size:47px;line-height:1.05;color:#143b42;margin-top:8px}
 #rotate h2{font-size:clamp(34px,9vw,45px);font-weight:400;margin:5px 0 0;letter-spacing:1px}
 #rotate p{font-size:19px;margin:0;letter-spacing:.7px;line-height:1.4}
}
@media(orientation:portrait) and (max-height:550px){#rotate{gap:2px;padding:14px 18px}.rotate-brand{font-size:23px;margin:0}#rotatePortrait{height:29dvh}#rotateName{font-size:17px}#rotate .rotate-phone{font-size:36px;margin-top:3px}#rotate h2{font-size:32px}#rotate p{font-size:16px}}