/* ==========================================================================
   Tier List du Lounge — thème pastel café / beige / crème
   ========================================================================== */
:root{
  --cream:#f6efe4;      /* crème, fond général    */
  --paper:#fffcf7;      /* mousse de lait         */
  --sand:#eee1cf;       /* latte                  */
  --sand2:#e3d3bc;      /* latte foncé            */
  --line:#d8c6ac;       /* filets                 */
  --line2:#c5ae91;
  --ink:#43332a;        /* grain torréfié         */
  --ink2:#7a6553;       /* texte secondaire       */
  --wood:#9d6a48;       /* accent espresso        */
  --wood-l:#b8845c;
  --moss:#8a9a7b;
  --berry:#b3665c;      /* danger doux            */
  --tile:64px;
  --label-w:104px;
  --radius:12px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:var(--cream);
  background-image:
    radial-gradient(1100px 620px at 78% -12%, rgba(255,255,255,.75), rgba(255,255,255,0) 62%),
    repeating-linear-gradient(0deg, rgba(157,106,72,.022) 0 1px, rgba(0,0,0,0) 1px 5px),
    linear-gradient(165deg,#faf4ea 0%,#f0e5d5 100%);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button,input,textarea{font:inherit;color:inherit;}
h1,h2{font-family:var(--serif);font-weight:700;}
h2{margin:0 0 14px;font-size:21px;}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}

#app{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* --------------------------------------------------------------- header -- */
#top{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fdf9f2,#efe3d1);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 8px rgba(120,90,60,.07);
  flex:0 0 auto;
}
#top > *{position:relative;z-index:1;}
#top > .steam{z-index:0;}
.title{
  background:transparent;
  border:1px solid transparent;
  border-radius:9px;
  font-family:var(--serif);
  font-size:20px;font-weight:700;
  padding:5px 9px;min-width:80px;
  width:min(38vw,340px);
  outline:none;
}
.title:hover{border-color:var(--line);}
.title:focus{border-color:var(--wood);background:var(--paper);}
.title[readonly]{border-color:transparent;cursor:default;}
.title[readonly]:hover{border-color:transparent;}
.top-actions{display:flex;gap:8px;margin-left:auto;flex:0 0 auto;}

.peers{display:flex;align-items:center;gap:5px;flex:1 1 auto;min-width:0;overflow:hidden;}
.peer{
  display:flex;align-items:center;gap:5px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 10px 3px 5px;
  font-size:12px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(120,90,60,.08);
}
.peer i{width:9px;height:9px;border-radius:50%;display:block;flex:0 0 auto;}
.peer .crown{font-size:11px;}

.btn{
  background:var(--sand);
  border:1px solid var(--line2);
  border-radius:9px;
  padding:7px 12px;
  cursor:pointer;font-size:14px;line-height:1.1;
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset;
  transition:background .12s,border-color .12s,transform .06s;
}
.btn:hover{background:#e8dac6;}
.btn:active{transform:translateY(1px);}
.btn.primary{background:var(--wood);border-color:#96633f;color:#fff8ef;font-weight:600;}
.btn.primary:hover{background:var(--wood-l);}
.btn.danger{background:#f0dcd8;border-color:#d9b3ac;color:#8e4034;}
.btn.warn{background:#f2e6cf;border-color:#dcc59a;color:#7d6127;}
.btn.big{width:100%;padding:12px;margin-top:16px;font-size:16px;}
.btn.small{padding:6px 10px;font-size:13px;}
.btn.icon{padding:7px 11px;}
body.not-admin .admin-only{display:none !important;}

/* ---------------------------------------------------------------- board -- */
#board{
  flex:1 1 auto;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:12px 12px 14px;
  display:flex;flex-direction:column;gap:12px;
}
#tiers{display:flex;flex-direction:column;gap:5px;}

.tier{
  display:flex;align-items:stretch;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 1px 3px rgba(120,90,60,.10);
}
.tier-label{
  flex:0 0 var(--label-w);
  display:flex;align-items:center;justify-content:center;
  padding:4px;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.35);
}
.tier-label span{
  font-family:var(--serif);
  font-weight:700;font-size:22px;
  color:#48382b;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  user-select:none;-webkit-user-select:none;
}

.drop{
  position:relative;
  flex:1 1 auto;
  min-height:calc(var(--tile) + 12px);
  display:flex;flex-wrap:wrap;align-content:flex-start;
  gap:5px;padding:5px;
  touch-action:pan-y;
}
.drop.over{background:rgba(169,116,79,.10);box-shadow:inset 0 0 0 2px rgba(169,116,79,.35);}

#pool-wrap{
  background:rgba(255,253,249,.72);
  border:1px dashed var(--line2);
  border-radius:var(--radius);
  padding:7px;
}
.pool-head{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--ink2);
  padding:2px 4px 7px;
}
.count{background:var(--sand);border:1px solid var(--line);border-radius:999px;padding:1px 8px;}
.hint{margin-left:auto;opacity:.8;font-style:italic;}
.drop.pool{min-height:calc(var(--tile) + 16px);}

