/* Koderia v59.20.0 · shared mobile/touch UX for student sites and games */
:root{
  --kdu-safe-top:max(10px, env(safe-area-inset-top));
  --kdu-safe-left:max(10px, env(safe-area-inset-left));
  --kdu-safe-right:max(10px, env(safe-area-inset-right));
  --kdu-safe-bottom:max(10px, env(safe-area-inset-bottom));
}
html{max-width:100%;-webkit-text-size-adjust:100%}
html[data-kdu-page] body{max-width:100%;overflow-x:hidden}
html[data-kdu-page] img,html[data-kdu-page] video,html[data-kdu-page] iframe{max-width:100%}
html[data-kdu-page] button,
html[data-kdu-page] a,
html[data-kdu-page] canvas,
html[data-kdu-page] [role="button"]{-webkit-tap-highlight-color:transparent}
html[data-kdu-page] button,
html[data-kdu-page] [role="button"]{touch-action:manipulation}
@media (hover:none), (pointer:coarse), (max-width:760px){
  html[data-kdu-page] button,html[data-kdu-page] a,html[data-kdu-page] canvas,html[data-kdu-page] [role="button"]{
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  }
  html[data-kdu-page="portal"] .socialBtn{min-height:44px}
  html[data-kdu-page="portal"] .previewArrow{width:44px!important;height:44px!important;min-width:44px;min-height:44px}
  html[data-kdu-page="portal"] .playerVisitClose{width:44px;min-width:44px;height:44px;min-height:44px}
  html[data-kdu-page="portal"] .playerVisitBack,
  html[data-kdu-page="portal"] #rewardRevealClose{min-height:44px}
}
html[data-kdu-page="game"],html[data-kdu-page="game"] body{
  width:100%;height:100dvh!important;min-height:100dvh!important;overscroll-behavior:none;
}
html[data-kdu-page="game"] body,
html[data-kdu-page="game"] canvas,
html[data-kdu-page="game"] button,
html[data-kdu-page="game"] [role="button"]{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
html[data-kdu-page="game"] canvas{touch-action:none;max-width:100%;max-height:100dvh}
html[data-kdu-page="game"] button{min-width:44px;min-height:44px}

.kduBackHome{
  position:fixed;z-index:2147483000;top:var(--kdu-safe-top);left:var(--kdu-safe-left);
  min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.72);border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  color:#fff!important;background:rgba(7,24,47,.86);box-shadow:0 8px 26px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  text-decoration:none!important;font:900 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.01em;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.kduBackHome:active{transform:translateY(2px);background:rgba(12,43,78,.94)}
.kduBackHome:focus-visible{outline:3px solid #ffe16b;outline-offset:2px}

.kduRotateHint{
  position:fixed;z-index:2147482990;left:50%;top:max(64px,calc(env(safe-area-inset-top) + 58px));
  transform:translateX(-50%);max-width:calc(100vw - 24px);padding:8px 13px;border-radius:999px;
  color:#fff;background:rgba(7,24,47,.82);border:1px solid rgba(255,255,255,.32);
  box-shadow:0 8px 22px rgba(0,0,0,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font:800 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center;pointer-events:none;
  opacity:0;transition:opacity .25s ease;
}
.kduRotateHint.show{opacity:1}

.kduVirtualControls{display:none;position:fixed;inset:0;z-index:2147482800;pointer-events:none}
.kduJoystick{
  position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));
  width:104px;height:104px;border-radius:50%;pointer-events:auto;touch-action:none;
  background:radial-gradient(circle at 50% 45%,rgba(83,205,255,.22),rgba(4,20,42,.62) 72%);
  border:2px solid rgba(172,236,255,.48);box-shadow:0 10px 30px rgba(0,0,0,.28),inset 0 0 0 7px rgba(255,255,255,.04);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:.86;
}
.kduJoystick::before{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);border:1px dashed rgba(214,248,255,.36);border-radius:50%}
.kduJoystickThumb{
  position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;
  background:linear-gradient(145deg,#7cecff,#2794db);border:3px solid rgba(240,254,255,.94);
  box-shadow:0 6px 17px rgba(0,0,0,.3);pointer-events:none;transition:box-shadow .12s;
}
.kduJoystick.active .kduJoystickThumb{box-shadow:0 5px 16px rgba(0,0,0,.32),0 0 26px rgba(85,225,255,.55)}
.kduActionButton{
  position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(22px,calc(env(safe-area-inset-bottom) + 16px));
  width:66px;height:66px;border-radius:50%;border:3px solid rgba(255,255,255,.9);pointer-events:auto;touch-action:none;
  display:grid;place-items:center;padding:0;color:#102744;background:linear-gradient(180deg,#ffeb89,#ffc941);
  box-shadow:0 6px 0 #9d6616,0 12px 25px rgba(0,0,0,.3);font:1000 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  opacity:.9;-webkit-tap-highlight-color:transparent;
}
.kduActionButton:active{transform:translateY(4px);box-shadow:0 2px 0 #9d6616,0 7px 16px rgba(0,0,0,.25)}
.kduActionButton span{display:block;font-size:18px;margin-bottom:1px}

@media (hover:none), (pointer:coarse), (max-width:760px){
  html[data-kdu-controls="joystick"] .kduVirtualControls{display:block}
}
@media (max-width:430px){
  .kduBackHome{min-height:42px;padding:0 12px;border-radius:13px;font-size:12px}
  .kduJoystick{width:94px;height:94px;left:max(9px,env(safe-area-inset-left));bottom:max(10px,calc(env(safe-area-inset-bottom) + 7px))}
  .kduJoystickThumb{width:44px;height:44px}
  .kduActionButton{width:60px;height:60px;right:max(10px,env(safe-area-inset-right));bottom:max(17px,calc(env(safe-area-inset-bottom) + 12px));font-size:10px}
}
@media (max-height:500px) and (orientation:landscape){
  .kduBackHome{min-height:38px;padding:0 10px;font-size:11px}
  .kduJoystick{width:82px;height:82px;bottom:max(7px,env(safe-area-inset-bottom))}
  .kduJoystick::before{width:44px;height:44px}.kduJoystickThumb{width:39px;height:39px}
  .kduActionButton{width:54px;height:54px;bottom:max(10px,env(safe-area-inset-bottom));font-size:9px}
  .kduActionButton span{font-size:16px}
}

/* Main portfolio game viewer: maximize the actual game on phones. */
@media (max-width:700px), ((hover:none) and (pointer:coarse)){
  .gameModal{padding:0!important;backdrop-filter:none!important}
  .playerShell{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border-radius:0!important}
  .playerBar{box-sizing:border-box!important;min-height:52px!important;height:52px!important;padding:max(5px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) 5px max(7px,env(safe-area-inset-left))!important;flex-wrap:nowrap!important;gap:6px!important;overflow:hidden}
  .playerTitle{order:-9!important;min-width:0!important;width:auto!important;margin:0 auto 0 0!important;font-size:12px!important;white-space:nowrap!important}
  #closeGame{order:-10!important;flex:0 0 auto!important;min-height:40px!important;padding:0 11px!important;background:#fff!important;color:#0a3158!important;font-size:12px!important}
  #favoriteGameBtn,#copyGameLink,#openNewTab{display:none!important}
  #fullscreenBtn{flex:0 0 40px!important;width:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;font-size:0!important}
  #fullscreenBtn::before{content:"⛶";font-size:21px}
  .gameFrame{min-height:0!important;touch-action:none}
  .launchCover{inset:52px 0 0!important}
}

/* Koderia world touch controls stay inside safe areas; HUD owns prompt placement. */
@media (hover:none), (pointer:coarse), (max-width:760px){
  .gameTouchJoystick{left:max(9px,env(safe-area-inset-left))!important;bottom:max(9px,calc(env(safe-area-inset-bottom) + 6px))!important}
  .gameTouchAction{right:max(11px,env(safe-area-inset-right))!important;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))!important}
}

@media (prefers-reduced-motion:reduce){.kduBackHome,.kduRotateHint,.kduJoystickThumb{transition:none!important}}

/* Always-visible way out of the Koderia world back to the public student portfolio. */
.cityPortfolioBack{
  flex:0 0 auto;min-width:44px;min-height:40px;padding:0 10px;border:1px solid rgba(255,255,255,.55);border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;color:#fff;background:rgba(7,31,59,.78);
  box-shadow:0 5px 16px rgba(2,18,38,.18);font:1000 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.cityPortfolioBack:hover{background:rgba(15,63,104,.9)}
.cityPortfolioBack:focus-visible{outline:3px solid #ffe16b;outline-offset:2px}
@media(max-width:560px){.cityPortfolioBack{padding:0 8px}.cityPortfolioBack span{display:none}}
body.cityGameFullscreen .cityPortfolioBack{position:relative;z-index:300;background:rgba(4,24,48,.9)}