:root{
  --sea:#2f6cb3; --sea-d:#24548f; --foam:#9fd3f0;
  --sand:#e9c27a; --sand-d:#c99a4e; --dirt:#8a5a2b;
  --wood:#6b3f1f; --ink:#2a1a0e; --grass:#3f8a3a;
  --cream:#fff4d8; --red:#c8433a; --ok:#3f8a3a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--sea);
  color:var(--ink);
  font-family:'VT323',monospace;
  font-size:22px;
  image-rendering:pixelated;
  display:flex;flex-direction:column;min-height:100vh;
}
/* mar com ondinhas em pixel */
.sea{position:fixed;inset:0;z-index:-1;background:var(--sea)}
.sea::before{content:"";position:absolute;inset:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' shape-rendering='crispEdges'%3E%3Cg fill='%239fd3f0'%3E%3Crect x='10' y='20' width='4' height='2'/%3E%3Crect x='14' y='18' width='6' height='2'/%3E%3Crect x='20' y='20' width='4' height='2'/%3E%3Crect x='70' y='58' width='4' height='2'/%3E%3Crect x='74' y='56' width='6' height='2'/%3E%3Crect x='80' y='58' width='4' height='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:240px 160px;animation:drift 12s linear infinite}
@keyframes drift{to{background-position:240px 0}}
.wrap{flex:1;padding:24px 16px;width:100%;max-width:520px;margin:0 auto}
.center{display:flex;align-items:center;justify-content:center}

/* ilha */
.island{
  width:100%;text-align:center;padding:40px 24px 36px;
  background:var(--sand);
  border:4px solid var(--ink);
  box-shadow:0 0 0 8px var(--foam),0 0 0 12px var(--ink),0 18px 0 12px rgba(0,0,0,.25);
  border-radius:28px;
  position:relative;
}
.island::before{content:"";position:absolute;left:18px;right:18px;top:14px;height:12px;
  background:repeating-linear-gradient(90deg,var(--grass) 0 16px,#2f6d2b 16px 24px);
  border:3px solid var(--ink);border-radius:6px}
.logo{font-family:'Press Start 2P',monospace;font-size:28px;line-height:1.4;margin:28px 0 8px;
  color:var(--cream);text-shadow:3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink),4px 5px 0 var(--ink)}
.logo small{font-size:18px;color:var(--cream)}
.dot{color:#3fa0ff}
.tag{font-size:24px;margin:8px 0 24px}
.actions{display:flex;flex-direction:column;gap:14px;align-items:center}

/* painel de madeira */
.panel{
  width:100%;padding:26px 22px;
  background:var(--cream);
  border:4px solid var(--ink);
  box-shadow:inset 0 0 0 4px var(--sand-d),6px 6px 0 var(--ink);
  border-radius:6px;
  display:flex;flex-direction:column;gap:14px;text-align:center;
}
.panel h2{font-family:'Press Start 2P',monospace;font-size:16px;line-height:1.6;margin:4px 0 8px}
label{display:flex;flex-direction:column;gap:4px;text-align:left;font-size:22px}
input{
  font:inherit;font-size:22px;padding:8px 10px;
  border:3px solid var(--ink);background:#fff;border-radius:0;color:var(--ink);
  box-shadow:inset 3px 3px 0 #e6d6b0;
}
input:focus{outline:3px solid #3fa0ff;outline-offset:0}

.btn{
  font-family:'Press Start 2P',monospace;font-size:13px;
  display:inline-block;text-decoration:none;cursor:pointer;
  padding:14px 20px;min-width:200px;
  color:var(--cream);background:var(--wood);
  border:3px solid var(--ink);border-radius:0;
  box-shadow:inset -3px -3px 0 #4a2a12,inset 3px 3px 0 #8f5a30,4px 4px 0 var(--ink);
}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translate(3px,3px);box-shadow:inset -3px -3px 0 #4a2a12,inset 3px 3px 0 #8f5a30,1px 1px 0 var(--ink)}
.btn.alt{background:var(--sea-d);box-shadow:inset -3px -3px 0 #183b66,inset 3px 3px 0 #4c86cc,4px 4px 0 var(--ink)}
.btn.power{background:var(--red);box-shadow:inset -3px -3px 0 #8f2a23,inset 3px 3px 0 #e2665d,4px 4px 0 var(--ink)}

.msg{margin:0;padding:8px;border:3px solid var(--ink);font-size:20px}
.msg.err{background:#f6c9c3}
.msg.ok{background:#cfe8c4}
.small{margin:0;font-size:20px}
a{color:var(--sea-d)}
.foot{text-align:center;color:var(--cream);font-size:18px;padding:12px;text-shadow:2px 2px 0 var(--sea-d)}
.badge{font-family:"Press Start 2P",monospace;font-size:9px;padding:3px 6px;background:#3fa0ff;color:#fff;border:2px solid var(--ink);vertical-align:middle}
.badge.dev{background:#3f8a3a}

/* home: ilha */
.home{flex-direction:column;gap:12px;max-width:640px}
.hello{margin:0;color:var(--cream);font-size:22px;text-shadow:2px 2px 0 var(--sea-d)}
.scene{position:relative;width:100%;max-width:520px;aspect-ratio:1}
.isle{width:100%;height:100%;display:block;filter:drop-shadow(0 8px 0 rgba(0,0,0,.18))}
.fire{animation:flick .5s steps(2) infinite}
@keyframes flick{50%{opacity:.75}}
.boat{position:absolute;left:62.5%;top:78%;width:16.6%;padding:0;border:0;background:none;cursor:pointer;
  animation:bob 2.4s ease-in-out infinite;transform-origin:50% 100%}
.boat svg{width:100%;display:block}
.boat:hover{filter:brightness(1.15) drop-shadow(0 0 4px #fff4d8)}
.boat:focus-visible{outline:3px solid #3fa0ff}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(4%) rotate(2deg)}}
.boat.sail{animation:sail 2.6s ease-in forwards;cursor:default}
@keyframes sail{
  0%{transform:translate(0,0) rotate(0)}
  15%{transform:translate(4%,6%) rotate(3deg)}
  100%{transform:translate(260%,140%) rotate(-4deg) scale(.6);opacity:.2}}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,30,60,.45);z-index:10}
.modal[hidden]{display:none}
.modal .panel{max-width:360px}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.row .btn{min-width:110px}
.fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity 1.2s ease;z-index:20}
.fade.on{opacity:1;pointer-events:all}