/* ---------------------------------------------------------------- tiles -- */
.tile{
  position:relative;
  width:var(--tile);height:var(--tile);
  border-radius:9px;overflow:hidden;
  background:var(--sand);
  border:1px solid var(--line2);
  box-shadow:0 1px 2px rgba(120,90,60,.16);
  cursor:-webkit-grab;cursor:grab;flex:0 0 auto;
  touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
.tile img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;}
.tile .tlabel{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(74,58,44,.80);color:#fdf7ee;
  font-size:10px;line-height:1.2;padding:2px 3px;
  text-align:center;max-height:60%;overflow:hidden;
  word-break:break-word;pointer-events:none;
}
.tile.text{
  width:auto;min-width:var(--tile);
  max-width:calc(var(--tile) * 2.6);
  padding:0 7px;
}
.tile.text .tlabel{
  position:static;background:none;color:var(--ink);
  height:100%;max-height:none;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;padding:2px;
  line-height:1.15;text-align:center;
  word-break:normal;overflow-wrap:break-word;hyphens:auto;
}
.tile .x{
  position:absolute;top:2px;right:2px;
  width:17px;height:17px;border-radius:50%;
  background:rgba(74,58,44,.82);color:#fff;border:none;
  font-size:12px;line-height:15px;padding:0;cursor:pointer;
  opacity:0;transition:opacity .12s;
}
.tile:active{cursor:-webkit-grabbing;cursor:grabbing;}
body.dragging,body.dragging *{cursor:-webkit-grabbing !important;cursor:grabbing !important;}
.tile:hover .x{opacity:1;}
body.not-admin .tile .x{display:none;}
.tile.remote{outline:2px solid var(--peer,#a9744f);outline-offset:-2px;}
.ph{
  width:var(--tile);height:var(--tile);border-radius:9px;
  border:2px dashed var(--wood);
  background:rgba(169,116,79,.14);
  flex:0 0 auto;pointer-events:none;
}

/* -------------------------------------------------- overlays & curseurs -- */
#cursors,#draglayer,#fx{
  position:fixed;top:0;left:0;right:0;bottom:0;inset:0;
  pointer-events:none;overflow:hidden;
}
#draglayer{z-index:60;}   /* la tuile transportée   */
#cursors{z-index:62;}     /* la main passe au-dessus */
#fx{z-index:64;}          /* emotes                  */
.cur{position:absolute;top:0;left:0;will-change:transform;}
.cur svg{display:block;filter:drop-shadow(0 1px 2px rgba(90,66,48,.45));}
.cur.hand span{margin:6px 0 0 25px;}
.cur span{
  display:inline-block;margin:2px 0 0 12px;
  font-size:11px;font-weight:600;color:#3c2f24;
  padding:2px 8px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 5px rgba(90,66,48,.28);
}
.fly{
  position:absolute;top:0;left:0;
  width:var(--tile);height:var(--tile);
  border-radius:9px;overflow:hidden;
  background:var(--sand);
  box-shadow:0 12px 24px rgba(90,66,48,.35);
  will-change:transform;transform-origin:top left;
}
.fly img{width:100%;height:100%;object-fit:cover;display:block;}
.fly .tlabel{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(74,58,44,.80);color:#fdf7ee;
  font-size:10px;padding:2px 3px;text-align:center;overflow:hidden;
}
.fly.text{display:flex;align-items:center;justify-content:center;
  width:auto;min-width:var(--tile);max-width:calc(var(--tile) * 2.6);
  font-size:12px;font-weight:600;text-align:center;padding:0 7px;color:var(--ink);
  line-height:1.15;overflow-wrap:break-word;}
.fly.peer-fly{outline:2px solid var(--peer,#a9744f);opacity:.94;}

/* ---------------------------------------------------------------- emotes -- */
#emotes{
  display:none;                     /* affiché une fois connecté */
  align-items:center;
  gap:6px;
  padding:7px 12px calc(7px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:linear-gradient(0deg,#f1e6d6,#fbf6ee);
  flex:0 0 auto;
}
#emotes.on{display:flex;}
#emotes button{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  line-height:0;
  padding:4px 7px;cursor:pointer;
  box-shadow:0 1px 2px rgba(120,90,60,.12);
  transition:transform .08s,background .12s;
}
#emotes button img{width:32px;height:32px;display:block;object-fit:contain;}
#emotes button.uni{font-size:22px;line-height:1;padding:5px 11px;border-radius:999px;}
#emotes button:hover{background:#fff;transform:translateY(-2px);}
#emotes button:active{transform:scale(.92);}
#emotes .tip{
  margin-left:auto;align-self:center;
  font-size:11px;color:var(--ink2);font-style:italic;
}

.emote-fx{position:absolute;top:0;left:0;will-change:transform;}
.emote-fx b{
  display:block;line-height:0;
  filter:drop-shadow(0 3px 5px rgba(90,66,48,.4));
  animation:floatup 1.5s cubic-bezier(.2,.7,.3,1) forwards;
}
.emote-fx b img{width:64px;height:64px;display:block;object-fit:contain;}
.emote-fx b.uni{font-size:52px;line-height:1;}
@keyframes floatup{
  0%{transform:translate(0,0) scale(.5);opacity:0;}
  18%{transform:translate(0,-10px) scale(1.18);opacity:1;}
  100%{transform:translate(0,-74px) scale(.95);opacity:0;}
}

/* ------------------------------------------------------------ divers UI -- */
#trash{
  position:fixed;left:50%;bottom:14px;transform:translate(-50%,180%);
  background:#f0dcd8;border:1px solid #d3a89f;color:#8e4034;
  padding:11px 22px;border-radius:999px;font-size:14px;
  z-index:70;transition:transform .18s ease;pointer-events:none;
  box-shadow:0 6px 18px rgba(90,66,48,.2);
}
#trash.show{transform:translate(-50%,0);}
#trash.hot{background:var(--berry);color:#fff;border-color:#8e4034;}

.status{
  position:fixed;left:50%;top:12px;transform:translate(-50%,-180%);
  background:var(--paper);border:1px solid var(--line2);color:var(--ink);
  padding:9px 17px;border-radius:999px;font-size:13px;z-index:90;
  transition:transform .22s ease;pointer-events:none;
  box-shadow:0 6px 18px rgba(90,66,48,.18);
}
.status.show{transform:translate(-50%,0);}

#dropzone{
  position:fixed;top:0;left:0;right:0;bottom:0;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;
  background:rgba(247,241,231,.9);
  border:3px dashed var(--wood);
  font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ink);
}
#dropzone.on{display:flex;}

