*,:before,:after{box-sizing:border-box}:where(#app *){min-width:0;min-height:0}html,body{overscroll-behavior:none;color:#f8fbff;background:#101820;width:100%;min-width:0;height:100%;min-height:0;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}body{touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;top:0;right:0;bottom:0;left:0}[hidden]{display:none!important}#app{paint-order:stroke fill;width:100%;min-width:0;height:100%;min-height:0;overflow:hidden;position:relative}#app svg{paint-order:normal}.template-shell{box-sizing:border-box;align-content:center;gap:.75rem;max-width:720px;min-height:100%;margin:0 auto;padding:2rem;display:grid}canvas,.game-surface{box-sizing:border-box;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;min-width:0;height:100%;min-height:0;display:block}button,[role=button]{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.hud-row{box-sizing:border-box;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:clamp(6px,2vw,14px);width:100%;min-width:0;padding:clamp(6px,2vmin,12px);display:flex}.badge{box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums;align-items:center;gap:.4em;min-width:0;max-width:100%;padding-inline:.4em;font-size:clamp(12px,3.5vw,18px);line-height:1.2;display:inline-flex;overflow:hidden}.pip-row{box-sizing:border-box;align-items:center;gap:clamp(2px,.8vw,6px);display:inline-flex}.pip{aspect-ratio:1;flex:none;place-items:center;width:clamp(12px,4vw,20px);display:grid;overflow:hidden}.controls-row{box-sizing:border-box;justify-content:center;align-items:center;gap:clamp(12px,3vw,20px);width:100%;min-width:0;padding:clamp(8px,2vmin,14px);display:flex}.control-btn{box-sizing:border-box;white-space:nowrap;flex:0 auto;justify-content:center;align-items:center;min-width:44px;max-width:100%;min-height:44px;padding:.5em 1em;font-size:clamp(13px,3.5vw,18px);line-height:1.2;display:inline-flex;overflow:hidden}.control-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;padding-inline:.4em;overflow:hidden}.template-shell h1,.template-shell p{margin:0}.template-shell h1{font-size:2rem;font-weight:750}.template-shell p{color:#c8d7e6;max-width:36rem;line-height:1.5}.mario-game-container{background:#141c2c;flex-direction:column;width:100%;height:100%;font-family:"PingFang SC","Microsoft YaHei",sans-serif;display:flex;position:relative;overflow:hidden}.mario-canvas-wrapper{flex:1;width:100%;height:100%;position:relative;overflow:hidden}.overlay{z-index:10;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto;background:#101820d9;flex-direction:column;justify-content:center;align-items:center;padding:2vw;display:flex;position:absolute;top:0;right:0;bottom:0;left:0}.overlay-title{color:#ff4757;text-shadow:3px 3px #000;margin-bottom:20px;font-size:clamp(20px,8vw,42px);line-height:1.4;animation:1.5s infinite alternate pulse}@keyframes pulse{0%{transform:scale(.98)}to{transform:scale(1.02)}}.overlay-subtitle{color:#eccc68;max-width:85%;margin-bottom:30px;font-size:clamp(10px,3vw,16px);line-height:1.6}.btn-retro{color:#fff;cursor:pointer;pointer-events:auto;background:#2ed573;border:4px solid #fff;border-radius:8px;outline:none;padding:12px 24px;font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:clamp(12px,3vw,18px);transition:transform .1s,box-shadow .1s;box-shadow:0 6px #20bf6b,0 6px 0 4px #000}.btn-retro:active{box-shadow:none;transform:translateY(6px)}.mario-hud{pointer-events:none;z-index:5;justify-content:space-between;padding:0 16px;display:flex;position:absolute;top:10px;left:0;right:0}.hud-panel{color:#fff;background:#0009;border:2px solid #fff;border-radius:6px;flex-direction:column;gap:4px;padding:6px 12px;font-size:clamp(8px,2.5vw,12px);display:flex;box-shadow:0 4px #0006}.hud-item{align-items:center;gap:8px;display:flex}.hud-gold{color:#eccc68}.hud-lives{color:#ff4757}.mario-touch-controls{pointer-events:none;z-index:5;justify-content:space-between;align-items:flex-end;display:flex;position:absolute;bottom:16px;left:16px;right:16px}.touch-dpad,.touch-actions{pointer-events:auto;gap:12px;display:flex}.touch-btn{color:#ffffffd9;cursor:pointer;background:#ffffff40;border:3px solid #fff9;border-radius:50%;justify-content:center;align-items:center;width:clamp(52px,12vw,64px);height:clamp(52px,12vw,64px);font-size:clamp(14px,4vw,22px);transition:background-color .1s,transform .1s;display:flex;box-shadow:0 4px 10px #0000004d}.touch-btn:active{background:#ffffff80;transform:scale(.92)}.touch-btn.rect{border-radius:12px}.audio-mute-toggle{color:#fff;cursor:pointer;z-index:6;pointer-events:auto;background:#0009;border:2px solid #fff;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%);box-shadow:0 4px #0006}

.mario-game-container{
  position:relative;width:100%;height:100%;overflow:hidden;
}
.mario-canvas-wrapper{
  position:absolute;top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;
}
#mario-canvas{
  width:100%;height:100%;display:block;
}
.mario-hud-wrapper{
  position:absolute;top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;pointer-events:none;z-index:5;
}
.touch-zone-left,.touch-zone-right{
  position:absolute;bottom:0;top:30%;width:38%;z-index:4;
  pointer-events:auto;touch-action:none;
}
.touch-zone-left{left:0}
.touch-zone-right{right:0}
@media (pointer:fine){
  .touch-zone-left,.touch-zone-right{display:none}
}
.mario-touch-controls{
  padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.touch-btn.rect{
  width:clamp(64px,18vw,88px)!important;
  height:clamp(64px,18vw,88px)!important;
  font-size:clamp(18px,5vw,26px)!important;
}
.touch-btn.jump-btn{
  width:clamp(72px,20vw,96px)!important;
  height:clamp(72px,20vw,96px)!important;
  border-radius:50%;
  font-size:clamp(16px,4.5vw,22px)!important;
  font-weight:700;
}
.mario-hud{
  padding-top:max(10px,env(safe-area-inset-top,0px));
}
.audio-mute-toggle{
  top:max(10px,env(safe-area-inset-top,0px));
}