/* -------------------------------------------------------------- modales -- */
.modal{
  position:fixed;top:0;left:0;right:0;bottom:0;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  background:rgba(74,58,44,.42);
  padding:16px;overflow:auto;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.modal.on{display:flex;}
.sheet{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line2);
  border-radius:16px;
  padding:24px;
  width:100%;max-width:390px;
  box-shadow:0 26px 60px rgba(74,58,44,.35);
}
.sheet.wide{max-width:490px;}
.sheet.lobby{max-width:420px;}
.close{
  position:absolute;top:10px;right:13px;
  background:none;border:none;color:var(--ink2);
  font-size:25px;line-height:1;cursor:pointer;
}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.brand .peak{font-size:38px;}
.brand h1{margin:0;font-size:25px;line-height:1.15;}
.brand h1 em{color:var(--wood);font-style:italic;font-size:22px;}

.lbl{display:block;font-size:12px;color:var(--ink2);margin:14px 0 6px;
  text-transform:uppercase;letter-spacing:.05em;}
.in{
  width:100%;background:var(--cream);
  border:1px solid var(--line2);border-radius:9px;
  padding:10px 12px;outline:none;
}
.in:focus{border-color:var(--wood);background:#fff;}
.in.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:19px;letter-spacing:.12em;text-align:center;}
.area{resize:vertical;font-family:inherit;}
.row{display:flex;gap:8px;align-items:stretch;}
.row .in{flex:1 1 auto;}
.muted{color:var(--ink2);margin:8px 0 0;}
.small{font-size:12px;}
.swatches{display:flex;flex-wrap:wrap;gap:9px;}
.swatches button{
  width:29px;height:29px;border-radius:50%;
  border:2px solid transparent;cursor:pointer;padding:0;
  box-shadow:0 1px 3px rgba(120,90,60,.25);
}
.swatches button.on{border-color:var(--ink);}
.tabs{display:flex;gap:6px;margin-bottom:14px;}
.tab{
  background:var(--sand);border:1px solid var(--line2);border-radius:9px;
  padding:7px 14px;cursor:pointer;font-size:14px;
}
.tab.on{background:var(--wood);border-color:#96633f;color:#fff8ef;font-weight:600;}
.pane{display:none;}
.pane.on{display:block;}
.rowbtns{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.rowbtns .btn{text-align:left;}
.roombox{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.roombox code{background:var(--sand);border:1px solid var(--line);padding:5px 10px;border-radius:7px;font-size:14px;}
.adminbox{background:var(--cream);border:1px solid var(--line);border-radius:11px;padding:12px 14px;}
.adminbox .lbl{margin-top:0;}
.adminname{font-family:var(--serif);font-size:17px;font-weight:700;}
.grantlist{display:flex;flex-wrap:wrap;gap:6px;}
.grantlist button{
  background:var(--paper);border:1px solid var(--line2);border-radius:999px;
  padding:5px 11px;font-size:13px;cursor:pointer;
}
.grantlist button:hover{background:var(--sand);}
input[type=file]{width:100%;font-size:13px;}
.opt{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:13px;color:var(--ink);margin:12px 0 4px;cursor:pointer;}
.opt .muted{margin:0;}

/* ============================================================ animations == */

/* --- arrivée d'une tuile ------------------------------------------------- */
@keyframes tilepop{
  0%{opacity:0;transform:scale(.55) translateY(-12px);}
  60%{opacity:1;transform:scale(1.07) translateY(0);}
  100%{opacity:1;transform:scale(1);}
}
.tile.pop{animation:tilepop .36s cubic-bezier(.2,.9,.3,1.25);}

/* --- disparition : le fantôme se rétracte hors du flux ------------------- */
@keyframes tilegone{
  0%{opacity:1;transform:scale(1) rotate(0deg);}
  100%{opacity:0;transform:scale(.35) rotate(-10deg);}
}
.tile-ghost{
  position:fixed;margin:0;pointer-events:none;z-index:65;
  animation:tilegone .3s cubic-bezier(.5,0,.9,.5) forwards;
}

/* --- atterrissage : la tuile pulse dans la couleur du rang --------------- */
@keyframes landed{
  0%{box-shadow:0 1px 2px rgba(120,90,60,.16);}
  30%{box-shadow:0 0 0 4px var(--tint,#a9744f),0 6px 14px rgba(120,90,60,.32);}
  100%{box-shadow:0 1px 2px rgba(120,90,60,.16);}
}
.tile.landed{animation:landed .6s ease-out;}

/* --- le rang qui accueille s'illumine ------------------------------------ */
.drop::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;inset:0;
  pointer-events:none;background:var(--tint,#a9744f);opacity:0;
}
.drop.flash::after{animation:zoneflash .6s ease-out;}
@keyframes zoneflash{0%{opacity:0;}22%{opacity:.20;}100%{opacity:0;}}

/* --- le placeholder s'ouvre pour laisser la place ------------------------ */
.ph{overflow:hidden;transition:width .17s cubic-bezier(.2,.9,.3,1.1),opacity .17s ease;}
.ph.grow{width:0;opacity:0;border-width:0;}

/* --- la tuile transportée se soulève ------------------------------------- */
@keyframes lift{
  0%{box-shadow:0 2px 6px rgba(90,66,48,.18);}
  100%{box-shadow:0 12px 26px rgba(90,66,48,.38);}
}
.fly{animation:lift .18s ease-out both;}

/* --- curseurs : balancement + la main qui se referme --------------------- */
.cur svg{transition:transform .09s linear;transform-origin:28% 12%;}
.cur.hand svg{transform-origin:46% 55%;animation:grabpop .28s cubic-bezier(.2,.9,.3,1.35);}
@keyframes grabpop{0%{transform:scale(.55);}55%{transform:scale(1.16);}100%{transform:scale(1);}}

/* --- pastilles de présence ----------------------------------------------- */
@keyframes chipin{from{opacity:0;transform:translateX(16px) scale(.82);}to{opacity:1;transform:none;}}
@keyframes chipout{to{opacity:0;transform:translateX(16px) scale(.78);}}
.peer{animation:chipin .3s cubic-bezier(.2,.9,.3,1.2);}
.peer.out{animation:chipout .24s ease-in forwards;}

/* --- vapeur de café ------------------------------------------------------ */
.steam{position:absolute;pointer-events:none;}
.steam i{
  position:absolute;bottom:0;width:7px;height:22px;
  border-radius:60% 60% 45% 45%;
  background:radial-gradient(closest-side,rgba(157,106,72,.8),rgba(157,106,72,0));
  filter:blur(2.5px);opacity:0;
  animation:steam 5.4s ease-in-out infinite;
}
.steam i:nth-child(1){left:1px;}
.steam i:nth-child(2){left:10px;height:26px;animation-delay:1.6s;}
.steam i:nth-child(3){left:19px;animation-delay:3.2s;}
@keyframes steam{
  0%{opacity:0;transform:translateY(5px) scaleX(.7);}
  22%{opacity:.65;}
  100%{opacity:0;transform:translateY(-27px) scaleX(1.7);}
}
.steam.cup{left:5px;top:-13px;width:28px;height:24px;}
.steam.head{left:12px;bottom:3px;width:46px;height:24px;}
.steam.head i{animation-name:steamsoft;animation-duration:8.5s;filter:blur(4px);}
@keyframes steamsoft{
  0%{opacity:0;transform:translateY(5px) scaleX(.7);}
  25%{opacity:.19;}
  100%{opacity:0;transform:translateY(-24px) scaleX(1.7);}
}

/* --- accessibilité : on coupe tout si l'utilisateur le demande ----------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .steam{display:none;}
}

/* --------------------------------------------------------------- rotate -- */
#rotate{
  position:fixed;top:0;left:0;right:0;bottom:0;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;text-align:center;
  background:var(--cream);font-size:19px;line-height:1.7;padding:24px;
}

/* -------------------------------------------------------- mobile paysage -- */
@media (max-height:560px){
  :root{--tile:52px;--label-w:74px;}
  body{font-size:14px;}
  #top{padding:5px 8px;gap:7px;}
  .title{font-size:16px;padding:4px 6px;width:min(28vw,220px);}
  .btn{padding:6px 10px;font-size:13px;}
  .tier-label span{font-size:18px;}
  #board{padding:8px 8px 10px;gap:9px;}
  #tiers{gap:4px;}
  .peer{font-size:11px;padding:2px 8px 2px 4px;}
  .hint{display:none;}
  .tile .x{opacity:1;width:15px;height:15px;font-size:11px;line-height:13px;}
  #emotes{padding:4px 8px calc(4px + env(safe-area-inset-bottom));gap:5px;}
  #emotes button{padding:3px 5px;}
  #emotes button img{width:26px;height:26px;}
  #emotes button.uni{font-size:18px;padding:4px 9px;}
  #emotes .tip{display:none;}
  .sheet{padding:16px;}
  .brand{margin-bottom:10px;}
  .brand .peak{font-size:28px;}
  .brand h1{font-size:20px;}
  .lbl{margin:9px 0 4px;}
  .in{padding:8px 10px;}
  .btn.big{margin-top:11px;padding:10px;}
}
@media (max-height:430px){
  :root{--tile:44px;--label-w:62px;}
  .tier-label span{font-size:15px;}
}
@media (max-width:520px){
  .hint{display:none;}
  #btn-share{display:none;}
}
@media (orientation:portrait) and (max-width:860px) and (pointer:coarse){
  #rotate{display:flex;}
}